Currently Empty: ₹0.00
CSS Font Size
CSS CODES & EXAMPLES
CSS Font Size
Learn how to control text size in CSS using px, em, rem, percentage, viewport units and responsive typography.
01
What is font-size?
Control the size of text
The CSS font-size property defines how large or small
text should appear on a webpage.
Syntax:
font-size: value;
02
Basic Font Size
Using pixels
font-size.css
p {
font-size: 20px;
}This text has a font size of 20px.
03
Font Size in Pixels
Absolute unit example
12px
Small text example
16px
Normal text example
24px
Medium heading example
32px
Large heading example
48px
Very large heading
04
Font Size with em
Relative to the parent element
The em unit is relative to the font size of the
element’s parent.
em-example.css
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}
Parent text — 20px
Child text — 1.5em
05
Font Size with rem
Relative to the root font size
The rem unit is relative to the root HTML element’s
font size. It is widely used for scalable and consistent typography.
rem-example.css
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}2rem Heading
1rem paragraph text.
06
Percentage Font Size
Relative sizing
percentage.css
body {
font-size: 16px;
}
p {
font-size: 125%;
}This paragraph uses 125% font size.
07
Viewport Font Size
Using vw
The vw unit is relative to the width of the viewport.
It can be useful for responsive headings.
viewport-size.css
h1 {
font-size: 5vw;
}Responsive Heading
08
Responsive Font Size with clamp()
Modern CSS typography
The CSS clamp() function allows you to define a minimum,
preferred and maximum font size.
clamp.css
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}Responsive CSS Heading
09
Small, Medium and Large Text
Create a simple type scale
Small
Small text for supporting information.
Medium
Medium text for normal content.
Large
Large text for important content.
Extra Large
Extra large heading text.
10
Different Font Sizes for Elements
Build a clear hierarchy
typography.css
h1 {
font-size: 42px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
p {
font-size: 16px;
}
small {
font-size: 13px;
}H1 Main Heading
H2 Section Heading
H3 Subheading
Normal paragraph text.
Small supporting text.
11
Font Size with CSS Variables
Reusable typography values
variables.css
:root {
--heading-size: 36px;
--body-size: 16px;
}
h1 {
font-size: var(--heading-size);
}
p {
font-size: var(--body-size);
}
12
Responsive Heading Example
Practical website designBuild Your Digital Future
Learn computer skills with practical lessons and hands-on learning resources.
responsive-heading.css
h2 {
font-size: clamp(1.8rem, 4vw, 3rem);
}
p {
font-size: clamp(1rem, 1.5vw, 1.2rem);
}
13
Common Font Size Units
Quick reference
px
Fixed CSS pixel unit.
em
Relative to the parent’s font size.
rem
Relative to the root font size.
%
Relative percentage value.
vw
Relative to viewport width.
vh
Relative to viewport height.
14
Best Practices
Professional typography
✓ Use rem for scalable typography
rem provides a predictable relationship with the root font size.
✓ Use clamp() for responsive headings
It helps text scale smoothly between minimum and maximum sizes.
✓ Maintain a type hierarchy
Make headings, paragraphs and supporting text visually distinct.
✓ Test on different screens
Check typography on mobile, tablet and desktop layouts.
15
Quick Revision
Important pointsfont-size
Controls the size of text.px
Pixel-based sizing.em
Relative to the parent.rem
Relative to the root element.vw
Relative to viewport width.clamp()
Creates flexible responsive sizing.
16
Practice Task
Test your CSS skills🎯 Your Challenge
Create a responsive course page heading.
- Use
clamp()for the main heading. - Use
remfor paragraph text. - Create three different heading levels.
- Make the design readable on mobile screens.
- Test the result by resizing the browser.
17
CSS Font Size Live Runner
Experiment with font-size values
LIVE PREVIEW