Let’s play around with CSS text/fonts!

Font Family

font-family lets you choose a list of the type of fonts to use. Using a comma separated list allows you to set fallback fonts. If a specific font is not found, other fonts can be used as a backup instead.

The first font in the list is used first. If that font could not be found on the browser, the second font is used etc…

Here is a list of random font families to play around with.

Color

Simply, color sets the color of the text.

Color

.text { color: #194d33; }

Font Size

font-size set the size of the font. Many different length types can be used here like px, em, and vw. I have another playground called CSS Length Types which interactively describes all of the widely supported CSS length types.

Font Size

.text { font-size: 0px; }

Font Style

font-style determines whether the font is displayed italic, oblique (slanted) or normally.

Font Style

.text { font-style: normal; }

Font Weight

font-weight specifies the weight (or boldness) of the font. Depending on your font-family, only a few variations of the font weight may actually exist. Many of the predefined font families in this playground have around 2 different font weight types.

Keywords can be used here:

normal
A normal font weight. A numeric font weight of 400.

bold
A bold font weight. A numeric font weight of 700.

lighter
One font weight lighter than the parent element (among the available weights of the font).

bolder
One font weight heavier than the parent element (among the available weights of the font).

Font Weight

.text { font-weight: normal; }

A numeric font weight can be used to indicate how heavy (or bold) the font is.

Font Weight

.text { font-weight: 0 }

Text Transform

text-transform specifies whether the text is capitalized, all lowercase, all uppercase or none.

Text Transform

.text { text-transform: none; }

Text Shadow

text-shadow will apply a shadow behind your text. You can use a 4 value syntax in the order of offset-x, offset-y, blur radius and color.

Text Shadow

.text { text-shadow: 2px 2px 2px #194d33; }

Text Decoration

text-decoration is used to apply line decorations to text. text-decoration requires a position, style and color in that order.

Text Decoration

.text { text-decoration: underline solid #194d33; }

Conclusion

Thanks for reading! If you found this useful, feel free to share it with others.