Designing a font library for a new website is no picnic in Central Park. The process can feel like a chore when you have so much to choose from and no clear direction. But when you have the ability to test out font choices the whole process becomes much smoother and simpler. Understanding the nitty-gritty stuff is crucial, but you shouldn’t lose sight of the forest for the trees.
In this post I’d like to share a few ideas for web designers who wish to achieve a deeper focus on digital typography. The field is broad yet somewhat mandatory since every good website has text on the page. While you can get by using the default browser fonts there’s plenty of reason to dip a toe into the ocean of typography and pull out some more pertinent information.
Design for the Web
When planning a new website I like to start with a big picture view of the composition. This places a focus on the navigation, content structure, and overall layout. Then as you start to lay in a detailed mockup you’ll find a need to start getting more particular with details.
Choosing which fonts to use on a website is like picking out matching attire for a splendiferous outfit. There are many different choices you can make, some that go together better than others. But ultimately it’s about the overall composition and how things looks in relation to each other. I often find typographic inspiration by analyzing other websites that use a similar design.
Within the realm of web design it’s important to recognize the typographic difference compared to print. Notably that digital text can and should be able to resize based on screen resolution and browser size. For responsive websites the page should be just as readable on a smartphone as on a large 27″ monitor.
Also font choices will vary based on the complexity of a website. For something like an online magazine you might choose to include 3 or 4 different typefaces for paragraphs, headers, navigation and maybe footer links. A personal portfolio website could get by using just a single font if the message is still clear.
Stacking Fonts
When I mention the idea of a “single font” I don’t mean using just one single font family. When the website is rendered in a browser the user may only see one font, but it’s always a good idea to offer fallbacks in case some fonts aren’t available. The CSS font-family property can take multiple values separated by commas.
Listing a number of fonts together is called a font stack. The leftmost font in the list will display first and in the event where it can’t be rendered, CSS will move onto the next one. If all fonts are exhausted then at the very end you can place a generic serif or sans-serif value which uses the system default.
CSS Font Stack is perhaps one of the best online tools you can use for organizing quick font stacks. The site is organized by serif and sans-serif stacks which also have the support percentage based on Windows or Mac users. Plus the stacks are built in a reliable fashion encompassing a wide array of different font families.
Generating Custom Webfonts
Most web developers already know about the popular @font-face syntax for including your own web fonts. This makes it possible to use any custom font hosted locally on the web server. But in order to achieve full browser support it requires more than just a single TTF or OET file.
There are a number of different font filetypes that should be included with each @font-face declaration. Aside from EOT and TTF there’s OTF, WOFF, and SVG. All five of these filetypes offer uniformity when it comes to a wide range of browser support for rendering different characters on different operating systems.
Font2Web is a very popular resource which is free to use on any computer. Simply upload a font and it can be converted to all five filetypes, freely downloadable for any website. Keep in mind that to include a font for commercial use it needs to be permitted in the font license. Most free fonts allow this by default but it never hurts to double check. Take a peek at the Font Squirrel FAQ to read more about commercial use on the web.
I’d also like to share a couple other resources for converting fonts online. A newer tool Web Font Generator also converts to all five filetypes and includes the CSS code needed for declaring @font-face. The site is minimalist and works great in all browsers – certainly worth bookmarking as an alternative.
As a third option the website Everything Fonts has a small font-face generator which performs a similar task. You upload a single font file and it’ll spit out all five of the main filetypes. It also has a neat little chart which explains the varied browser support for each individual filetype. No matter which site you prefer, all of them are simply fantastic and offer a much-needed resource to web designers around the world.
Live Font Testing
Putting together a small wireframe in the browser is a surefire way to demo fonts. Even if you have a brief mockup coded into HTML/CSS it can provide a structured layout for comparison. And since it’s possible to build everything locally there’s not a whole lot of prep work required.
Another solution is to work in the cloud by rendering sample pages on web-based IDEs. CodePen is my personal favorite because updates are applied in real time and it supports CSS/JS with external libraries. The greatest asset to this method is that you can edit a page from any computer and the changes will be saved online for easy access.
Alternatively you might want to compare different typefaces without building an entire layout. For this I’d recommend using an online comparison tool like Typetester. You choose between a series of different fonts and the site will display them side-by-side. It’s easy to compare font styles like bold, italic, or small caps.
To demo a custom font or Google Webfont I have to recommend webfont test which is a free open source project hosted on GitHub. Just select an existing Google Webfont or upload your own into the webapp. The font is visible in each font style, and you can see where typographic points like baseline and x-height fall in relation to each character.
Closing
It’s never an easy job to build a website from scratch. There’s a lot you have to take into consideration and planning is a vital step along the way. But getting your plans into an environment to be tested will make all the difference. I hope these tips and online tools can prove useful for typographic design on the web. If you have other suggestions or useful webapps feel free to share in the comments area.
This is so awesome! Thank you for the share. Typography choices should not be the last thing in consideration when you build a website. There is just so much involved and that brings your site together. Its one of those things that can make or break a site. Good read!