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!)