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 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).
- Height of letter x (same as height of an o in our figure).
- 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 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.
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 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.
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.
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 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).
The font-size property
To specify an element's font size, use the CSS
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:context / default = result
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 is the height of lines of an element.
It is specified by the
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 is the space between each letter.
This is controlled by the
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-align property allows you to align text.
The values can be
This is a paragraph that is aligned right. See how the text aligns to the right side of the containing element?
This is a paragraph that is aligned left. Notice that the text aligns to the left side of the containing element.
To control where an inline-element should appear, we can use the
vertical-align property. Some common inline-elements are:
Here are a list of inline element options you can use:
- Start at the baseline.
- Top of the element is aligned with top of tallest element on the line.
- Top of element is aligned with top of parent element's font.
- Start at middle of parent's element.
- Bottom of the element is aligned with the lowest element on the line.
- Bottom of element is aligned with bottom of parent element's font.
To control the indentation, we use the
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.
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.
Once you've chosen a background, make sure the text is still readable to the user. Text is harder to read when there is low contrast between the background and foreground colors.