Typography

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-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.
font
Shorthand property that sets different properties for an element's font in a single declaration.
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.
Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy