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

Tracking

Tracking is the consistent degree of space between characters.

tracking

To adjust the amount of space between characters in CSS, use the letter-spacing: property.

CSS

* {
  letter-spacing: normal;
}

letter-spacing: accepts these term values:

normal (default, no extra spacing)
pixels (px)
points (pt)
percent (%)
ems (em)
…most other size terms, including negative values

As with line-height: , this property can be passed absolute values, and the word normal to use the default and relative values. When using relative values, please keep in mind that ems will be in relation to the font itself, and percentages will be in relation to the parent element.

“Why adjust letter spacing?”

It is sometimes useful to space characters out. However, this quality can often be used to achieve visual text effects for branding, delineating sections, or making a particular piece of content stand out.

NOTE: Negative values are valid and can be used to create a “tighter” presentation of text.