Chuck's Academy

Basic CSS

Home / Topic / Basic CSS / Typography in CSS

Typography in CSS

Typography is a fundamental part of web design. Through CSS, we can control how text is displayed on our web pages, improving both its appearance and readability. In this chapter, we will learn how to use CSS properties to customize typography.

font-family Property

The font-family property allows us to change the font used in an element. You can specify a list of fonts, where the browser will use the first one available on the user's system.

css
"Here we are applying the Arial font to the body of the page. If Arial is not available, the browser will use any sans-serif font installed on the user's system."

It's a good practice to provide more than one font, as not all systems have the same fonts installed. For instance, you can include a generic font like serif or sans-serif at the end of the list as a fallback.

Here are examples of the serif font familyHere are examples of the serif font family

font-size Property

The font-size property sets the size of the text. You can use different units to define the size:

  • Pixels (px): Absolute units that do not depend on the screen size.
  • Em (em): Relative units based on the font size of the parent element.
  • Rem (rem): Relative units based on the root font size (usually the font size of the html).
  • Percentages (%): Units relative to the font size of the parent element.
css
"In this example, the h1 title will have a font size of 32 pixels. For the paragraphs, we use the em unit, meaning that the text will be 1.2 times the font size of the parent element."

This image shows a text comparison with different font sizes using px, em, and remThis image shows a text comparison with different font sizes using px, em, and rem

font-weight Property

The font-weight property controls the thickness of the text. It can take values like normal, bold, or numeric values between 100 and 900 for finer control.

css
"In this case, the h2 title will be displayed in bold, while the paragraph will have a lighter font weight, with a value of 300."

font-style Property

The font-style property allows you to define whether the text should be normal or slanted. The most common values are normal, italic, and oblique.

css
"Here, we use the font-style property to apply an italic text style to block quotations, blockquote."

This image shows an example of text in normal, italic, and oblique stylesThis image shows an example of text in normal, italic, and oblique styles

line-height Property

The line-height property defines the vertical space between lines of text. A higher value increases the line spacing, which can improve readability in long texts.

css
"In this example, we are increasing the line height to 1.6 times the font size to improve readability in paragraphs."

text-align Property

The text-align property controls the alignment of text within a container. Common values include:

  • left: Aligns text to the left.
  • right: Aligns text to the right.
  • center: Centers the text.
  • justify: Justifies the text, making the lines have the same width.
css
"Here, the h1 title will be centered, while the paragraphs will be justified, meaning the lines will have the same width across the container."

text-transform Property

The text-transform property allows you to change the capitalization of the text. The most common values are:

  • uppercase: Converts text to uppercase.
  • lowercase: Converts text to lowercase.
  • capitalize: Converts the first letter of each word to uppercase.
css
"This example shows how to apply the uppercase transformation, converting all the text in h2 titles to uppercase."

text-decoration Property

The text-decoration property is used to add or remove text decorations, such as underlines or strikethroughs. The most common values are:

  • underline: Underlines the text.
  • line-through: Strikesthrough the text.
  • none: Removes any decoration.
css
"Here, we are removing the default underline from links with the text-decoration: none property."

letter-spacing and word-spacing Properties

The letter-spacing property controls the space between letters in a text, while word-spacing controls the space between words.

css
"In this example, we have increased the letter spacing by 2 pixels for h1 titles and increased the word spacing by 5 pixels for paragraphs."

This image shows word-spacing and letter-spacingThis image shows word-spacing and letter-spacing

Web Fonts and Google Fonts

To ensure that your page has access to a wider variety of fonts, you can use web fonts, such as those offered by Google Fonts. These fonts are loaded from the internet, so they do not depend on fonts installed on the user's system.

How to Use Google Fonts

  1. Visit Google Fonts and select the font you want to use.

  2. Copy the provided link and insert it into your HTML document within the <head> tag.

    html
    "This code links the Roboto font from Google Fonts in our HTML document."

  3. Then, apply the font in your CSS:

    css
    "With this rule, we are applying the Roboto font to the body of the page."

Examples of Google Fonts are shownExamples of Google Fonts are shown

Conclusion

In this chapter, we have learned to use CSS properties to control typography and improve text readability on a web page. Now we know how to change fonts, sizes, styles, and text alignments. In the next chapter, we will delve into how to create page layouts using CSS positioning techniques.

Back to previous chapter
Mark as read and continue
Ask me anything