Key Concepts
Review core concepts you need to learn to master this subject
The CSS font-weight property
CSS font-style property
CSS @font-face rule
CSS Fallback Fonts
The CSS line-height property
The CSS font-weight property
The CSS font-weight property
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
CSS font-style property
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.
CSS @font-face rule
CSS @font-face rule
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 Fallback Fonts
CSS Fallback Fonts
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.
The CSS line-height property
The CSS line-height property
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.
- 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; } The defaul…
- 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 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…
- 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…
- 19Great 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
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory