Web design is 95% typography. Oliver Reichenstein from Information Architects made this statement back in 2006 and it is as true today as it was then. The Internet is a massive collection of information, and most of it is in text format. It is the job of web designers to present this text and information in a user-friendly and usable way.
Typography is the art of styling written language so that it is as easy and attractive as possible to read. There has always been some limitations on controlling the details of how text is styled and displayed online. In print, the designer can tweak the text with sophisticated software and be sure that the final design will always look the same. On the web, however, the designer and developer don’t have as much control over missing or replacement fonts or users resizing text.
With responsive web design thrown into the mix, it might get a little complicated to get typography right on every platform. Below are a few guidelines and tools to make sure that the text on your website is displayed in an optimal, readable and aesthetically pleasing way with regards to typography.
1. Font face
With the introduction of font replacement tools, we are no longer stuck with using only the standard fonts available on a user’s computer. Tools such as Google Fonts and Typekit allow you to use a wide variety of fonts on your website. Some fonts, such as artistic script fonts, might be better used for headings only, while a more standard and legible font is used for body text.
Google Fonts is a free service and easy to implement. Google has a simple guide that involves choosing fonts and their styles and then providing a line of code to include in your website that might look something like this:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
After including this code, you can reference the “Shadows Into Light Two” font in your CSS stylesheet and the font will be displayed:
h1
{
font-family: 'Shadows Into Light Two', cursive;
}
An example of how the Google Font “Shadows Into Light Two” might display on a website
2. Font colour
The colour of the text and the background on which it appears is something important to consider. If this contrast is too low, users might not be able to read properly. Contrast-A is an online tool that can help you see if your colour combination will be legible to readers with normal vision and also how it will look to colourblind readers.
Examples of colour combinations and the contrast between them – colour combinations with good contrast are easier to read
3. Line length
The line length, or measure, refers to the number of characters in one line of text in a single column. The ideal measure is 60-75 characters long for text that is set to 16px (according to Richard Rutter, who adapted Bringhurst’s work “The Elements of Typographic Style” for the web). This number is based on the way in which people read and how much or little they have to strain their eyes in order to reach the end of a line. With the dawn of the mobile age and a hundred different screen sizes, this number has to be adapted slightly to prevent text from being too small on a mobile phone. A better measure for smaller screens might be 35-40 characters per line.
The recommended number of characters per line might cause text to be too small on a mobile device
4. Font size
Adjusting the line length of your text for smaller screens will probably mean changing the font size. This can be done by using media queries specifying different font sizes in em or in CSS Viewport Units (vw, vh and vmin). CSS Viewport Units sets the size of the text relative to the viewport in a responsive way, which means that the text will have the same line length no matter the size of the screen. This might cause some problems, such as the text being too small on small screens for example. In the end it might be better to use a relative unit such as em for font sizes instead of relying on this implementation of responsive font size purely for the sake of keeping line length.
When adjusting the font size for smaller screens, also keep in mind that the ratio between headings and the body text might need to change as well. If the size of the headings and the size of the body text is made half as big as on a desktop, the body text might be perfect but the headings might still be too big for the small screen.
An example of how headings sometimes need to be scaled down more than the body text so that it fits more comfortably on a mobile screen
5. Line height
Line height refers to the spacing between lines of text. In CSS, the line-height is by default about 20% of the font size. For accessibility reasons, the W3C Recommendation specifies that the line-height should be at least 1.5 times larger than the font size, but there is no ideal height. Generally, if the line length is longer, the line height should be more and if the line length is shorter, the line height should be less.
The future of typography and the web
Croatian web designer Marko Dugonjic has created a project that uses face detection to resize text on the website automatically. Through the webcam, the site determines how far the user is from the device and then the font size is adjusted according to this. You can view the website here and try it for yourself. This technique might not necessarily become widely used, but it is a good demonstration of how adaptable and responsive sites that are easy to read could create a better user experience if implemented in a non-obtrusive way.
Moving closer and farther away from the screen adjusts the text size for comfortable reading