CSS Text Styles

Font family

h1 {
  font-family: Roboto;
}

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

h1 {
  font-size: 2rem;
}

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 (line 16).

Font color

h1 {
  color: grey;
}

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

h1 {
  font-weight: bold;
}

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

h1 {
  font-style: italic;
}

Or:

h1 {
  font-style: oblique 69deg;
}

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

h1 {
  text-decoration: underline double;
}

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

h1 {
  text-transform: uppercase;
}

The text-transform property can have the values lowercase, uppercase and capitalize.

Line height

h1 {
  line-height: 1.5;
}

The value of line-height can be an integer or decimal number. Default value is 1.