CSS 3: Typography

Introduction to Typography

We've learned in the previous Text section how to apply fonts and decorate them. Now let's talk about how to make the text visually appealing with typgraphy.

Typography is the art of choosing the right font and optimizing the style and appearance of text. Additionally, this subject also covers how to make your font convey the right message and set the right mood.

To achieve great typograhy, we have to consider the amount of space between lines and characters to make the text easy to navigate and read. Additionally, there should be a proper amount of white space surrounding your bodies of text so that your content doesn't seem too cluttered.

Legibility

Legibility is the the quality of text being clear enough to read. So what makes one typeface more legible than another? In order answer this question, we must look into the anatomy of type faces.

Type face anatomy

Firstly, let's go over some terms.

Ascender line

Line above above the cap height.

Cap Height

Top of flat letters (top of the T).

X-height

Height of letter x (same as height of an o in our figure).

Baseline

Line the letter sits on.

Descender line

Line below the baseline (bottom of g or y).

Common properties of legible fonts

Here is a list of what legible typography element have in common:

• Loose letter spacing
• Generous x-heights
• Similar cap heights
• Prominent ascenders and descenders
• Common counters
• Open bowls
• Open apertures
• Common serifs

And some properties of illegible fonts include the following:

• ALL CAPS.
• Font is so italicized that the spacing between letters get lost.
• If the font weight is too bold, the bowls start closing up.

Choosing the right font

There are plenty of great websites out there that offer thousands of fonts to choose from. For example, FontDeck allows you to browse through a myriad of fonts.

When choosing a font, make sure to check its italicized, bolded forms for readability. Additionally, vary the font size to check how it looks at smaller or larger fonts.

Choosing two fonts

When choosing two type faces to work together, make sure you have a good balance - neither should dominate the other.

Readability

Readability is how well your users can follow text. This includes spacings between line height and width.

Furthermore, to improve readability, we must properly plan out the flow of text by chunking related blocks.

Line width

Consider the length of a line. If a line length is too long, the user may end up moving his eyes too much, causing a very strenuous and tiring experience.

Paragraphs that are too narrow can be tiring as well, as it causes repeated breaks to the next line.

In an optimal setting, you should aim for around 50-70 characters (including spaces).

Line Height

Line height can also affect readability. If lines of text are too close to one another, it'll be difficult to read the text horizontally. An optimal size for the body line height is about 150% body font size. This means that your line-height should be around 1.5em.

Chunks

The layout of text should be intuitive for the user to navigate. When the user lands on your page, you want to guide his or her eyes in a certain pattern. Thus your page format should have a visual order with bold headings, images, line rules and chunks of text.

Related content should be grouped together, forming what are called "chunks." The smaller the space between them, the more they seem related. To see if chunking is working, zoom out of the page. Each chunk should be uniform, as users assume that chunks of text are related.

White Space

To give each chunk the proper amount of breathing room, we apply white space. Applying white space is an elegant way of framing content. It provides the user with better spacing.

Links

Links should be easily identifiable. If links look too alike normal text, the user may become confused. It's important to add something like a different color, or a font decoration (eg. underline).

Font size

The font-size property

To specify an element's font size, use the CSS font-size.

Remember from our Fundamentals of Length lesson that we can use pts, px, %, em, or vw.

Use pts and px if you want to be exact, and use %, em, or vw to have your font be relative to another element. Additionally, we can use vw and vh for the size to be relative to the user's viewport window.

Text size should almost never be specified in pixels. Rather, we should use a relative unit (eg. em), to ensure proper contrast. Remember the magic formula:

Type Scales

Type Scales are a set of ratio that was developed by European typographers in the 16th century. Rather than use font sizes that were all over the place, they decided to standardize specific sizes. Eventually they came up with a list of text sizes that were pleasing to the eye.

The 12 pixel scale

An example of this is the 12 pixel scale:

Font Spacing leading, kerning

Now let's take a look into the technicalities of line height and spacing.

Leading

Leading is the height of lines of an element. It is specified by the line-height property. This value is measured between the descender (lowest point) and the ascender (highest point). The value is relative to the normal font size, so a value of 2 would be 2 times the normal font size.

Note that the vertical space between lines should be larger than the space between each word; this helps the eye move along the line instead of down them.

It's often good practice to use em units so that the gap between lines is relative to the size of text the user has selected. 1.4 to 1.5em are good starting values.

Kerning

Kerning is the space between each letter. This is controlled by the letter-spacing property.

Make sure to increase kerning if text is all in uppercase. The gap between the words is controlled with the word-spacing property. Just like leading, it's good practice to use ems for your units.

Text Alignment

Horizontal Alignment

Vertical Alignment

To control where an inline-element should appear, we can use the vertical-align property. Some common inline-elements are:<img><em> or <strong>.

Here are a list of inline element options you can use:

baseline

Start at the baseline.

sub

Subscript.

super

Superscript.

top

Top of the element is aligned with top of tallest element on the line.

text-top

Top of element is aligned with top of parent element's font.

middle

Start at middle of parent's element.

bottom

Bottom of the element is aligned with the lowest element on the line.

text-bottom

Bottom of element is aligned with bottom of parent element's font.

Indentation

To control the indentation, we use the text-indent property. It's common to use pixels or ems for the units. If we want to pull back the line, we can use a negative value.

Color Scheme background color, contrast

Choosing the right Color Scheme

Choosing the right color scheme for your webpage is vital. The emotions that are evoked from the colors should match the content your text carried.

Of course, these are both subject to the reader, but you get the idea.

There are many websites such as Paletton that allow you to choose a color scheme for your website.

Background Colors

As we have seen in the Backgrounds section, background-color property sets the background color for that box. You can specify which color by predefined colors, RGB, hex value or HSL. The default color is transparent, meaning you can see through to the element behind it.