CSS Text Styles
Download (.odt) Download (Markdown)Font family
[hook]The font-family property can have sans-serif, serif, cursive, monospace (typewriter-like characters, all with the same width) or the name of a specific font family (e.g. Roboto, "Open Sans", "Happy Monkey", Nunito, Poppins) as values.
Font size
[hook]The value of font-size property can be provided in the following units: px (pixel), em (related to the nearest parent element with a custom font size) or rem (root em, related to the font size of root - html - element, equals to 16px if not provided).
The best practice is to provide root font size in px and other custom font sizes in rem. See the global styles of this website (lines 27 and 80).
Font color
[hook]The color (not font-color!) property can be provided with the English name (black, grey, green, yellow etc.), RGB/RGBA code (e.g. rgb(0, 255, 0) or rgba(0, 255, 0, 0.7)), HEX code (e.g. #00ff00 or #00ff0011) or HSL/HSLA code (e.g. hsl(120, 255, 255) or hsla(120, 255, 255, 0.7)) of a color.
Font weight
[hook]The font-weight property can be provided with bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 values.
Note: font families from external sources (e.g. Brick) have to be imported in multiple different font weights, otherwise the font-weight property will have no effect. E.g. if you want to use a font family with 300 and 600 weight you have to import both versions.
Italic fonts
[hook]Or:
The font-style property can have the values normal (default), italic and oblique + number of degrees between -90 and 90 (if the number is positive text will be slanted to right, if negative it will be slanted to left).
Underline, overline, line-through
[hook]The text-decoration property can have one or two values. The first one can be none (default), underline, overline or line-through. The second one (line type, optional) can be solid (default), double, dotted, dashed or wavy.
Uppercase/lowercase transformations
[hook]The text-transform property can have the values lowercase, uppercase and capitalize.
Line height
The value of line-height can be an integer or decimal number. Default value is 1.