Font families are generally grouped into 5 categories: serif, sans-serif, monospace, fantasy, and cursive. Web-safe fonts are those font families that are installed on most computers and will generally be sure to render properly in your websites. The table shows several font families that are considered web-safe in each of the five categories. The data in the table comes from this website.
| Web-Safe Fonts | ||||
|---|---|---|---|---|
| Serif | Sans-Serif | Monospace | Fantasy | Cursive |
| Bodoni Poster | Helvetica | Andale Mono | Luminari | Brush Script |
| Linotype | Arial | Monaco | Trattatello | Bradley Hand |
| Didot | Segoe Ui | Lucida Console | Copperplate | |
| American Typewriter | Trebuchet MS | Courier New | Playbill | |
| Georgia | Verdana | Papyrus | ||
| Times New Roman | Century Gothic | |||
| EB Garamond | Tahoma | |||
| Rockwell | DejaVu Sans | |||
| Palatino | Calibri | |||
| Candara | ||||
| Lucida Sans Unicode | ||||
Once you've selected a typeface (font, font family) that you want to use, you need to assign it to the relevant text. You also need to tell the browser how to style the text for anything but the browser's default size and style. Styling can include setting the font's size, weight (such as bold) and applying italics. You can use the properties shown in the table to assign and style fonts.
| CSS for Assigning and Styling Fonts | |||
|---|---|---|---|
| Property | Description | Values | Example |
| font-family | Assigns a font family to the selected text. Best to use a font stack to ensure an appropriate look. | Comma-delimited list of typeface names (e.g. Arial, 'Courier New') or types (e.g. serif, sans-serif). | font-family: Verdana, Geneva, sans-serif; |
| font-size | Sets the font size of text. Font size value can be an absolute or relative size. Relative is preferred. | There are many different ways to assign size, including absolute values (small, pt), relative values (smaller, px, em, %) and more. | font-size: 1.5em; font-size: larger; font-size: 16px; |
| font-weight | Sets the weight (or boldness) of the text. | Values include numerical values from 1 to 1000, or the following keywords: normal (equal to 400), bold (equal to 700), bolder, and lighter. A font family may only support a subset of numerical values. | font-weight: bold; font-weight: 100; font-weight: lighter; |
| font-style | Used to produce italicized text. | Values include normal, italic, and oblique, which is a simulated italic font produced by slanting the characters of the regular font. | font-style: normal; font-style: italic; font-style: oblique 40deg; |
Using CSS, the spacing of characters, words, and lines can be adjusted to make text more readable and pleasing to the eye. The alignment of text relative to the page or html element can also be adjusted. Some of the relevant properties are described in the table.
| CSS for Assigning and Styling Fonts | |||
|---|---|---|---|
| Property | Description | Values | Example |
| letter-spacing | Sets the horizontal spacing between the individual characters in an element. | Length values in units including px, em, and rem. Positive values increase spacing, negative values decrease it. normal resets the spacing to the font default. | letter-spacing: normal; letter-spacing: .2em; |
| word-spacing | Sets the horizontal spacing between words in an element. | word-spacing: 1px; word-spacing: -.2em; |
|
| line-height | Sets the height of lines of text. The height includes the height of the font itself and any additional leading space. | A unitless number is the preferred value: the inherited line height is multiplied by it. Can also take length values (like letter-spacingand word-spacing) or percentages. normal resets the height to the browser default. | line-height: 1.5; line-height: .5em; line-height: normal; |
| text-align | Sets the horizontal alignemnt of inline text. | Values include left, right, center, and justify, among others. | text-align: left; text-align: justify; |
| vertical-align | Sets the vertical alignment of an element's box, or the content of a table cell, within its container. Cannot be used to vertically align block-level elements. | Values include top, bottom, and middle, among others. | vertical-align: top; vertical-align: middle; |