Fonts!
by alifeee
- Why I love fonts
- Design is fun
- Individuality is fun
- Using Fonts
- On the web
- Thoughts on Google Fonts
- NOT using fonts
- Making fonts!
- Design
- Practically
Design is fun
A History of Typefaces
A History of Typefaces
A History of Typefaces
A History of Typefaces
A History of Typefaces
How many fonts do you encounter in a day?
How about in a minute?
How many did you find?
Is it more than you expect?
How different are they?
How many do you think you see in a day?
Individuality is fun
Using Fonts
Personal fonts have a great home on personal websites or anywhere you can put CSS!
@font-face {
font-family: "BogFace";
src: url("./bogface/BogFace.woff") format("woff");
}
.font--bogface {
font-family: "BogFace", sans-serif;
}
<span class="font--bogface">simple BogFace!</span>
See Zach Leatherman's Comprehensive Webfonts & Font Checklist for more.
Using personal fonts on the web
Google Fonts usage
#!/bin/bash
# has_google_fonts.sh
if grep -q "fonts.googleapis.com" $1; then
echo 1;
else
echo 0;
fi
find ./sites/ -exec ./has_google_fonts.sh {} \;
| awk '{sum += $0; tot += 1} END {print sum "/" tot}'
| Site | Fraction | |
|---|---|---|
| Personal | 20/101 | ██░░░░░░░░░░ |
| Top 50 | 5/41 | █░░░░░░░░░░░ |
Caveat: does not show self-hosted fonts
Google Fonts
- Quick
- Compatibility¹
- Licenced
- cons mitigated if you self-host font
- Privacy & Tracking
- Collection of IP, URL, & Headers¹
- GDPR legal issues²
- More servers involved
- Slower
- Offline development
Google Fonts
- Quick
- Compatibility¹
- Licenced
- cons mitigated if you self-host font
- Privacy & Tracking
- Collection of IP, URL, & Headers¹
- GDPR legal issues²
- More servers involved
- Slower
- Offline development
Not using a font at all
page load speed, permacomputing & carbon footprint
Stop Using Custom Web Fonts , Bradley Taunt
System Fonts Look Good
"Think of the Consistency!"
Loss of Personality
Hurting Performance & Wasting Resources
In defense of user-defined web fonts , Theodore Keloglou
it makes me happy that (i) my blog platform is insanely fast and (ii) I let my users choose their own fonts.
OFF the web
"Boggy websites"
Computers are customisable!
"Boggy websites"
Part 1: Unstyled websites
"Boggy websites"
Part 1a: Unstylable websites
"Boggy websites"
Part 2: Missing fonts or styles
You should make a font!
You should make a font!
Only 4 of 105 sites mentioned making fonts
Bonus mention: https://blinry.org/anki-fonts/
How to design a font
Font design can be a Trap, but I find it a rather pleasant one.
How to make a font
https://fontforge.org/docs/tutorial.html
How to make letter forms
- Digitally drawing them
- Modifying them
- Tracing them
Let's make a font!
- Sketch some letter forms!
- Try starting with "o" and "n"!
- Draw some more letters, like "adhesion" or "videospan"!
- Digitize them!
- Do you want to digitally draw letters, or trace them?
- What sort of "vibe" might you be going for?
- Do you want to have upper- and lowercase letters? Numbers? Symbols? It's ok just to have a subset.
