63 lines
3.7 KiB
HTML
63 lines
3.7 KiB
HTML
[!]
|
|
[=title "Week 12: Fonts"]
|
|
[=content-]
|
|
|
|
<!-- this is a google fonts embed code: -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|
|
|
<p>
|
|
We've already talked briefly in class about fonts - we're going to do a deeper dive today.
|
|
</p>
|
|
<p>
|
|
Fonts are one of the most crucial styles on the internet. All text has a font!
|
|
The most impactful CSS property controlling fonts is <code>font-family</code>: this
|
|
is a deceptive property which can set either a <i>family</i> of fonts or
|
|
a <i>single</i> font. A family of fonts is a set of fonts that look similar:
|
|
for instance, <code>sans-serif</code> fonts. On this website, the default is <code>font-family: sans-serif;</code>:
|
|
you're probably more familiar with the universal default of <code>font-family: serif;</code> (set automatically
|
|
when you don't have your own - your websites most likely still use it!), which looks like
|
|
<span style="font-family: serif;">this</span>. Also useful in some areas is <code>font-family: monospace;</code>,
|
|
which I use for code - it looks like <span style="font-family: monospace;">this</span>.
|
|
</p>
|
|
<p>
|
|
Surprisingly, these look different across systems! There is no one universal <code>sans-serif</code> 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.
|
|
</p>
|
|
<p>
|
|
If you want to use a single specific font to ensure the webpage looks the same everywhere,
|
|
you also use <code>font-family</code>! 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 <code>sans-serif</code> default. It looks like <span style="font-family: Arial;">this</span> (if that looks
|
|
the same as the rest of the text, that means your browser is already using it for <code>sans-serif</code>!)
|
|
</p>
|
|
<p>
|
|
W3Schools has an exhaustive list of CSS-safe web fonts at <a href="https://www.w3schools.com/cssref/css_websafe_fonts.php">this page</a>.
|
|
</p>
|
|
<p>
|
|
What if we want more variation? It turns out there are a few properties for this.
|
|
The simplest is <code>font-size</code>: 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 <code>em</code> unit:
|
|
<code>1em</code> is always the default height of text, so <code>2em</code> 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 <i>pixels</i>, but the height is always the same in <i>em</i>.
|
|
</p>
|
|
<p>
|
|
For instance, <span style="font-size: 2em;">this is 2em text</span>.
|
|
</p>
|
|
<p>
|
|
We can also set the <code>font-weight</code>: this is actually what the <code><b></code> tag changes.
|
|
<span style="font-weight: bold;">for instance, this text has <code>font-weight: bold;</code></span>.
|
|
</p>
|
|
<p>
|
|
It's possible to add new fonts not in the CSS-safe list! The easiest way is with <a href="https://fonts.google.com/">Google Fonts</a>.
|
|
They give you <i>embed codes</i> - a few HTML tags that load the font into your page. You can then use the font in <i>font-family</i>
|
|
normally. For instance, after embedding Roboto, you'd be able to just <code>font-family: Roboto;</code>, which looks like
|
|
<span style="font-family: Roboto;">this</span> (use the web inspector to find the Google Fonts embed code for that!)
|
|
</p>
|
|
[/]
|
|
[#template.html]
|