Typography
Learn all about CSS typography, such as how to include fonts from other sources and how to style your text.
Start
Key Concepts
Review core concepts you need to learn to master this subject
CSS font-weight Property
CSS font-style property
CSS @font-face rule
CSS Fallback Fonts
The CSS line-height property
CSS Linking fonts
CSS font-weight Property
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.
- 1In 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…
- 2If 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 …
- 3You’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…
- 4The 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…
- 5You 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…
- 6You 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; } Note that …
- 7You’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…
- 8Text 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…
- 9No 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…
- 10Another 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…
- 11We 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…
- 12You’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….
- 13What 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…
- 14With 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…
- 15When we have the link to the font and the styles of our choice, we can add the font to the section of the HTML document, using the tag and the href property. Let’s take a look at a few exampl…
- 16There 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…
- 17We 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…
- 18While 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Typography
Start