The Wonderful World of Web Fonts

I have been getting quite a few questions about web fonts lately which reminds me of just how far the web has come over the years. In 2005 I went to a talk by Ellen Lupton, she was promoting her book, “Thinking with Type”. She spoke mostly about ligatures and smart/dumb quotes but what I remember most was a question from an audience member. He asked, “What do you think about how we are limited to using only 10 fonts on the web?”. In her answer, she claimed that is was probably a good thing as people might set their body copy in an undesirable and hard to read font.

I understood where she was coming from but at the time, but I remember thinking, “But why should print designers have all the fun?”. I was used to this limited choice of typefaces on the web and thought that I would always have to import images when I wanted a headline in a particular font. This was the way of life for web designers before @font-face changed our typographic world.

The New World of Web Typography

After some trial and error from the web industry (which at one time included a javascript based technology called Cufón), a standard was finally been put into place which allows CSS to serve up actual font files to the user’s browser. The @font-face rule allows web designers/devs to link to specific font files on their server and reference it in their CSS.

Here is a simple example where I’m changing the heading to “Lato”:

@font-face {
font-family: 'Lato';
src: url(http://example.com/fonts/Lato.woff);
}

h1 { font-family: 'Lato', Arial; }

However, what has made this a little tricky has been the fact that different versions of browsers accept different types of font files. If you want to safely support most browsers, even older ones, you will need to include font files with the extensions, .WOFF, .EOT, .TTF, and .SVG. Since we are only linking to the .WOFF file in the example above, if the browser does not support .WOFF, it will show Arial instead. If your selected typeface includes italicized fonts and different weights, you will also need to link them as well.

Web Font Resources

Google Fonts
The first resource I would recommend if you are new to the world of web fonts would be Google Fonts. Since the fonts are hosted on Google, the process of linking the correct files is a bit easier. Click the Quick Use link under your selected font for instructions.

Font Squirrel
Font Squirrel has gathered many fonts from all over the web. They also have a handy Webfont Generator that allows you to covert fonts to the necessary .WOFF, .EOT, .TTF, and .SVG extensions to use online. With Font Squirrel, you’ll have to be extra careful to read the licenses, make sure any fonts you convert or find on their site have licenses that match the way you are implementing them.

TypeKit
Typekit allows you to basically rent fonts to use on your site. For a yearly fee, you are able to use any of their selection of fonts on your site.

Type Foundries and Collections
Type Foundries like Hoefler & Frere-Jones offer desktop and web licenses. Sites that feature typefaces from multiple foundries and designers, such as YouWorkForThem and Fonts.com, are also a great resource.

Keep in Mind

When using web fonts, make sure you have a license to use them on the web. Sometimes you’ll have to purchase an additional license. Another thing to keep in mind is the fact that not all type foundries sell web licenses. This means that sometimes that wonderful typeface that you’ve been using in your printed brochures cannot be used on the accompanied website.

Want to use bold or italic text? You’ll need to make sure you also link in the appropriate version of the font, otherwise it will add a faux bold or italic style which will look distorted and unprofessional.

Don’t make Ellen Lupton’s (and everyone else’s) nightmare of illegible type become real! When choosing a typeface legibility should be your primary responsibility.

And, of course, have fun!

A Look Inside Hatch Show Print

Hatch Show Print is Nashville’s famous letterpress print shop and one of my favorite places to visit when I’m in town. Founded in 1879, it is one of the oldest running letterpress shops in the country. They recently moved and they are now located in what seems like a larger space right next to the Country Music Hall of Fame.

Here are a few photo of the shop!

You can view more photos from the Nashville area on my Flickr page.

My Nerd Story

Inspired by Crystal Beasley’s post, My Nerd Story. I wanted to share my ‘nerd’ story, or how I got started in creating online.
Unlike the iPad wielding toddlers of today, my family and I didn’t have a computer in the home until I was a tween. However, my first experience using a computer was during our weekly computer class in elementary school. There were two women who ran the computer labs who were very strict. We used macs preloaded with reading and math games and we were not allowed to use anything on the computers outside of these games. Because of the strictness and the strong smell of one teacher’s unfortunate choice to go with a Jheri Curl, I was not a fan of computer class. However, these classes introduced me to computers and I did enjoy using computers when I happened upon them at a friend’s house or at a library.

Later, I somehow managed to convince my parents, who proudly called themselves ‘computer illiterate’, to purchase a home computer. This took a full year of convincing as my parents were not tech savvy and didn’t fully understand what they would be purchasing (after thinking about how much computers used to cost back then, I don’t blame them). After more than a few weeks of having this giant desktop, we finally figured out how to get it set and and connected to the internet. My brother and I also taught our parents the basics of computer use such as scrolling, clicking on links, etc.
Once I was connected to the internet, my favorite pastime became researching topics that interested me. I began to notice than many websites I found for musicians had disclaimers that stated that their sites were created by fans. Around that time I had also been visiting gurlpages.com— a community geared towards girls that offered HTML & CSS tutorials as well as free web space. I quickly created a site for one of my favorite groups, Dru Hill.

The site featured the latest updates on Dru Hill’s music, ran contests, photos from the latest print magazines, various quizzes and interactive elements, oh yeah, there was even a guestbook, remember those?. Even though I had no idea at the time what I was doing, I was implementing a lot of marketing and content strategies and there was a constant stream of visitors always coming back for more. Somehow the site blew up and I received tons of hits and the site ended up being #1 on the search engine, Excite. HTML & CSS was pretty basic back then but I learned a ton about coding and design just from running that site. No one knew really knew the person behind the page and I found out quickly why those other sites had disclaimers on them (I constantly got slightly creepy fanmail).

After conquering the fanpage realm (ha), I created a few personal pages that displayed my photographs, art and writing. Those pages could’ve been described as blogs but this was in a time before ‘web log’ was even a term. Back in those days there were many girls who had created whole communities and businesses all on their own. They had their own forums, linked to each other and supported each other. It was a very social community even before ‘social media’ and the creativity and innovation that went into these sites would put established companies to shame.

Fast forward to now, the internet has changed in more ways than I could imagine. Not only has the technology changed but the vibe has changed. There were far less people who were building and utilizing technology back then. Even though this marked me as a ‘nerd’ back then, I’m proud of where I came from and I wouldn’t change my history for anything. It hurts when others deny the existence of women in technology. Growing up, I had no idea that ‘only boys build websites’, I was surrounded by so many talented girls online. And like Crystal points out, you don’t need to start at 13 years old to be involved in building websites, you can start at 42.

Autumn Color Inspiration

I recently attended an amazing web design conference in Rhode Island named Artifact Conference. I left feeling very inspired about the nature of web design & development: ever changing and always something new to learn!
The conference wasn’t the only inspiring part of the trip. I had some time to explore the scenery in Providence, RI and take photos of the changing leaves in the local park. Most of these photos were taken at Roger Williams Park.

Roger Williams Park Providence WaterFire

Roger Williams Park

Roger Williams ParkRoger Williams Park

Leaves