Beginner LevelCSS & Modern Layouts
How should you set font-size, line-height, and font-family in CSS?
❓ Interview Prompt: Explain best practices for typography including system font stacks, rem sizing, and readable line-height.
Good typography requires proper font sizing, line spacing, and font selection:
Font Size:
•
Set
html { font-size: 100%; } (respects user browser settings, typically 16px).•
Use
rem for all font sizes: h1 { font-size: 2.25rem; }.Line Height:
•
Unitless values are preferred:
line-height: 1.5; (1.5× the font size). This inherits correctly to child elements.•
Body text: 1.5-1.75 for readability. Headings: 1.1-1.3.
Font Family:
•
Use a system font stack for performance or a web font (Google Fonts).
•
Always include generic fallback families:
serif, sans-serif, monospace.Code Implementation Example
css
/* System font stack (zero network requests) */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #3d2c2e;
}
/* Google Font with fallback */
h1, h2, h3 {
font-family: 'Inter', sans-serif;
line-height: 1.2;
font-weight: 700;
}
code, pre {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}💡System font stack, heading typography, and monospace code font.
🎯 Interview Key Takeaway
Use rem for font sizes, unitless line-height values, and always declare generic font-family fallbacks.
#Typography#Fonts#Readability#Beginner
Back to all CSS & Modern Layouts Questions→