CSS Fonts¶
fonts are a big and complex topic
to set a font in CSS, use the font-family property, e.g. this sets the
font for all paragraphs to be arial:
p {
font-family: arial;
}
fonts have many properties, including: color, background-color
Web Safe Fonts¶
not all fonts are available on all web browsers
so you need to be careful which fonts you want to use on your web page
a few fonts are considered “web safe”, which means they are usually available in all web browsers
| Name | Type | Notes |
|---|---|---|
| Arial | sans-serif | |
| Courier New | monospace | all characters have the same width |
| Georgia | serif | |
| Times New Roman | serif | |
| Trebuchet MS | sans-serif | may not be as widely available as other fonts on this list |
| Verdana | sans-serif |
Default Fonts¶
CSS defines a few generic fonts that web browsers can display with different particular fonts
| Name | Notes |
|---|---|
| serif | serifs are the small flourishes at the end of the letters |
| sans-serif | fonts without serifs; often good for titles/headers |
| monospace | all characters are the same width; good for code listings |
| cursive | similar to hand-writing |
| fantasy | decorative fonts |
Font Stacks¶
since you don’t know for certain what fonts a user’s web browser will have, you can provide a list of different fonts to try, e.g.:
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
Font Sizes¶
the most common units for font sizes are px (an absolute unit) and em
(a relative unit)
em units are often the preferred way to specify sizes, although they can
result in some tricky arithmetic for setting precise font sizes
the font-size property is inherited, i.e. the font-size of a child
element will, by default, be the same as it’s parent’s font-size
Some Other Font Properties¶
font-style property: normal, oblique (slanted version of normal
text), italic (italic version of the normal font; defaults to oblique
is there is no italic version)
font-weight property sets how bold the font is: normal, bold,
lighter, bolder, or a numeric value from "100" to "900"
text-transform property: none, uppercase, lowercase,
capitalize, full-width (makes the text monospaced)
text-decoration property: none, underline, overline,
line-through
text-shadow property: gives text a shadow (see a CSS reference for the details
of the values)
there are many other font styles you can browse in a CSS reference
Text Layout¶
text-align property: left, right, center, justify
line-height property: height of text lines
letter-spacing property: space between individual letters
word-spacing property: space between individual words
there are many other text layout styles you can browse in a CSS reference