Key Concepts

Review core concepts you need to learn to master this subject

The CSS font-weight property

CSS font-style property

The CSS line-height property

CSS Fallback Fonts

CSS Linking fonts

CSS @font-face rule

The CSS font-weight property

/* Sets the text as bolder. */ p { font-weight: 700; }

The CSS font-weight property declares how thick or thin should be the characters of a text. Numerical values can be used with this property to set the thickness of the text. The numeric scale range of this property is from 100 to 900 and accepts only multiples of 100. The default value is normal while the default numerical value is 400. Any value less than 400 will have text appear lighter than the default while any numerical value greater than the 400 will appear bolder.

In the given example, all the <p> elements will appear in a bolder font.

CSS font-style property

/* Sets the text as bolder. */ p { font-weight: 700; }

The CSS font-style property determines the font style in which text will appear.

It accepts italic as a value to set the font style to italic.

The CSS line-height property

/* Sets the text as bolder. */ p { font-weight: 700; }

The CSS line-height property declares the vertical spacing between lines of text. It accepts both unitless numbers as a ratio (eg. 2) and numbers specified by unit as values (eg. 12px) but it does not accept negative numbers. A unitless number is an absolute value that will compute the line height as a ratio to the font size and a unit number can be any valid CSS unit (eg. pixels, percents, ems, rems, etc.). To set the line-height of the <p> elements to 10px, the given CSS declaration can be used.

CSS Fallback Fonts

/* Sets the text as bolder. */ p { font-weight: 700; }

The CSS font-family property can have multiple fonts declared in order of preference. In this case the fonts following the initial font are known as the fallback fonts.

If the initial value of the property font-family fails to load to the webpage, the fallback fonts will be used.

CSS Linking fonts

/* Sets the text as bolder. */ p { font-weight: 700; }

Linking fonts allow user to use web fonts in the document. They can be imported in an HTML document by using the <link> tag. Once the web font URL is placed within the href attribute, the imported font can then be used in CSS declaration.

CSS @font-face rule

/* Sets the text as bolder. */ p { font-weight: 700; }

The CSS @font-face rule allows external fonts or font files to be imported directly into stylesheets.The location of the font file must be specified in the CSS rule so that the files can be loaded from that location. This rule also allows locally hosted fonts to be added using a relative file path instead of a web URL.

CSS Typography
Lesson 1 of 1
  1. 1
    In this lesson, we’ll focus on typography, the art of arranging text on a page. In particular, we’ll look at how to style fonts with CSS to make them legible and appealing and how to add external…
  2. 2
    If you’ve ever used a formatted word processor, chances are that you probably also used a feature that allowed you change the “type of font” you were typing in. The phrase “type of font” refers to …
  3. 3
    You’ve probably noticed bold text in websites you use, especially in news or text-heavy sites. It’s common to bold important headings or keywords. In CSS, we can style bold text with the font-w…
  4. 4
    The font-weight property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Valid values are multiples of 100 within this range such as 200 or 500. When…
  5. 5
    You can also italicize text with the font-style property. h3 { font-style: italic; } The italic value causes text to appear in italics. The font-style property also has a normal value which is…
  6. 6
    You can also increase the spacing between words in a body of text, technically known as word spacing. To do so, you can use the word-spacing property: h1 { word-spacing: 0.3em; } The defaul…
  7. 7
    You’ve learned how to increase the spacing between lines of text and words, but it’s possible to get even more detailed: increasing the spacing between individual letters. The technical term for a…
  8. 8
    Text can also be styled to appear in either all uppercase or lowercase with the text-transform property. h1 { text-transform: uppercase; } The code in the example above formats all elements…
  9. 9
    No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser. To move, or align, text, we can use the text-align property. h1…
  10. 10
    Another property that we can set for text is line-height. This property modifies the leading of text. The diagram to the right helps illustrate exactly what the terms “leading” and “line heigh…
  11. 11
    We often modify line-height to make text on a web page easier to read. When text is styled to appear larger, the vertical spacing between lines of text can decrease, creating text that is difficult…
  12. 12
    You’ve learned a lot of properties to modify text on a web page! In the next exercise, you’ll set some text to be serif and some text to be sans-serif. What exactly do these words mean? 1….
  13. 13
    What happens when a stylesheet requires a font that is not installed on a user’s computer? Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times…
  14. 14
    With the number of fonts available with modern typography, it is unrealistic to expect users to have all fonts installed on their computers. New fonts are often centralized in directories made avai…
  15. 15
    When we have the link to the font of our choice, we can add the font to the section of the HTML document, using the tag and the href. Let’s take a look at a few examples: 1. A single linked…
  16. 16
    There are other ways to link non-user fonts that don’t require the use of the tag in the HTML document. CSS offers a way to import fonts directly into stylesheets with the @font-face property. T…
  17. 17
    We can then use the fonts in the stylesheets as you would use any other font. Let’s practice loading an external font in our stylesheets using the @font-face property, and using the font to style o…
  18. 18
    While Google Fonts and other resources can broaden font selection, you may wish to use an entirely different font or abstain from using a font from an external service. We can modify our @font-fa…
  19. 19
    Great job! You learned how to style an important aspect of the user experience, typography. Let’s review what you’ve learned so far: Typography is the art of arranging text on a page. Tex…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo