There are plenty more typography-related CSS styles beyond font-family and font-size. In this video, look at a some commonly used CSS properties.
- [Instructor] So far, we've talked about font family and font size, but there are actually more font properties. Font families often include different typefaces with varying amounts of thickness, called font-weight. The values for font-weight can be defined with numbers ranging from 100 to 900. 100 is the lightest or thinnest of the fonts, and 900 is the darkest or thickest. Most font families don't come with different typefaces specified for all nine weights. If that's the case, if a weight is specified in the CSS that does not have a corresponding typeface, it will map to the nearest weight available.
Keywords can also be used and are mapped to the font-weight numbers. Normal is the default for body text, and it's equal to 400. Bold is the default for headings, and it's equal to 700. There are two more keywords, bolder and lighter. These values are relative to the inherited font-weight. And here's a table to show how lighter and bolder map to its inherited value. Font-style is a property that can be used to add or remove an italic style. There are three values: italic, oblique, and normal.
Italic fonts tend to appear slightly more cursive, while oblique faces are generally just sloped versions of the regular face, though the differences tend to be small. The normal value removes an italic or oblique style. If you choose a font family that does not have a specific italic or oblique typeface, the browser will simulate it by sloping the regular font face glyph. There are a lot more font CSS properties, but in this course we're focusing more on the commonly used properties to get you up and running with CSS.
If you'd like to view some of the more advanced, less commonly used font properties, check out the Mozilla developer network reference, which is categorized into related CSS properties.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property