
However, it's possible to attain this look with certain serif fonts as well.įor page titles, headings and sub-headings, a serif font is sometimes a better choice, because they can be perceived as more stately and grand, which helps to contribute to how readers perceive the hierarchy of the page. Generally the best choice for attaining this uncluttered, flowing, easy-to-read look is sans-serif. For the body of a web page, it's important to choose a font that is not too cluttered and that flows gracefully from letter to letter without too much space between letters. The bottom line: There are many variables affecting readability of text, not just font family alone. There are dozens of studies favoring both font families. There has been extensive research on which of these font families, serif or sans-serif, is easier to read. These fonts are simple and straightforward. Sans-serif fonts do not have serifs ("sans" is French for "without"). Serif fonts have been used for centuries in printed books, magazines and newspapers. They can look like small feet, caps, tails, flags or dots. Serif fonts have small lines or strokes that extend from the ends of characters. In CSS (and in typography in general) there are five basic types, or families, of fonts: serif, sans serif, cursive, fantasy, and monospace. you will be able to define the typography of your site by setting the font-family, font-size, font-weight, line-height, text-align, and letter-spacing properties in CSS.įont Families: Serif, Sans-serif, and others.you will be able to make informed decisions about which font families to use on a website, based in part on the likelihood that these fonts will be installed on users' computers.you will be able to identify whether a font is serif, sans-serif, or another font family.You will also learn some strategies for selecting a font family. In this lesson you will learn some of the specific CSS properties that are used to define typography on web pages, and will apply these properties to your portfolio website. UNIT 3 > MODULE 3 Lesson 2: Applying Typography in CSS Overview
