Typographic hierarchy

MMP 350 > Week 3

Typographic hierarchy helps the client or user understand how the information on the page is organized, what the most important information is and how to read the page.

The following example of a post has no typographic rules applied.

It's not easy to see which part is the post and which part is the by line, is it?

Let's try adding some rules to make it easier to read.

I didn't have to change much, I just applied a couple of rules and now it's easy to separate the content.

A few more rules makes it easier to separate each part of the content.

These examples touch on a few of the basic ways we can adjust the typography of a web page: font-size, color and font-style.

There are many more ways to adjust the text, some more noticeable than others. Let's review some of them.

Font size and line height

You have probably worked with font-size before, so I won't spend to much time here, but line-height is related to font-size and is very important for legibility.

In CSS, the different betwee line-height and font-size is split between the top and bottom of a line.

line-height: 1;

Letter spacing

letter-spacing is what it sounds like, the space between letters. In traditional typography, letter spacing is known as tracking. However, it is not kerning which is a more specific application of spacing between different types of letters.

letter-spacing: 1px;

Word spacing

word-spacing is also what it sounds like, the space between letters.

word-spacing: normal;

Font weight

font-weight is the thickness of the characters in the text.

There are some descriptive values for font-weight like lighter, bold, and normal.

It can also be described numerically on a scale from 100 to 900 with 400 being regular.

font-weight: normal;

Legibility

Text is typically used in a few different contents on the web.

Display describes text used for headlines. These tend to be larger and shorter than other parts of the text.

Text refers to longer passages of text like paragraphs, posts or the body of a text.

Links usually have a different font treatment to indicate that they are interactive.

Serif fonts are typically used for text on a page. Serifs are the added strokes at the ends of the main strokes in a character. Sometimes they're referred to as feet.

Serifs help make text more legible by guiding the eye through the individual letters of a word.

Sans-serif are more appropriate for display fonts.

However, as more reading is done on the web, which supports lots of fonts, sans-serif fonts are more common for text bodies.

Font pairing

For the assignment this week we will focus on font pairing. This is basically what it sounds like, choosing two font that work together for different parts of a website.

We'll choose one font for the main text of the user posts in our application and a second font for the post information.

When choosing two fonts, there's a few ways to approach the relationship between them.

In most cases, we will choose fonts that are harmonious, or look similar.

For something a little more noticeable, choose fonts that have some contrast.

For a bolder style, choose fonts that have obvious conflict.

Google Fonts

We're going to use Google Fonts as a starting point for creating a typographic hierarchy.

To use a font on your website, choose a font by clicking "Select this font" and then open the window that appears, go to the "Embed" section and copy the @import CSS rule to your CSS style sheet. You don't need the style tags.

You can also copy the generated style rule to use in the stylesheet.

You can try pairing fonts directly in Google Fonts before choosing to add them.

Resources

• Typographic hierarchy
• Web typography
• Readability & Legibility
• Pairing fonts
• Responsive typography
• Fluid type
• Viewport sized typography