What's CSS Typography?
Typography in CSS controls how text appears on a webpage—its font, size, spacing, alignment, and overall readability.
1.font-family:
font-family lets you define which font the browser should use for an element.
It accepts one or more fonts in a priority-ordered list (the browser uses the first available).
#Syntax:
body {
font-family: Arial, sans-serif;
}
If Arial isn't available, the browser uses the fallback sans-serif.
#Custom Font Names Must Be Quoted
h1 {
font-family: "Open Sans", sans-serif;
}
Use quotes when a font name contains spaces or special characters.
#Generic Font Families:
These are "catch-all" backups the browser always supports:
| Generic family |
Examples |
| serif |
Times,Georgia |
| sans-serif |
Arial,Helvetica |
| monospace |
consolas,courier |
| cursive |
Brush Script, Comic Sans |
| fantasy |
Impact (rarely used) |
| system-ui |
Local OS UI font |
Always end your list with a generic font.
#🎨 How to Use Google Fonts:
Google Fonts gives you free web fonts you can load directly into your website.
There are two main ways to use Google Fonts:
i.Using the <link> Tag (Recommended):
Step 1 — Copy Google Fonts link:
Example for Inter with multiple weights:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
Place the link tag inside the <head> tag of your HTML File.
Step 2 — Use in CSS:
body {
font-family: "Inter", sans-serif;
}
ii.Using @import in CSS (Not recommended, but possible)
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;600&
display=swap');
body {
font-family: "Poppins", sans-serif;
}
❗ This method slows down page rendering — use <link> tag instead.
2.font-size:
font-size controls how large or small text appears.
CSS supports many units (px, rem, em, %, vw…), each suited for different situations.
#Basic Syntax:
p {
font-size: 16px;
}
Recommended Units for Modern Web Design
✔ rem (most recommended):
Scales relative to the root font size (usually 16px).
body {
font-size: 1rem; /* 16px (browser-default)*/
}
h1 {
font-size: 2.5rem; /* 40px */
}
Advantages:
-
consistent
-
accessible
-
easy to scale entire site
✔ em
Relative to parent element's font size.
Use for spacing or component-based design:
button {
font-size: 1em; /* same as parent */
padding: 0.5em 1.2em;
}
✔ px
Fixed size.
Useful for small UI elements, but less responsive.
.small-text {
font-size: 12px;
}
✔ Fluid units (vw, vh)
Size based on viewport width/height.
.hero-title {
font-size: 8vw;
}
Relative Percentages
Useful for scaling entire containers.
section {
font-size: 120%; /* 1.2rem if parent is 1rem */
}
#Responsive Font Sizes
✔ Using clamp() — BEST modern technique
Automatically scales between min and max values.
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
Meaning:
-
never smaller than 2rem
-
ideally 5vw
-
never bigger than 4rem
3.font-weight:
Basic syntax:
p {
font-weight: 400;
}
Using keywords:
p{
font-weight: normal; /*400*/
font-weight: bold; /*700*/
}
4.text-align:
Syntax:
p{
text-align: left;
text-align: right;
text-align: center;
text-align: justify; /* stretched edges */
text-align: start; /* depends on writing direction */
text-align: end; /* depends on writing direction */
}
5.text-transform:
h2 {
text-transform: uppercase;
}
| Values |
Examples |
| uppercase |
"hello" → "HELLO" |
| lowercase |
"HELLO" → "hello" |
| capitalize |
"hello world" → "Hello World" |
| none |
Removes transformations |
6.text-decoration:
Syntax:
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 3px;
You can use shorthand:
text-decoration: underline red wavy 3px;
Order doesn't matter.
Longhand Properties:
1.text-decoration-line:
text-decoration-line: underline; /* underline */
text-decoration-line: overline; /* top line */
text-decoration-line: line-through; /* strike-through */
text-decoration-line: underline overline;
text-decoration-color:
text-decoration-color: #ff0055;
text-decoration-style:
text-decoration-style: solid; /* default */
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
text-decoration-thickness:
text-decoration-thickness: 2px;
Advanced typographies:
- text-indent: Specifies the indentation of the first line of a text block.
-
line-height: Sets the vertical spacing between lines of text (the leading).
letter-spacing: Sets the horizontal spacing between characters (kerning).
-
word-spacing: Sets the spacing between words.
-
white-space: Controls how whitespace within an element is handled (e.g., preventing wrapping with nowrap).
-
text-shadow: Adds a shadow effect to the text.
-
word-break / overflow-wrap: Controls how long words break to prevent overflow outside their container.
-
text-overflow: Determines how content that overflows its container should be signaled (often with an ellipsis ...).
