From the course: CSS Essential Training

Typography for the web - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Typography for the web

“

- There are many typography related CSS properties that can be used to change the default styles. Typography refers to the overall design and practice of organizing text to communicate and engage with the reader, and it starts with choosing a typeface. A typeface refers to the design of a set of letters, numbers and symbols that share common design features. A font refers to the specific instance of a typeface. For the web and for use with various software programs, a font refers to the digital file that contains the information about the typeface, such as the specific weight styles and characteristics. Though there are some differences between the terms font and typeface, they're often used interchangeably. A font family is a collection of related fonts. When choosing a font, we want to use something that's easy to read but also conveys certain feelings or an appropriate tone for the content. Some typeface can evoke strong emotional responses. For example, Comic Sans was designed to be a casual font and became popular for materials aimed at children due to its fun appearance. It quickly spread to other uses, and despite its popularity, many people found it inappropriate for serious or formal information, leading to a ban Comic Sans movement. While these responses will vary among individuals, certain typeface are generally considered better suited for conveying particular feelings or tones. There are five categories of typefaces. Script typefaces have a hand-lettered look and are thought to convey an elegant feel. So they're often used for wedding invitations. On the web, they're usually reserved for headings or short blocks of text, to add some embellishments, since they can be harder to read in small sizes, all caps or long blocks of texts. Decorative typefaces are ornamental and tend to have big personalities. So for the web, they are usually reserved for headings and decorative details as well. The characters in monospace typefaces occupies the same amount of horizontal space, whether it's a narrow I or a wider O. Monospace typefaces are often used for displaying code. Serif typefaces are characterized by small decorative lines usually at the top or bottom of the letters. Serif fonts tend to be viewed as more traditional and formal. For example, Times New Roman is commonly used for legal documents. Sans serif typefaces do not have decorative lines and are often thought of as contemporary and modern. For the web, the recommendation used to be that sans serif created a better reading experience, especially for long blocks of text, because the absence of small decorative lines on the letters wouldn't interrupt the flow. And serif typefaces were often used for shorter blocks of text, such as headings. But over the years, there's been a rise in the usage of serif fonts for larger blocks of texts. For example, Medium is a popular platform for reading and publishing essays and uses a serif typeface for the majority of the text on its platform. While design trends may change, it will always be necessary to ensure that your typeface choices are easy to read and convey the tone that you're aiming for.

Contents