CSS Fonts, Decorating and Alignment

Topic Overview

Typography

Typography Typefaces Font Categories TODO

Using Fonts

The font-family Property Fallback Fonts and Stacks Making Font Choices TODO

Sizing

Setting Size Fixed Size Relative Size Using Sizes TODO

Adding Meaning

Setting Bold and Italic Font Weight Font Style Using Weights and Styles TODO

Decorating

Font Variant Text Transform Text Decoration TODO

Spacing

"Space: The Final Font-tier..." Leading Kerning Tracking Word Spacing TODO

Alignment

Horizontal Alignment Vertical Alignment Indentation TODO

Pseudos

Pseudo-Selectors Pseudo-Elements Pseudo-Classes Setting States TODO

Self-Hosted Fonts

Including Fonts Fonts Directory Fonts Stylesheet The @font-face Selector Family Source Other Properties The @font-face Rule TODO

Library-Hosted Fonts

Sourcing Fonts Navigating Google Fonts Option A - Downloading Fonts Option B - Standard Embeds Option C - @import Embeds TODO

Relative Size

Another approach (and the one often suggested) is to use relative-size measurements for font size instead of absolute sizes. These set the font size of an element as a ratio to the parent’s font size.

There are a few ways to accomplish this, but we will focus on two:

percent (%)
ems (em)

Both are relatively similar in how they work. A value of 100% or 1em will both leave the font size the same as the parent element. Likewise a value of 50% or 0.5em will reduce the font size by half.

NOTE: An em is described as being the width of the letter ‘m’. So 1em is the width of an ‘m’ in the specified font.