Font size different on mobile problems usually happen when desktop font sizes are too rigid, viewport units scale too aggressively, browser text adjustment changes the size, or media queries override typography unexpectedly.
Responsive Typography Fix
Why is my font size different on mobile?
Your text may look perfect on desktop, then suddenly become huge, tiny, cramped, or inconsistent on mobile. This usually happens because the font size is locked to a desktop value, tied too aggressively to viewport width, changed by a media query, affected by browser text scaling, or inherited from a parent you did not expect.
- Responsive typography
- clamp()
- Viewport units
- Mobile readability
What the bug looks like
Text becomes too large, too small, oddly spaced, hard to read, or different from the desktop design in a way that feels uncontrolled.
Why it happens
Typography is being controlled by a rigid value, an aggressive responsive value, inheritance, media query order, or browser text scaling.
What usually fixes it
Use a responsive type scale with clamp(), control line-height, avoid wild viewport units, and inspect the winning mobile rule.
The desktop heading is too large for mobile
A big desktop heading can look premium on a wide screen, then become unreadable on a phone. Mobile typography needs its own scale or a fluid range.
Broken code
Desktop size everywhere.hero-title {
font-size: 64px;
line-height: 1;
}Broken visual result
The heading dominates the screen and leaves little room for useful content.
Correct code
Mobile size controlled.hero-title {
font-size: 64px;
line-height: 1;
}
@media (max-width: 640px) {
.hero-title {
font-size: 32px;
line-height: 1.08;
}
}Fixed visual result
The heading still feels strong, but it now fits the mobile screen.
Viewport units make the font scale unpredictably
Viewport units can be useful, but raw vw values can grow or shrink too aggressively. Without a minimum and maximum, the type can feel unstable across devices.
Broken code
Raw viewport units.section-title {
font-size: 10vw;
line-height: 1;
}Broken visual result
Correct code
Clamp the range.section-title {
font-size: clamp(30px, 6vw, 56px);
line-height: 1.05;
}Fixed visual result
clamp() gives the browser a safe minimum, flexible middle, and maximum.A mobile media query makes the font too small
Sometimes mobile text is different because someone intentionally changed it in a media query. The problem is not that mobile is random. The mobile rule is winning.
Broken code
Mobile rule too small.card-title {
font-size: 28px;
}
@media (max-width: 640px) {
.card-title {
font-size: 14px;
}
}Broken visual result
The title becomes visually weak and harder to scan on mobile.
Correct code
Mobile value still readable.card-title {
font-size: 28px;
}
@media (max-width: 640px) {
.card-title {
font-size: 24px;
line-height: 1.15;
}
}Fixed visual result
The title is smaller than desktop, but still readable and visually balanced.
em units inherit from a parent you forgot about
em units are relative to the parent font size. That can be useful, but it can also make text unexpectedly larger or smaller if a parent changes on mobile.
Broken code
Parent scale surprise.card {
font-size: 14px;
}
.card-title {
font-size: 2em;
}Broken visual result
Correct code
Use rem or clamp.card-title {
font-size: clamp(1.5rem, 5vw, 2rem);
line-height: 1.1;
}Fixed visual result
A production-minded responsive type scale
A stronger typography setup uses fluid sizes with limits, sensible line-height, and predictable spacing. It keeps text readable without forcing one rigid size across every screen.
Premium code
Fluid but controlled:root {
--step-title: clamp(2rem, 6vw, 4rem);
--step-heading: clamp(1.5rem, 4vw, 2.4rem);
--step-body: clamp(1rem, 2vw, 1.125rem);
}
.hero-title {
font-size: var(--step-title);
line-height: 1.02;
letter-spacing: -0.04em;
}
.card-title {
font-size: var(--step-heading);
line-height: 1.12;
}
.body-text {
font-size: var(--step-body);
line-height: 1.75;
}Premium visual result
The text scales with the screen, but the minimum and maximum values keep it under control.
Fast practical rule
If font size looks different on mobile, inspect the element and check the computed font size. Then look for the rule that wins on mobile: desktop value, media query, viewport unit, inherited parent size, or browser text adjustment.
Debug checklist
- Inspect the element and check the computed font size on mobile.
- Look for media queries that override the desktop font size.
- Avoid using large desktop font sizes without a mobile adjustment.
- Avoid raw viewport units like
10vwwithout minimum and maximum limits. - Use
clamp()when you want fluid typography with guardrails. - Check whether
emunits are inheriting from a changed parent. - Adjust line-height along with font size.
- Check browser text scaling only after CSS rules are confirmed.
em.
Final takeaway
Font size different on mobile is usually caused by a winning CSS rule, not by mystery. A desktop size may be too rigid, a viewport unit may be too aggressive, a media query may override the text, or a parent font size may affect child elements.
Start by checking the computed font size. Then build a controlled responsive type scale with sensible minimums, flexible middle values, and safe maximums. That gives your typography room to adapt without losing control.
Want more fixes like this?
Browse more responsive and CSS debugging guides in the FrontFixer library.