How To Create Great Web Typography in 10 Minutes

Typography in web design can be a lot more complex than it seems. Being able to read content easily is a leading usability concern, but typography is also very much an aesthetic concern. For many designers, creating the perfect typography can be a mystery. Switching back and forth between type sizes, heading proportions, font styles, and spacing can give any designer a headache. After hours of fiddling, it can still just "not feel right.

How To Create Great Web Typography in 10 Minutes


In this article we'll go over how to adjust typography from a more official and mathematical standpoint - and we can get the typography of any website perfected in 10 minutes or less.

Set a Baseline / Vertical Rhythm

Imagine back in grade school when you used lined notebook paper for everything. You wrote titles, paragraphs, and lists for notes, and they all adhered to the rules of the horizontal lines guiding them. Everything was evenly spaced and proportioned onto the set lines, and everything was kept organized. This is vertical rhythm. On the web, we don't have horizontal lines guiding us to create typography, but the effect can still be the same when we adhere to those imaginary horizontal lines. For easily legible typography that gives off a great aesthetic effect and put-together look, adhere everything to that imaginary notebook - web typography's baseline or vertical rhythm.

Vertical Rhythm
Image credit: pinksherbet

  1. Determine a base font size. A 0.75em font size is common; adjust as necessary to fit needs or preferences. EM's are most appropriate so IE users can adjust font size if necessary, but if you think in points or pixels better, use this for now and convert later with this tool: PXtoEM.com.
  2. Set a line height of around 1.5x the base font size. So if you have a 0.75em base font size, the line height would be 1.125em, or 1.12em-1.13em. This is a good starting point and is the most common. It's also the most legible in many situations. However, this set amount is not essential to creating vertical rhythm. Adjust slightly as necessary, but be sure not to sway the line height too short or too long.
  3. Apply a line height to all other text on the page: paragraphs, lists, headings, etc. Your line height is like the height of each line on a piece of notebook paper. To calculate this line height: baseline (regular text) line height / font size. So, if one of our heading tags is at a height of 1.5em, then we would take our baseline height (1.125em) / current font size (1.5em), which would make us set our heading line height to 0.75em.
  4. Set the bottom margin of text elements. The bottom margin on elements that need it should be equal to their line height. This acts as an extra line that has not been used on our "notebook paper."

Below is an example of what we just did in CSS:

h1{
	font-size: 1.5em;
	line-height: .75em; // (1.125 / 1.5)
}
h2{
	font-size: 1.3em;
	line-height: .87em; // (1.125 / 1.3)
}
//("1.13" is our rounded "1.125")
p,ol,ul,pre,code{font-size: .75em; line-height: 1.13em;}

Pick a Font Family

The font style you choose may very much depend on the rest of the web design style. More contemporary websites will want sans-serif fonts, or blockier serif fonts. Web designs with a more traditional or rusty look will want serif fonts. As a designer, that portion is up to you. Don't necessarily over think it though. Decide between serif or sans-serif depending on 1) readability and 2) design style.

Then, use a tool like Typechart to browse font styles. Find a decent font stack to go with it from a post like this: 8 Definitive Web Font Stacks.

Type Chart

Also use a service like Font Squirrel and CSS3's @font-face to get a more unique font for headings or larger pieces of text.

Font Squirrel

Visual Hierarchy & Headings

Designing headings can be tricky as well. Hopefully, the issue of margins and spacing between headings has been made easier with the use of vertical rhythm above. Top margins may be what designers are more concerned with, as headings should have enough space from the content above it to be distinguished from it. Feel free to add a top margin, but adhere it to multiples of the line height to keep to baseline rhythm.

Headings

Otherwise, creating different font styles for headings can be relatively easy — not a whole lot of science to it, so feel free to be creative. Below are a few tips:

  • Contrasting colors stand out more, so use them for main section headings.
  • It's not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bolds.
  • The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simpler; closer to the base font style.

Choose Font Colors

Finding color for your text can also be tricky. Straight black text on a white background can be a little harsh so many designers find themselves experimenting with variations of darker grays. A charcoal gray seems to be the most common (#333333), however some websites like to go as light as (#666666). With dark backgrounds the same applies, only opposite. Backgrounds may not be necessarily straight black, and the lighter font color may not be straight white, but a light gray instead.

Contrast in color is important because it can either be too harsh, or too little for illegibility. Either follow trends to know what works best, or try reading a few paragraphs yourself to get a feel for the contrast. Is it enough? Should it be increased? Decreased?

Of course, not all pages are black and white. That was just a quick lesson in contrast. The same principles apply when using dark blue vs. light blue, or shades of beige and browns.

There's no set rule for choosing font colors either. Use instinct and read through the text yourself in order to determine if it's legible and visually appealing. Below are a few more things to keep in mind for other areas:

  • Don't be afraid to use variations in contrast! On many websites, the base font color may be a dark gray, yet certain areas of text may be a lighter gray, such as the meta info on a blog post. Using these variations can make for a much more interesting text visually, as well as help create hierarchy.
  • Use color for headings. It can help them stand out better, and in the right order. Brighter colors will gain more attention, contrasting colors will gain more attention, and the opposite of these will gain less attention. Use color wisely in headings to create the right effect. This may just take some experimentation, but don't overthink it.
  • Links should be colored, with similar contrast to the base text contrast. It's a standard for links to be a different color from the rest of the text, whether or not other styles are put into place to differentiate them, such as boldness. It can be considered a usability issue if not placed in a separate color. Use a color that compliments the design and branding of the site to help any links fit in to the design.

Conclusion

Web typography does not have to be hard, although it still is for many designers. For much of it, there can be a set standard and the use of mathematics can solve a lot of problems into perfection. Other choices do take more thought and design instinct, but that can come with experience. Many designers tend to use the same font styles in many of their designs, merely because their own unique designs mimic one another as well, and their font style can be shared across different projects. Feel free to re-use your own set of rules after a first few times of debating the smaller details. It can speed up this portion of web design dramatically, both from a design and coding perspective.
Feel free to share any further tips on creating great typography, and any methods you use to figure out how to implement great typography quickly and sure-proof.