Font Properties
| Property | Possible Values | Description |
|---|---|---|
font-family | "Arial", "Verdana", sans-serif, serif, monospace | Defines the font type |
font-size | px, em, rem, %, vw | Sets the text size |
font-style | normal, italic, oblique | Defines the font style |
font-weight | normal, bold, lighter, bolder, 100-900 | Sets the font thickness |
font-variant | normal, small-caps | Displays text in small capital letters |
letter-spacing | normal, px, em | Controls space between characters |
word-spacing | normal, px, em | Adjusts space between words |
line-height | normal, px, %, em | Defines line spacing |
text-transform | none, uppercase, lowercase, capitalize | Changes text case |
text-decoration | none, underline, overline, line-through | Adds text effects |
font (shorthand) | Combines style, variant, weight, size/line-height, family | Example: font: italic small-caps bold 16px Arial, sans-serif; |
Explanation of Common Values
| Value Type | Description | Example |
px (pixels) | Fixed size, does not scale | font-size: 16px; |
% (percentage) | Relative to the parent element | font-size: 120%; |
em | Relative to the parent element’s font size | font-size: 1.2em; |
rem | Relative to the root element’s font size | font-size: 1rem; |
vw | Relative to viewport width | font-size: 5vw; |
Example:
p {
font-family: "Arial", sans-serif;
font-size: 18px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
text-transform: uppercase;
}✔ Uses Arial (fallback to sans-serif if unavailable)
✔ Font size: 18px
✔ Bold and italic text
✔ Line height: 1.5x the font size
✔ Text in uppercase