Font

Topics

1. How would you implement a web design comp that uses non-standard fonts?

2. Why shouldn’t I use fixed sized fonts

3. Font size (px, %, em, rem)

4. Which font names are available on all platforms?

How would you implement a web design comp that uses non-standard fonts?

Say you were tasked with coding a design that used non-standard web fonts, how would you go about it?

A non-leading way to get them to talk about @font-face and how it works. Talking about how it works as a core CSS technology is great, as well as talking about services that provide the fonts and can make it easier e.g. Google Fonts, Typekit, Font Deck, Cloud Typography, etc.

Bonus points for obscure knowledge like the history of @font-face syntax or Firefox's issue with cross-origin fonts.

Why shouldn’t I use fixed sized fonts

Font size (px, %, em, rem)

While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size. I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.

https://codemyviews.com/blog/whats-the-deal-with-em-and-rem

html {
  font-size: 17px;
}

@media (max-width: 900px) {
  html { font-size: 15px; }
}

@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Type will scale with document */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}

Which font names are available on all platforms?

Only five basic font families( serif, sans-serif, cursive, fantasy, and monsospace) are recognized across platforms, rather than specific fonts.

Specific font name recognitions will vary by browser.