Typography

Published Aug 8, 2021Updated Sep 9, 2021
Contribute to Docs

Typography is the art of arranging text on a page. Some of the most important information a user will see on a web page will be textual.

Styling text to make page content accessible and engaging can significantly improve user experience.

Some of the things that typography can help with:

  • How to style and transform fonts.
  • How to lay text out on a page.
  • How to add external fonts to your web pages.

Typography

@font-face
Specifies a custom font to be used to display text.
font
Shorthand property that sets different properties for an element's font in a single declaration.
font-family
Specify the typeface in a rule set.
font-size
Sets the text size. Font size values can be in different units like absolute lengths and relative lengths.
font-style
To set the font style in which text will appear.
font-weight
To set the text to be thicker or thinner.
letter-spacing
Set the horizontal spacing between the individual characters in an element.
line-height
Set the vertical spacing between lines of text.
text-align
To set the text alignment of inline contents.
text-decoration
To add lines on the text.
text-indent
Leaves empty space on the first line in a text-block.
text-justify
Sets the justifcation method of text when text-align: justify; is applied to an element.
text-overflow
Specifies how hidden content is signaled to the user.
text-shadow
Adds shadow to text.
text-transform
Specifies how to capitalize an element's text.
word-spacing
Sets space between words.

All contributors

Looking to contribute?

Learn CSS on Codecademy