Learn CSS 2.4: Typography

Last Time

Last time we learned:

Many ways to size an element in CSS
The background-color property

Now we'll see how to work with fonts.

Starting anew, once again!

This time we'll be dealing with an <h1> element. Start with this:

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<style>
</style>
</head>
<body>
<h1>Some beautiful text</h1>
</body>
</html>

px, pt, em, rem, ex, ch

Pixels, points, ems, rems, and most other units (the units previously discussed) work pretty much the same for fonts. 1px is one pixel, 1pt is 1/72 inch, 1em is one times the previous font size, and 1rem is one times the font size of <html>.

To set the size of one rem, add this to <style>:

html {
    font-size: 12pt;
}

%, vw, vh, vmin, vmax

For fonts, there are more ways to resize the text. As an alternative to ems, you can size text in percent:

h1 {
    font-size: 200%;
}

100% is equal to 1em, so 200% is equal to 2em or 2x the font size, which in this case is 24pt.

You can also use VW and VH (stands for viewport width/height) to specifically refer to the width or height of the screen when sizing text. Example: for text that is 3% of the screen width:

h1 {
    font-size: 3vw;
}

Or 3% of the screen height:

h1 {
    font-size: 3vh;
}

You can also size an element in terms of percent of its larger or smaller dimension, using vmax units for percent of the larger dimension and vmin units for percent of the smaller dimension.

All of these percentage units are useful for text that changes its size between mobile and desktop screens.

Fonts!

Now fonts are where it can get complicated. We talked about fonts in Learn HTML 1.4 previously.

Fonts are added using the font-family property:

h1 {
    font-size: 1rem;
    font-family: sans-serif;
}

CSS has five built-in font types, which browsers assign to different fonts installed on the system. These are serif (Times New Roman), sans-serif (Arial), monospace (Courier New), cursive (Comic Sans), and fantasy (Impact). For most purposes you will want to use sans-serif.

In addition to those, you can also use any font that will be installed on the system viewing the item. Be careful, because not everyone has the same fonts!

h1 {
    font-size: 1rem;
    font-family: "Segoe UI";
}

If you really want to use a certain font badly, you can add it to your page. For now, I won't talk about how to do so. Instead, I recommend using Google Fonts for beginners as it can generate simple embed links for a selection of fonts. This way, you can ensure that the font will be available on almost all systems that access your site, not just those that happen to have your font.

Even then, it's generally recommended to have a fallback font which is one of CSS's built-in font types. You can do that by adding a comma after your preferred font, then add your fallback font. For example: font-family: "Segoe UI", sans-serif;.

Addendum: Text Alignment

h1 {
    font-size: 1rem;
    font-family: "Segoe UI";
    text-align: center;
}

The CSS text-align property is useful to properly align text to the "left", "right", or "center". You can also use "justify" to space the text so that every line is the same width; this makes text less readable so I recommend NOT using it.

Next article, on CSS classes