This module focuses specifically on CSS font and text styling, including loading custom web fonts and applying them to your text.
Learning outcomes:
color.
Font family, font stacks, web safe fonts.
font-size, font-weight, and font-style.
text-align, text-transform, and text-decoration.
text-shadow.
line-height.
Notes:
There are several other font and text styling properties, and students should be encouraged to explore more of them as part of their constant learning.
Resources:
Text and typography, web.dev (2021)
Web-safe fonts, Scrimba Course Partner
Learning outcomes:
Spacing list items, for example, with margin or line-height.
list-style properties.
Understand why default link styles are important for usability on the web — they are familiar and help users recognize links.
Styling link states: :hover, :focus, :visited, and :active:
Creating a navigation menu with lists and links.
Resources:
Learning outcomes:
Understand that web fonts allow developers to go beyond the web safe font set and use custom fonts on their web apps.
Basic setup — the @font-face at-rule, and font-family and src descriptors.
Using a web font with the font-family property.
Other descriptors — font-weight, font-style, etc.
Using an online service to find web fonts and generate web font code, for example, Font Squirrel and Google Fonts.
Usability implications of web fonts — using several of them can increase page download size.
Resources:
Fonts Knowledge, Google Fonts
All about the CSS font-family property, explainers.dev