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. We’ll look at: * How to style and transform fonts. * How to lay text out on a page. * and how to add external font…
- 2You may remember from the Visual Rules lesson that the font of an element can be changed using the…
- 3In CSS, the font-weight property controls how bold or thin text appears. It can be specified with keywords or numerical values. #### Keyword Values The font-weight property can take any one of the…
- 4You 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…
- 5Text 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…
- 6You’ve learned how text can be defined by font family, weight, style, and transformations. Now you’ll learn about some ways text can be displayed or laid out within the element’s container. ##### …
- 8Online font services, like Google Fonts, make it easy to find and link to fonts from your site. You can browse and select fonts that match the style of your website. !…
- 9Fonts can also be added using a @font-face ruleset in your CSS stylesheet instead of using a element in your HTML document. As menti…
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