Menu

CSS Typography: The Basics

Typography is an essential component of a website’s design. This is for good reason: good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing. There are also font styles to consider.

How can we use CSS for great typography in our web designs? This is a question we’ll try to answer.

This is the first part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

Typography CSS Properties

There are two main groups of CSS properties that control typography style: font and text.

The font CSS property group dictates general font characteristics such as font-style and font-weight. Below you’ll see the p element given a font-style and a font-weight property.

p {
  font-style: oblique;
  font-weight: bold;
}

The text CSS property group deals with the characters, spaces, words and paragraphs. For example, the text-indent property indents the first line of a text block. The letter-spacing property controls the spaces between a text block. Below, you’ll see the p element given a text-indent and a letter-spacing property.

p {
  text-indent: 50px;
  letter-spacing: 2px;
}

There are other CSS properties that can affect web typography outside of the fonts and text property groups. For example, the color property controls an HTML element’s foreground color, and can be used to change the color of text. Below, you’ll see the p element given a red color.

p {
  color: red;
}

Font Sizing

Browser compatibility is a major issue in web design, even more so if you are attempting to make your web designs look the same in all browsers. Beginning web designers may mess around with a font’s size until it looks just right, only to find it has completely changed among other browsers and platforms. Size fonts the correct way, and this problem can be minimized.

A simple use of sizing text is as follows:

h6 {
  font-size: 12pt;
}

The above sets the heading level-6 element to 12pt.

For font-size values, there are 4 types of units of measurement.

Absolute-size

Standard keywords whose values are defined by the user agent (e.g., web browser). Values in W3C CSS 2.1 specifications are xx-small, x-small, small, medium, large, x-large, xx-large.

Relative-size

Standard keywords that size fonts based on the parent element. These are also defined by the user agent. Possible values are larger and smaller. Below you will see what a paragraph element looks like inside a parent element (<div>) that has a size of 12pt (in Firefox).

div {
  font-size: 12pt;
}
p {
  font-size: large;
}

Both keyword value groups (absolute-size and relative-size) can vary greatly between different browsers, so if your aim is to be pixel perfect, they might not be a good option, and most web designers avoid them altogether.

The smaller and larger keywords, however, can be great for convenient relative sizing when exact proportions don’t matter to the design. The larger and smaller values will inherit the parent element’s font-size and then relatively adjust the target element’s font-size accordingly. So, for example, if a parent element’s value is set to small, the larger keyword will make the child element larger. For most browsers, the change from exact units is around 1.2 units, although that proportion is not consistent amongst all browsers.

As an example, if text is set to 12pt, the larger keyword will resize the child element’s text to about 12pt x 1.2 (depending on the browser), which would equal 14.4pt.

Absolute Lengths

Absolute lengths are literal sizes. For example, 12px is exactly 12 pixels and 2in is exactly 2 inches. Absolute lengths are often used by web designers.

Possible units for absolute length units are pt, px, mm, cm, in, and pc.

Millimeters (mm), centimeters (cm), and inches (in) are more suitable to physical, real-world dimensions and are units of measurement often used in print design. They are not very suitable for screen-based measurements because of the high variance of screen resolutions.

Points (pt) and picas (pc) — while better than mm, cm and in — can also vary visually based on the browser or device’s dpi.

Therefore, when using absolute lengths, pixels (px) are the least problematic. One issue with px, though, is that older versions of IE cannot resize them natively. If developing for an audience that will likely resize text manually through their web browser, the px unit of measurement may not be a good option. Be sure when using px for font sizing that accessibility is not an issue.

Relative Lengths

The other type of length units are relative lengths. This means that their sizes are dependent on the font-size assigned to their parent element. Possible units are em, % and ex.

Not many web designers use ex — it is the height of the letter "x" in the current font.

em and % values are far easier to work with. em and % act identically, and it’s just a matter of syntax:

html, body {
  font-size: 85%; /* = (.85em) */
}

h1 {
  font-size: 110%; /* = (1.1em) */
}

The proportions are all relative to the element’s parent font-size. So, if the base font size (in body or html) is set to 80%, a child with a font-size of 0.2em or 20% would be 20% in height of the original 80%.

Font Stacks

CSS font stacks are a list of fonts that include fonts that will work well in various operating systems and platforms, with the goal of making typography as consistent as possible.

Here is an example of a font stack:

body {
  font-family: Georgia, Times, "Times New Roman", serif;
}

In the above example, the web browser will go from left to right until it finds a font in the user’s computer. For example, it will search for the Georgia font, and if it doesn’t find it, it will move on to the Times font, and so on.

There are many options for creating font stacks, and there are many popular premade font stacks available on blogs and in IDEs such as Dreamweaver.

The idea of a font stack is to provide ideal fonts that would be available on many computers, and then provide fallback fonts behind them to degrade to in case the preferred font is not available.

A good goal to strive for is to create beautiful typography for a wide range of users, but also account for the situation that the preferred font is not available to all users.

There are a few key items to keep in mind when creating custom font stacks:

  1. There should be a good amount of fallback fonts. Our above example only lists three, but it would be ideal if there were more.
  2. The fonts selected should be available on a number of platforms. For example, Arial is widely used on Windows, while its near equivalent, Helvetica, is on nearly all Macs.
  3. For font stacks that accomodate Linux users, check out A Web Designer’s Guide to Linux Fonts.

Best Practices for Developing Font Stacks

All fonts in the same font stack should have the same (or similar) aspect ratios. Some fonts are wider or taller per letter than others are, giving them larger aspect ratios.

So, if we put Verdana (mostly Windows) with Helvetica (mostly Macs), we’ve met the above requirements. However, since Verdana is much wider than Helvetica, the text will look dramatically different on most Macs compared to most Windows computers.

The image below show the difference in aspect ratio among four common Windows fonts. As you can see, Verdana and Georgia are wider and taller than both Arial and Times.

In larger blocks of text, the difference is more apparent. If we had a font stack with Verdana to accommodate Windows and Helvetica for Macs, the image below shows the significant difference.

So when developing font stacks:

Here is a list of the most common fonts for various aspect ratio types:

If you need more help on font stacking, CodeStyle has created a very useful font stack builder that includes all fonts between Mac, Windows, and Linux.

CSS Typography Pseudo-classes and Pseudo-elements

CSS pseudo-classes and pseudo-elements are great for targeting certain types of elements. Pseudo-classes start with a colon (:) followed by the class/element name.

There are several CSS pseudo-classes/pseudo-elements related to typography, such as :hover and :first-letter.

Let’s go over some that will help in styling our typography.

Links and Dynamic Pseudo-classes

The design of a website’s hyperlinks is very important. Use anchor link pseudo-classes to create font styles for each link state.

:hover is probably the most familiar, and it is good practice to create a separate (yet similar) style for it to provide a visual cue that a link element is interactive.

Here are the link pseudo-classes:

a:link { color: #666666; text-decoration: none; }
a:visited { color: #333333; }
a:hover { text-decoration: underline; }
a:active { color: #000000; }

First, Last, and n-th Pseudo-elements

The following pseudo-elements all relate to the position of an element relative to the HTML document and the other HTML elements in it.

:first-letter allows you to target the first letter of an element. Here’s an example:

p:first-letter {
  font-size: 30pt;
  display: block;
  float: left;
  margin: 0 5px 5px 0;
}

As you can see, this pseudo-element can be helpful for creating drop caps.

The ::first-line CSS pseudo-element allows you to select the first line of an HTML element containing text. Here’s an example for bolding the first line of text and making its letters uppercased:

p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}

Note: As of Aug. 15, 2015 Google Chrome has a bug where the text-transform CSS property is ignored when using the ::first-line pseudo-element selector.

:nth-child() is a CSS3 pseudo-element that will target that nth element in a page or parent element depending on the selector’s specificity. In our example below, we target the second paragraph on the page.

p:nth-child(2) {
  background: #e7f0ce;
  padding: 10px;
}

We could also target the second paragraph within a div or the second list item in a list as follows:

div p:nth-child(2) { 
  background: #e7f0ce;
  padding: 10px;
}

ul li:nth-child(2) {
  background: #e7f0ce;
  padding: 10px;
}

Also play around with :nth-child(even) and :nth-child(odd) pseudo-classes to grab even and odd elements.

There is also the :first-child pseudo-element (CSS2) and the :last-child (CSS3) pseudo-element that can select the first and last element in a set.

Conclusion

We have covered the basics of CSS typography. With a bit of creativity, typography can go in some beautiful and interesting directions with CSS.

In the next part, we will discuss some CSS techniques and best practices pertaining to CSS typography.

Related Content

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by vis

In this sponsored giveaway, we’ve teamed up with Avactis to provide five readers with Avactis licenses.

For a chance to win, simply answer the following question: If you were to win, how would you use Avactis?

This giveaway ends on March 9, 2011 after which the comments section on this post will be closed. We’ll use your email address to contact you if you win. The winners will be randomly selected and announced on a separate post. Please note that comments that don’t follow the instructions on how to participate (described above) may not be published.

We’d like to thank our site sponsors between February 1 – February 28, 2011. As readers, you can support Six Revisions by checking them out and seeing if they have products and services that you can take advantage of.

Site24x7

Site24x7

Shutterstock

Shutterstock

Top 25 Web Hosts

Top 25 Web Hosts

PageLines

PageLines

PSD to HTML

PSD to HTML

FaceItPages

FreshBooks

FreshBooks

Intervals

Intervals

Adobe Business Catalyst

Adobe Business Catalyst

TrackRecord

TrackRecord

Site5 Web Hosting

Site5 Web Hosting

InstaLance

InstaLance

Zoho Invoice

Zoho Invoice

ThemeForest

ThemeForest

Full Sail University

Full Sail University

6 Popular Content Presentation Design Patterns

Content is what is considered the "meat" of a website. Content should be usable and displayed in a manner that makes it efficient to read and act on. Now that we have discussed website navigation design patterns, let us now explore popular design patterns for displaying content. Below, we’ve included a few current design trends in content presentation, all based on enhancing the user experience.

(more…)

Partners