The CSS font-size property defines how large or small the text appears on your website. Getting it right is more than just aesthetics, as font size impacts readability, accessibility, and ultimately your store’s conversion rate.
What is font-size in CSS?
The font-size property controls the size of the text content of an element. By default, most browsers render text at 16px, but you can adjust this globally or per element.
Example:
p {
font-size: 16px;
}
You can define the size using absolute units (like pixels) or relative units (like em or rem). Choosing the right one determines how responsive and accessible your text will be.
CSS Units for Font Size
There are several ways to set text size in CSS. Let’s go over the most common ones and when to use each.
1. px (Pixels)
Absolute unit.
- Always stays fixed regardless of screen size or user settings.
- Great for logos or UI elements that must stay consistent.
Limitation: Doesn’t scale with the user’s browser zoom or base font size settings.
h1 {
font-size: 32px;
}
2. em (Relative to parent)
Relative unit.
- 1em equals the font size of the parent element.
- Useful for scaling text proportionally within a component.
Note: Can “compound” if nested, 1.2em inside a parent with 1.2em results in 1.44x the base size.
p {
font-size: 1.2em;
}
3. rem (Relative to root)
Relative to the root (html) element.
- 1rem = the font size of the root element (usually 16px).
- Recommended for site-wide consistency.
- Easier to maintain accessibility and responsive design.
h1 {
font-size: 2.5rem; /* equals 40px if base font-size = 16px */
}
4. % (Relative to parent)
Acts similar to em, defines font size as a percentage of the parent element.
p {
font-size: 100%; /* equals parent’s font size */
}
5. vw / clamp() (Fluid typography)
Modern responsive typography often uses viewport units or the clamp() function to make text scale with screen size.
h1 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}
This means:
- Minimum font size = 1.5rem
- Scales based on viewport width (2.5vw + 1rem)
- Maximum font size = 3rem
Perfect for headlines that look balanced across desktop and mobile.
Accessibility & Readability Best Practices
Good typography improves not only design but also user experience and accessibility.
- Base size: Use at least 16px (1rem) for body text.
- Scalable units: Use rem or em so users can zoom easily.
- Line height: Set line-height: 1.4–1.6 for comfortable reading.
- Contrast: Ensure color contrast meets WCAG standards (at least 4.5:1 for normal text).
- Avoid very small text on mobile devices — anything under 14px may reduce readability.
Example best practice:
body {
font-size: 1rem; /* 16px base */
line-height: 1.5;
}
Please note that accessibility directly affects SEO as well. Google rewards pages that are mobile-friendly and readable.
Responsive Font Size in Shopify and GemPages
Using Shopify’s Theme Settings
If you’re using a Shopify theme, you can often adjust font sizes directly from Online Store > Customize > Theme Settings > Typography.
Many themes include sliders or dropdowns to control text size globally (e.g., body, heading, button text).
Using GemPages Editor
If you need finer control, such as changing font size only for pages built with GemPages, you can add custom CSS either in the settings panel > Advanced tab > CSS section.
Example: Adjust root font size with media queries
:root {
font-size: 100%; /* base 16px */
}
@media (max-width: 600px) {
:root {
font-size: 93.75%; /* ~15px for smaller screens */
}
}
This ensures your font scales down slightly on mobile, maintaining visual balance without breaking layout.
Common Mistakes and Quick Fixes
| Mistake | Issue | Quick Fix |
| Mixing px and rem units | Inconsistent scaling | Use rem site-wide for predictability |
| Overusing !important | Hard to override | Use proper CSS specificity |
| Hardcoding small fonts | Hurts readability on mobile | Follow minimum 16px base rule |
| Forgetting responsive scaling | Text looks too large/small on some devices | Add clamp() or media queries |
FAQs about CSS Font Size
1. What’s the best font size unit to use in CSS?
Use rem for most cases. It scales from the root element, making it responsive and accessible.
2. What’s the ideal body font size for websites?
Around 16px (1rem) for body text. You can increase it for better readability, especially on mobile.
3. How do I change font size in Shopify?
Go to Theme Customizer > Typography settings. If your theme doesn’t offer that, use custom CSS or GemPages’ Typography element.
4. Is smaller text bad for SEO?
Indirectly, yes. Poor readability increases bounce rates, which can affect engagement metrics that influence SEO.
Thank you for your comments