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

Font Weight

Within CSS, font weight and the font-weight property (in its most basic use) specifies whether a font is “normal” or “bold”.

Bold is the weight you are familiar with: setting this in CSS should cause the text to look the same as if would if you used the <b>...</b> tags in HTML. In addition to the bold font weight, depending on the font-family superclass, it is possible to also specify varying weights thus:

font-weight: accepts these term values:

lighter
normal
bold
bolder

font-weight: accepts these number values:

100
200
… through 900

NOTE: Using anything beyond bold or bolder will usually require different styles of that font from the server. See the end of this subtopic for more.