Using typography is a design feature that can set the tone for your page. In this video, look at how to use different typefaces and web-safe fonts.
- [Instructor] Typography is the study of the design and use of type as a way to engage and communicate with your readers. Typeface is commonly referred to as a font or font family, but it's actually a set of fonts designed with common characteristics composed of glyphs. Font refers to the individual files that are a part of the font family or typeface. Serif typefaces are distinguished by small, decorative lines usually at the top or bottom of the letters. Sans serif typefaces don't have these decorative lines.
Script typefaces have a hand-lettered look. They should be used sparingly, because they tend to be harder to read in small sizes, all caps, or as long blocks of text. Decorative typefaces are distinct and ornamental, similar to script typefaces, so they should be used for smaller bits of text as well, and are great for adding a bit of embellishment. In monospace typefaces, each character uses the same amount of horizontal space and are the same width, whether it's a narrow I or a wider O.
This typeface is popular for displaying code. To set the font family in your web projects, use the CSS property font-family. It's recommended, but not required to add single or double quotes around font families with spaces in their names. Putting a quote around the name will let the browser know that these words belong together as one value, rather than two separate values. Web-safe fonts refer to font files that are preinstalled on the majority of computers or devices.
Not all operating systems have the same fonts installed, or the user may have deleted it. If the user doesn't have the font installed locally, your font-family declaration won't display properly. Here's a handy resource which lists all web-safe fonts and also categorizes them into typefaces. It also lists the percentage of Windows and Mac computers that have these fonts installed. When using a font stack, choose fallback fonts that look similar and separate the options with a comma.
The first value is the first choice, the following options are alternative fonts declared in the order of preference. If the specified fonts are not available on the user's computer, declaring the last option with a generic font family will provide default choices defined by each browser. Though the single or double quotes are optional for other font families, generic fonts must always be declared without quotes. There's no limit to the number of font options to include, but two or three in the font stack is pretty standard.
And here are the five generic font families that can be used as the backup option for the typefaces we talked about earlier in this lesson.
- 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