[!] [=title "Week 12: Fonts"] [=content-]

We've already talked briefly in class about fonts - we're going to do a deeper dive today.

Fonts are one of the most crucial styles on the internet. All text has a font! The most impactful CSS property controlling fonts is `font-family`: this is a deceptive property which can set either a family of fonts or a single font. A family of fonts is a set of fonts that look similar: for instance, `sans-serif` fonts. On this website, the default is `font-family: sans-serif;`: you're probably more familiar with the universal default of `font-family: serif;` (set automatically when you don't have your own - your websites most likely still use it!), which looks like this. Also useful in some areas is `font-family: monospace;`, which I use for code - it looks like this.

Surprisingly, these look different across systems! There is no one universal `sans-serif` font; instead, your operating system and your web browser pick something reasonable. This is generally fine, and indeed helps compatibility (you don't have to guess which fonts are installed!), but does mean pages look slightly different across platforms.

If you want to use a single specific font to ensure the webpage looks the same everywhere, you also use `font-family`! Instead of one of the actual families (sans-serif, serif, monospace, etc), you use a font's name. For instance, a common font available on the web is Arial - Arial is often the `sans-serif` default. It looks like this (if that looks the same as the rest of the text, that means your browser is already using it for `sans-serif`!)

W3Schools has an exhaustive list of CSS-safe web fonts at this page.

What if we want more variation? It turns out there are a few properties for this. The simplest is `font-size`: this sets the height of the characters in text. You can set a font-size to any CSS length, but it's recommended to use specifically the `em` unit: `1em` is always the default height of text, so `2em` is twice as large as default text, etc. Importantly this is always the same on every platform: some browsers have different default heights for text in pixels, but the height is always the same in em.

For instance, this is 2em text.

We can also set the `font-weight`: this is actually what the `<b>` tag changes. for instance, this text has `font-weight: bold;`.

It's possible to add new fonts not in the CSS-safe list! The easiest way is with Google Fonts. They give you embed codes - a few HTML tags that load the font into your page. You can then use the font in font-family normally. For instance, after embedding Roboto, you'd be able to just `font-family: Roboto;`, which looks like this (use the web inspector to find the Google Fonts embed code for that!)

[/] [#template.html]