a look at design for the web & all it entails

· view menu ·

fonts for the web

fontwalkimage: screenshot of Fontwalk

Hopefully you’re already having fun experimenting with typography for the web :) Let’s take a closer look at implementing webfonts.

Take some time to play to familiarise yourself with the technical implementation and find suitable font stacks to work with your chosen font/s. Consider letter width, line height and colour while styling the text elements. Remember to test your page with and without the webfont.
As you get ready to work on your new project ~ consider all options and choose carefully whether the @ font-face method, as outlined in my blog post (which we looked at in our last typography session) is best, or whether using a webfont is a more suitable option. This will of course primarily depend on your choice of typeface.


webfont options



Fontdeck is a web font service which offers font licences per domain. Fonts are implemented via CSS.
(independent, founded by Jon Tan and Richard Rutter, sponsored by Clearleft and OmniTI)



typekit offers font licenses via different account types (amount of domains/fonts). Fonts are implemented via JS.
(independently started by several designers (Jeffrey Veen, Jason Santa Maria, Tim Brown and more), acquired by Adobe Systems Incorporated in 2011)


google fonts

Googe web fonts offer a growing number of open source fonts, free to use on personal and commercial projects. Fonts can be downloaded and are implemented via CSS.


working with web fonts

selecting your typefaces and font stacks

previewing your Web Font Specimen


This will remind you of the sample you download from FontSquirrel after font conversion and is designed to demo you chosen font at different sizes and with varying styles. A handy reference for yourself while working on the design as well as for proposing your typeface selection to your client/s.

Tiff: compare type differences


While making your initial choice for suitable tyepfaces for your design – it will be important to look for the overall typesetting of the copy, as well as the difference in detail of the type lines and forms. Tiff is a handy online tool which allows you to compare http://nygoodhealth.com individual letter forms.

comparing and testing

FFFFallback for font stack testing


This is one of the most handy and useful tools to check on your font stacks. Installed as browser bookmarklet – it enables you to see your preferred font with an overlay of your next alternative font. Incredibly useful as font check :)

FontFriend to test alternative fonts


Another useful bookmarklet which allows you to change the displayed font choices, adjust settings and preview alternatives very easily.
Thanks to Barbara for the tip :)

TypeWonder to test alternative fonts


Similar to the above, another useful tool (and Chrome bookmarklet) which allows you to change the displayed font choices. There’s also a handy typetester available for closer inspection ;)

considering special characters


Using your responsive page for the pen – change the mood and feel of the layout by using different typefaces. Consider how you can enhance the user experience by changing the type setting alongside your layout.


inspiring type experts

Erik Spiekermann

Typographer, graphic designer and businessman Erik Spiekermann has created timeless, influential and, yes, Meta-physical work over the past three decades.

Next to founding MetaDesign and FontShop, the latter being the first ever digital distributor of fonts, and designing more instant classic typefaces than any other, he has been recognized as an outstanding expert internationally as a lecturer and professor.

Listen to the design genius talk about new visual languages, design processes, the analogies of music and typography, and why we need better client culture in our latest Gestalten.tv video and you will easily realize why. Before heading to new visionary pastures, the bike enthusiast will make a short stop to receive the German Design Lifetime Achievement Award 2011 in February.

Watch our complete line up of video interviews on gestalten.tv

Do check out the famous FontShop site – other than offering font licenses, there is plenty of reference material and inspiration to be found ;)

Tim Brown

Tim Brown – More Perfect Typography from Build on Vimeo.

Comments are closed.