Typography is the art of displaying text in a readable and visually appealing way.
In CSS, typography controls:
Good typography improves:
A font family defines the typeface used for text.
selector {
font-family: value;
}
Example:
h1 {
font-family: Arial;
}
Browsers can also use fallback fonts.
body {
font-family: Arial, Helvetica, sans-serif;
}
The browser tries each font in order.
Arial
↓
Helvetica
↓
sans-serif
Serif fonts have decorative strokes at the ends of letters.
font-family: serif;
Examples:
Sans-serif fonts have a clean and modern appearance.
font-family: sans-serif;
Examples:
Every character has the same width.
font-family: monospace;
Examples:
Commonly used for:
Handwriting-style fonts.
font-family: cursive;
Decorative fonts.
font-family: fantasy;
Example:
h1 {
font-family: Georgia, serif;
}
p {
font-family: Arial, sans-serif;
}
code {
font-family: monospace;
}
The font-size property controls the size of text.
font-size: value;
Example:
h1 {
font-size: 40px;
}
Pixels (px)
font-size: 16px;
Example:
h1 {
font-size: 40px;
}
p {
font-size: 16px;
}
em
Relative to the parent element.
font-size: 1.5em;
rem
Relative to the root (html) font size.
font-size: 2rem;
If the root size is:
html {
font-size: 16px;
}
Then:
2rem = 32px
Percentage
font-size: 120%;
Typical font sizes:
| Element | Common Size |
|---|---|
h1 |
32px–48px |
h2 |
24px–36px |
h3 |
20px–28px |
p |
14px–18px |
The font-style property controls the style of text.
font-style: value;
Normal:
font-style: normal;
Italic:
font-style: italic;
Oblique:
font-style: oblique;
Example:
p {
font-style: italic;
}
The font-weight property controls the thickness of text.
Example:
font-weight: bold;
Numeric values:
font-weight: 100;
font-weight: 300;
font-weight: 400;
font-weight: 700;
font-weight: 900;
| Value | Meaning |
|---|---|
| 100 | Thin |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 700 | Bold |
| 900 | Black |
Example:
h1 {
font-weight: 700;
}
The font-variant property changes how text is displayed.
Small caps:
font-variant: small-caps;
Example:
p {
font-variant: small-caps;
}
Input:
frontend development
Output:
FRONTEND DEVELOPMENT
(using smaller uppercase letters)
Normal:
font-variant: normal;
The font property combines multiple font properties into one declaration.
Without shorthand:
h1 {
font-style: italic;
font-weight: bold;
font-size: 32px;
font-family: Arial;
}
With shorthand:
h1 {
font: italic bold 32px Arial;
}
Order:
font-style
↓
font-weight
↓
font-size
↓
font-family
Example:
p {
font: normal 400 16px Arial;
}
Google Fonts provides free fonts for websites.
Popular fonts include:
Browse fonts at:
https://fonts.google.com
<link>Add the font inside the <head>.
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet">
Then use it in CSS.
body {
font-family: "Poppins", sans-serif;
}
@import@import url(
'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'
);
body {
font-family: "Inter", sans-serif;
}
| Font | Common Use |
|---|---|
| Inter | Modern UI |
| Poppins | Startups |
| Roboto | Material Design |
| Open Sans | Websites |
| Montserrat | Landing Pages |
| Nunito | Friendly UI |
HTML:
<h1>
Frontend Development
</h1>
<p>
Learn HTML, CSS and JavaScript.
</p>
CSS:
body {
font-family: "Inter", sans-serif;
}
h1 {
font-size: 48px;
font-weight: 700;
}
p {
font-size: 18px;
font-style: normal;
}
Choose readable fonts.
Good:
font-family: Inter, sans-serif;
Avoid decorative fonts for long paragraphs.
Use appropriate font sizes.
body {
font-size: 16px;
}
Limit the number of font families.
Good:
1–2 Font Families
Avoid using many different fonts on the same page.
Prefer relative units for scalable designs.
Better:
font-size: 1rem;
Instead of:
font-size: 16px;
Typography controls how text appears on a webpage.
body {
font-family: "Inter", sans-serif;
font-size: 16px;
}
h1 {
font-size: 48px;
font-weight: 700;
}
Good typography makes websites:
Modern websites commonly use fonts such as Inter, Poppins, Roboto, and Montserrat, combined with appropriate font sizes and font weights to create a clean and consistent reading experience.