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.

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

AdaCamp 2013: San Francisco

9034667768_b6fa52060e_cI recently had the chance to attend AdaCamp in San Francisco. It was a great experience and I was able to meet so many positive and inspiring people involved in the tech community. It was also my first time attending an unconference. After attending so many conferences where speakers are scheduled and topics are announced ahead of time, attending an unconference like Adacamp was a breath of fresh air. Instead of having a preselected group of conference speakers, AdaCamp made it possible for anyone to host a workshop and share knowledge. Everyone was also encouraged to share their experiences and thoughts in each session instead of waiting for a Q&A.

A Few Session Takeaways

Learning to Code — There was an interesting discussion on ways of staying motivated while learning to code. Some great suggestions were to set small, reachable goals with interesting projects. Have accountability partners who you check in with each week. Go to local meetups and discuss what you are working on. But my favorite was the suggestion of getting a cat! One attendee had a cat who woke her up early every morning (I can relate to this). She used this time to take an hour or so to learn to code.

X-Ray Goggles — I previously wrote an article on the process of using Firebug to learn code. Another attendee pointed out another excellent tool from Mozilla called X-Ray Goggles. Like Firebug, you can edit a website directly in the browser, but X-ray Goggles also allows you to save your changes on their server so you can continue to play around with the code.

Challenges & Solutions — Many of the sessions were dedicated to discussing how the tech community can become a more inclusive place for everyone. This is such an important issue that I think more people in the tech community need to address. There are many problems that still exist that attempt to silence women and minorities and make them feel as if they do not belong. Among some of the solutions discussed was the need for more allies. In short, a change in culture is needed in order to solve this issue and it can’t only be dependent on those who are affected by exclusion.

Accessibility — Since inclusivity is so important, I would be amiss to not mention accessibility in tech. There were a few discussions on how important creating accessible websites. There have been many positive changes in terms of the technology that web designers/developers use. These include using web fonts (Google Fonts & Typekit) instead of images for headers, the decreasing use of Flash, the use of semantic code in HTML5, etc. Designer and developers can also be conscious of the color choices we make to ensure there is enough contrast. Apps like Color Oracle are also useful in testing sites for color blind users.

It was an great experience to be surrounded by so many intelligent people with a wide range of backgrounds and experiences. I also have to commend the organizers of AdaCamp, they created an amazingly supportive environment that encouraged so many amazing discussions.