Typography

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
Indents (leaves empty space) 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
Set space between words.
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors