Serif and Sans Serif Typefaces
- Serif typefaces - small decorative lines;
- Sans serif typefaces - no decorative lines;
Script and Decorative Typefaces
- Script typefaces - hand-lettered look;
- Decorative typefaces - distinct and ornamental
Monospace Typefaces
- Each character uses the same amount of horizontal space
body {
font-family: 'Helvetic Neue';
}
Font stack for fallback:
h2 {
font-family: 'Helvetica Neue', Arial, san-serif;
}
internal font source (downloaded file)
@font-face {
font-family: 'Museo Sans';
src; url(museo-sans.ttf);
}
body {
font-family: 'Museo Sans', Arial, sans-serif;
}
external font source (e.g. Google fonts)
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
font-family: 'Indie Flower', cursive;
Font Size: px, em, and rem
absolute value use whole number avoid decimal browser default: 16px
relative unit 1em = iherited font-size if no font-size declared, 1em = default = 16px
similar to "em" relative unit, only to the root element (HTML), straightforward approach if no font-size declared, 1rem = 1em = default = 16px
font-weigth: 100, 200, 300, to 900 (thin to thick)
normal = 400; bold = 700;
italic, norm, oblique
line-height
line-height should always > font-size
relative value: 1.5, 150%
text-transform
value: capitalize; uppercase, lowercase, none;
text-align
center