Traditional designers have known for centuries the importance of typography in design. But web designers were stuck using boring default fonts with automated line heights and tracking that often made even the most well-crafted pages look amateurish when compared to print designs.
Initially, web designers had no way to change the fonts–they were controlled by the web browser. Then the <font> tag was added, quickly followed by some limited CSS styles like: font-size , font-weight, font-style, and a few others. But finally, it is possible to do true typography with CSS, adjusting leading and tracking, using kerning and font features, plus changing the font families and the look of the fonts. In many ways, typography is finally coming into its own in web design.
The following tips will help you add effective typography to your web designs using modern CSS styles that work right now.
Basic Typography–Change the Font Family
The first thing you should consider when working on your web typography is the font family that you’re using. Most designers know how to use a font stack to tell the browsers the font families to use in priority order. You just list them in your CSS like this:
font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
This method relies on your customers having the fonts you want installed, with fallback options if they don’t have your first choice. But most non-designers don’t have more than the default fonts their computer came with, so they aren’t going to have fonts that cost money like Helvetica Neue, no matter how nice it is. That means that your website is always going to have sub-par typography for the majority of people who view it.
The solution to this is to use embedded web fonts. You can host your own web fonts that you’ve either purchased or gotten from a free site like Font Squirrel. Or you can use online web font repositories like Google Fonts or Adobe Typekit. Online fonts are the easiest way to get custom typography because you generally just need to add one line to your HTML like this:
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
This is a link to the Google Font Alegreya Sans. Then, to use it on web pages you add it to your style sheets the same way you would any other font:
font-family: 'Alegreya Sans', sans-serif;
The advantage of web fonts is that as long as your customers are connected to the Internet, they will get the fonts you intend. But they can increase the download time of your pages, so don’t use more than one or two fonts on a page.
Spacing Typography with Leading, Tracking, and Kerning
CSS has had the line-height property for years, and this lets you do some simple leading adjustments. The line height designation is slightly different from leading. Leading was the process typesetters used of placing thin lead bars between the lines of type to separate them and change the way the text was read. Lead is generally added either above or below the line of text. The CSS line-height property, on the other had, splits the value and puts half above the line of text and half below. This can result in designs looking wrong if you are expecting the line-height property to be exactly like leading.
Web designers also often make the mistake of assuming that the line-height property must have a unit. In other words, they always write line-height: 12px; with the “px” at the end. But while this is allowed, it makes your designs very inflexible. If a customer views a site and changes the font size in their browser in some way, there is a risk that the line height will not scale properly. It is better to use values that are relative to the font size, either with unit-less values such as line-height: 2.1; or percentages like line-height: 120%; .
But you can also affect the space of the letters on each line with two different CSS styles: letter-spacing and word-spacing . Like line-height and leading, these style properties are not an exact analog of the typography tool tracking, but they give you some control over the legibility of lines of text. Unlike the line-height property, these properties should be given specific length values like letter-spacing:1px; or word-spacing: -0.05em; . These values are added or subtracted from the current space between the letters or words. Be very cautious when using negative values, as these can quickly run the letters and words together in an illegible mass.
Kerning is something that most web designers have forgotten about. Those designers who did care would kern their fonts in image programs and then display the text as a picture. But this is no longer necessary with the CSS font-kerning style property working in all modern browsers except Internet Explorer and Edge.
Font kerning is the spacing that is set within the typeface itself. It is a way of ensuring that the letters look evenly spaced by adjusting the spacing between certain letters. For example, if you look at the two capital letter forms A and V. When they are placed next to each other–AV–they can appear to be further apart than other letters in the same font family if the font is not well-kerned. However, browsers can turn off kerning in fonts, if the font size is too small. And sometimes you might not want kerning to be applied at all. In this case, you can use the font-kerning property to make your fonts kern exactly as you wish them to. The values are font-kerning: auto;, font-kerning: normal;, and font-kerning: none;. The default is “auto” and this lets the browser decide when kerning should be applied. When you choose “normal” you are turning kerning on in all situations. And “none” turns kerning off.
This is Just the Tip of the Typography Iceberg
CSS has got a lot more typography in it than it did ten years ago. So you shouldn’t be limiting your typography to just font families and spacing. You can affect the smoothness of your fonts with the font-smooth property. You can add OpenType features with the font-feature-settings property. If you use East Asian languages on your website, you can finally do better text emphasis with the text-emphasis property. You can also decorate the text with shadows ( text-shadow ) and strokes ( text-stroke ).
Do any of these seem interesting to you? I’d love to know what you want to learn about. Drop me a line or post a note in the comments. What kind of CSS typography do you want to know more about?