Feed
QuiltNotes on @font-face
When I was creating the layout for Secret Mirror, I wanted to add personality to the design. I came across websites and tutorials detailing the use of CSS3, and decided that I wanted to implement it in order to see what would come of it. So far, my heaviest experimentation has been with @font-face, a CSS3 property that allows the use of fonts in a web design without having to worry about whether or not the person viewing it has that font installed on their computer.
Finding the perfect font
I am a picky person when it comes to design. If I don't like the way something looks on my website, it simply cannot do. Font selection, therefore, is incredibly important to me, and my initial search for the perfect font resulted in my downloading around twentyish fonts and experimenting with them on my mock up.
Through trial and error, I noticed that a lot of fonts that look beautiful when used in a graphics program like Photoshop simply don't hold up when rendered simply through a browser. Scripty fonts like Chopin and Freebooter Script look horrible with @font-face. They need to be incredibly large in order for the elegant lines to be visible, and I've noticed that there are a lot of rounded fonts that render with jagged edges when implemented in CSS3. Even simple fonts that would logically seem like a good decision for a screen can have a nasty surprise in store.
There are also fonts like Euphorigenic that feature odd x-heights and descenders and offset the overall alignment of a word. Euphorigenic itself rendered very smoothly, but the lineup of the letters were simple too jagged to contribute anything worthwhile to a design.
Okay, I have it, now what
After what seemed like forever, I found the very sexy Sexsmith font, which was perfect for this design because it is a very simple, clean and elegant font. Fancy, but only a little. Rendered perfectly, looked amazing, and worked in all the browsers that I tested in apart from Internet Explorer 8. It turns out that while all the other browsers accepted a mere True Type (.ttf) file (or an Open Type (.otf), either is fine with @font-face), Internet Explorer requires an Embedded Open Type (.eot) file. Luckily, there are great converters out there like ttf2eot that make .eot files really easy to obtain.
Hating everything is easy when nothing works
One of the things I do when I design is only figure out the perfect type-face for the browsers and operating systems that I personally use and then work on other pieces. Different browsers will view websites differently, and some computers may not have the first font choice I laid down for them, but I don't go back to figure out what they get to see instead until after the rest of my design is pretty much done.
When I went back to define alternatives to Sexsmith, I was very disappointed. Sexsmith is a very thin, very tall font, and has to be printed large in order for it to be legible. And if you notice the header and navigation on this design, they're pretty close. While Sexsmith looks awesome when it's huge, Arial looks horrible at that size. So does Trebuchet MS, Times New Roman, and pretty much everything else you can think of when given the same font size, letter spacing, line height, and capitalization specs as I gave Sexsmith. Everything else in my layout broke when I tried them, and that's when I learned that Sexsmith simply wasn't meant to be. Back to the drawing board.
(By the way, Typetester is a great tool for comparing fonts for something like this.)
3092804 fonts later
It isn't easy to find similar fonts to what you already have, especially when you don't want to use a different font and had your heart set on something else. At one point I became so desperate that I just threw "@font-face fonts" into Google and actually found one of the greatest things ever: Font Squirrel!
Font Squirrel offers @font-face "kits" and shows a demo of what your font would look like when rendered through CSS right on the website. The best part is, all the fonts that are listed on the website are absolutely free with a license that indicates that the featured fonts are usable for embedding. That's great, because I hadn't even considered that, and now I feel like a horrible person for admitting that. Anyway!
I finally found Old Standard, which is a beautiful font with a similar feel to Sexsmith and features akin to Georgia and Times New Roman, so now my layout doesn't break in older browsers.
Conclusion
@font-face is pretty fun to play with, but I wouldn't rely on it too heavily to make a design. It seems that the new CSS3 features in general aren't quite ready to be fully accepted into the realm of web design and should only be used as subtle accents that a design can easily do without. I really like it though, and I don't see myself making a website without it now that I've played with what is essentially magic.
lazulin
lunaris
iibui
Flickr Feed
