Fonts and Typography Web Typography 2 — Questions and Answers
Question 1: What is 'system font stack' in web typography?
- A list of native OS fonts used as fallbacks (Correct answer)
- A stack of layered font effects
- A server hosting fonts
- A font rendering engine
Correct answer: A list of native OS fonts used as fallbacks
A system font stack is a CSS `font-family` declaration that uses the default UI fonts of each operating system, ensuring fast rendering without downloads.
Question 2: Which CSS property adjusts the spacing between individual characters on a webpage?
- letter-spacing (Correct answer)
- word-spacing
- line-height
- text-indent
Correct answer: letter-spacing
`letter-spacing` controls the horizontal spacing between individual characters (also called tracking) in CSS.
Question 3: What is the purpose of a font 'fallback stack' in CSS?
- To specify alternative fonts if the primary font fails to load (Correct answer)
- To slow down font rendering
- To embed fonts in HTML
- To convert fonts to images
Correct answer: To specify alternative fonts if the primary font fails to load
A fallback stack lists alternative fonts in order of preference so the browser can use the next available font if the primary one fails to load.
Question 4: What does 'FOUT' stand for in web typography?
- Flash of Unstyled Text (Correct answer)
- Font Output Utility Tool
- Fixed Open Unicode Type
- Font Overlay Under Test
Correct answer: Flash of Unstyled Text
FOUT (Flash of Unstyled Text) occurs when a browser renders text with a fallback font before the custom web font finishes loading.
Question 5: Which Google Fonts URL parameter requests only specific font weights to reduce load time?
- wght (Correct answer)
- size
- weight
- load
Correct answer: wght
The `wght` parameter in Google Fonts URLs specifies which font weights to request, reducing unnecessary data transfer.
Question 6: What CSS value for `font-display` shows the fallback font immediately with no invisible period?
- swap (Correct answer)
- block
- fallback
- optional
Correct answer: swap
`font-display: swap` immediately shows the fallback font and swaps to the custom font as soon as it loads, eliminating any invisible text period.
Fonts and Typography Web Typography 2
What is 'system font stack' in web typography?