Typography is a huge part of modern web design. Gone are the days where you were limited to using the handful of typefaces that were installed on almost every user’s system. Nowadays, through the use of web fonts, many hundreds of different fonts can be used safely on the web.
Understanding how to select and use appropriate fonts in web design can be a challenge, though. Luckily for you, we’ve compiled a list of tools and techniques to help you identify fonts, select appropriate font combinations, and implement typography elegantly in your responsive web designs.
Identifying and selecting typefaces
Deciding on which fonts to actually use in your design can be difficult. Fortunately, there are some great tools out there to help you select fonts and combinations to enhance your design.
WhatFont is an amazing extension for the Google Chrome browser (if you don’t already use Chrome as one of your primary browser for web design and development, we highly recommend trying it out; it has an abundance of useful extensions). To use the WhatFont extension, you simply install it within Chrome, enable it from the toolbar and then the name of any font you hover over will appear in a little tooltip near the font. If you click on the font, additional info will be revealed, like color, font size etc.
WhatFont provides an easy way to discover font combinations that are being used on beautifully designed sites, which can be a great source of typographical inspiration.
If you’re planning on using fonts from the free Google Fonts library, you should take a look at fontpair.co. It suggests a wide array of font combinations using fonts drawn exclusively from Google Fonts. You should be able to find a free combination to suit just about any project here.
This site is more of a showcase of what can be done with some of the fonts available for free on Google Fonts. It really does provide some beautiful examples of web typography and suggests some great font combinations. It’s sure to get you inspired.
Where to get your fonts and how to use them
There are a few options when it comes to sourcing the fonts for your website. We’ll cover two free options here, but there are many more – both paid and free – sources available.
By far the easiest and most convenient way to use web fonts in your design is to use Google Fonts.
To use fonts from the Google Font library, you simply need to go and select the font or fonts you’d like to use, add them to your collection, insert the generated code into the <head> section of your site’s code, and start referencing the font as you normally would in your CSS.
For example, once you have added the following code to your <head> section:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
you could make all h1 tags use Open Sans (and fall back to the system default sans-serif font) simply by adding the following regular CSS rule:
h1 {
font-family: 'Open Sans', sans-serif;
}
Font Squirrel and other self-hosted solutions
You may want to use a font that is not available on Google Fonts. In these cases, websites such as Font Squirrel may be useful. Using web fonts from these sites is also very simple; it just requires a few more steps than Google Fonts.
Firstly, unlike Google Fonts, you will need to upload the font files to your own server. You may also need to write your own CSS @font-face rules to load those font files and make them usable (this is not necessary with Font Squirrel).
For most of the fonts on Font Squirrel, you can generate a web font kit (some have licenses that don’t allow this). This takes care of most of the technical issues for you. To generate the web font kit, when you are on the individual font page (eg. http://www.fontsquirrel.com/fonts/open-sans) just click on the ‘webfont kit’ tab, select your options (the defaults are usually fine), and then click the ‘Download @font-face kit’ button.
This will generate a .zip file that contains everything you need to get your font working. Just upload the .eot, .svg, .ttf, .woff and .css files to a folder, preferably a folder under your existing CSS folder on your server.
Next, you need to add a reference in your existing web page to the .css file generated by Font Squirrel. To do so, add the following into the <head> section of your page, making sure to add the correct path to the Font Squirrel CSS file:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" charset="utf-8" />
The .css file generated by Font Squirrel should be in the same folder as the font files you uploaded to your server earlier. If they are in different files, you will need to correct the paths in the Font Squirrel stylesheet.css file.
Now that the files are uploaded and the CSS file is being referenced correctly, you can begin using the fonts in your designs just by referencing the font as you usually do in CSS. If you don’t know how to reference a font in your CSS code, you can find out by checking the Font Squirrel stylesheet.css file associated with that font.
Creating Your Own CSS @font-face Rules To Use Web Fonts
If you get a web font from a source that doesn’t generate the required CSS rules, you’ll need to create them yourself.
Basically, you just have to define the name of the font-family, then reference the font-files you’re going to use to render the font in different browsers. The example below shows the CSS @font-face rules needed to implement a font called Open Sans; it assumes the font-files are uploaded to the same folder as the CSS file.
@font-face {
font-family: 'OpenSans';
src: url('opensans.eot'); /* IE9 Compat Modes */
src: url('opensans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('opensans.woff2') format('woff2'), /* Super Modern Browsers */
url('opensans.woff') format('woff'), /* Pretty Modern Browsers */
url('opensans.ttf') format('truetype'), /* Safari, Android, iOS */
url('opensans.svg#svgFontName') format('svg'); /* Legacy iOS */
}
To use this font in your design, you would use a CSS rule, such as:
h1 {
font-family: 'OpenSans', Fallback, sans-serif;
}
Note that we are using the font-family name as defined in the @font-face rules; unlike regular system fonts, it must be enclosed within quotation marks.
These rules ensure the web font will be compatible with as broad range of browsers as possible.
Improve performance with Web Font Loader
On overstressed networks or over particularly slow internet connections, the performance of web fonts can become an issue. The content being rendered in web fonts may take longer than is ideal to become visible to users. This is commonly known as the ‘Flash of Unstyled Text’ (FOUT) issue. Although this issue rarely becomes a major problem, it can potentially pose significant usability challenges.
If you run into this problem when using web fonts on your websites, you may want to take a look at the Web Font Loader script. This script allows web fonts to be rendered in regular system fonts until the relevant files are loaded in the user’s browser. This can result in an improvement in perceived performance and a far better user experience.
Options for Responsive Text
Because the web is increasingly accessed on a mix of devices, such as desktop PCs, phones and tablets, it’s important your typography is flexible and adaptable enough to work and look great on a wide range of screen sizes. The most common way to do this is using regular CSS media queries and setting font sizing and spacing for each relevant screen size. This article is a great primer on CSS media queries.
FontFlex is a jQuery plugin, which offers an alternative approach. It results in much more dynamic and flexible scaling of text.
To use it, you simply reference the script after you’ve reference jQuery in your page’s code:
<script src="jQuery.min.js"></script> <script src="jQuery.fontFlex.js"></script>
You should also declare general font-size and line-height rules in your CSS to ensure text scales properly:
body {
font-size:1em;
line-height:140%;
}
Then, to apply the effect, simply add the following self-invoking function, either in a separate JS file or within <script> tags on your page:
$(function()
{
$('body').fontFlex(14, 20, 70);
});
The parameters in order are: minimum font-size in pixels; maximum font-size; and mid-range buffer (best set between 60 and 70). Check out a live demo of some beautifully dynamic scalable text here .
This plugin works flawlessly in Google Chrome, Apple Safari Desktop and Mobile, Microsoft IE 9, 10, 11 and Mozilla Firefox.
Go forth and create beautiful web typography
So there you have it! This guide should give you all you need to start selecting great font combinations, implementing web fonts in your responsive layouts and optimizing web font performance.
Remember, the goal of web design is to facilitate and enhance communication, and great typography is central to achieving that goal.