Box model
diagram
border
padding
margin
vertical collapsing (horizontal -> floats)
width, height
max-width, max-height,
min-width, min-height
text-align
Block vs. Inline properties
text-align vs margin: auto
content vs. container
position
static - normal document flow
relative - offset from normal document flow; not removed
absolute - removed from normal document flow; rest of document re-flows
fixed - removed from normal document flow; positioned with respect to window, not page
left, right, top, bottom - position with respect to window/page
z-index - "layer"
Web Typography
about text
anatomy
ascenders
descenders
serifs
x-height
height
cap height
baseline
leading/line height
ems
em-calculation
points
pixels
relative keywords
font vs. typeface/family
variants & weights (fonts)
all caps
small caps
hanging stuff
direction
characters
dashes
em dash
en dash
hyphen
minus sign
spaces
em space
en space
hair space
thin space
non-breaking space
fractions
mathematical symbols
arrows
ellipsis
angle quotes
curly quotes, apostrophes, and primes
symbols & marks
warning: character encodings
vertical-align
top
bottom
text-top
text-bottom
baseline
line-height
text-indent
never indent and space between paragraphs
text-decoration, text-transform, font-variant
word-spacing, letter-spacing
text-outline, text-shadow, opacity (CSS3)
base web fonts
loading a web font from a service
@font-face
web type providers
advanced font-weight
measure & leading
hyphenation
justification
rivers
best practices
- set base font size in px (pt for print)
- express all other sizes relative to the base, so they scale properly when base is adjusted
- line-height calculations
- line-length calculations
- letter spacing and kerning
- tighten for all-caps abbreviations
- paragraph spacing vs. first-line indentation
- paragraph spacing = line-height * .75
- don't indent first para
- underline vs. border-bottom
- small caps
- use border-bottom to underline links