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: Adds a line beneath, over, or through the text.
text-indent: Leaves empty space on the first line in a text-block.
text-justify: Sets the justification 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

christian.dinh
Anonymous contributor

Contribute to Docs

Learn more about how to get involved.
Edit this page on GitHub to fix an error or make an improvement.
Submit feedback to let us know how we can improve Docs.

Learn CSS on Codecademy