Typography determines the legibility, hierarchy, and professional feel of a modern website.
1. Key Typography Properties
⊞Code Example
h1 {
font-family: 'Outfit', sans-serif;
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
color: #ffffff;
}
p {
font-family: 'Inter', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #cbd5e1;
}
2. Importing Google Fonts
Include Google Fonts in your HTML <head> or import them at the top of your CSS file:
⊞Code Example
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}