CSS Type Styles

Steven Lee | Interaction Foundations | Sept 11, 2019

There are many different styling methods in CSS. The following are a few of the basic type styling options in CSS.

Font Weight

font-weight: normal

This is the normal font weigth which is also equivalent to 400.

font-weight: bold

This is the bold font weigth which is also equivalent to 700.

font-weight: lighter

This is the lighter font weigth which is roughly equivalent to 300.

Font Style

font-style: normal

This sentence has the font style - normal.

font-style: italic

This sentence has the font style - italic.

font-style: oblique

This sentence has the font style - oblique.

Letter Spacing

letter-spacing: normal

This sentence has normal letter spacing.

letter-spacing: 3px

This sentence has letter spacing set at 3.

letter-spacing: -1px

This sentence has letter spacing set at -1.

Text Transform

text-transform: none

This sentence has no text transformation.

text-transform: uppercase

This sentence has the text transformation of uppercase.

text-transform: lowercase

This sentence has the text transformation of lowercase.

Text Decoration

text-decoration: underline

This sentence has an underline.

text-decoration: overline

This sentence has an overline.

text-decoration: line-through

This sentence has a line-through.