Official statement
Other statements from this video 3 ▾
Google sets a minimum font size of 16 CSS pixels for mobile content, with a line height of 1.2 em. This guideline directly impacts your Core Web Vitals and mobile-first ranking. In practice, any font smaller than 16px may penalize your visibility, as Google now prioritizes reading experience on smartphones in its ranking algorithms.
What you need to understand
Is Google really aiming to improve readability or to standardize the web?
Google's directive regarding 16px font size is part of a mobile-first approach that goes beyond simple usability. Since the mobile index became the main index, Mountain View has been gradually imposing readability standards that affect crawling and ranking.
This rule targets main textual content, not necessarily navigation elements or legal mentions. The nuance is important: Google evaluates the readability of a page's unique content, which adds value to the user. A menu set at 14px won't penalize you if your article adheres to the 16px standard.
What does a line height of 1.2 em actually mean?
A line height of 1.2 em represents the vertical space between two lines of text. A ratio of 1.2 means that the space between lines is 120% of the font size. For a 16px font, that results in a vertical spacing of 19.2px.
This parameter directly influences the visual density perceived by the reader. A line height that is too tight (below 1.1) compresses the text and diminishes the mobile experience. Google detects this via its layout analysis algorithms, particularly in terms of Layout Shift and overall readability.
Why does Google specify checking CSS tools?
Many modern CSS frameworks (Tailwind, Bootstrap, Foundation) apply resets or normalization that modify the browser's default values. Some set the line height at 1 or 1.15, below the recommended threshold.
Google warns about this because many sites use these frameworks without auditing the final applied values. A developer might think they are adhering to the standards while their compiled CSS overrides best practices. The PageSpeed Insights tool now highlights these discrepancies in its accessibility section.
- 16 CSS pixels represent the minimum size for main mobile content
- A line height of 1.2 em minimum improves readability and impacts Core Web Vitals
- CSS frameworks can override these values without you noticing
- Google evaluates these criteria in its mobile-first algorithm since the unified index
- PageSpeed Insights and Lighthouse detect readability discrepancies in their reports
SEO Expert opinion
Is this recommendation based on solid data or a normative view of the web?
Google relies on recognized accessibility studies (WCAG 2.1, Nielsen Norman Group studies) that establish 16px as the comfort reading threshold without zooming. The directive is not arbitrary, but it raises a fundamental question: should we standardize all sites according to a single standard?
In the field, it is observed that sites adhering to these criteria do achieve better mobile engagement rates (session time, pages viewed). However, correlation does not imply causation: a site with 14px and exceptional content can outperform a site at 16px with mediocre content. Google understands this but still leans toward standardization.
Are all sectors and fonts treated equally?
Google's directive does not take into account typographical variations. A condensed font at 16px may appear smaller than a wide font at 15px. The x-height (height of the lowercase letters) varies greatly between Helvetica, Arial, Roboto, or Georgia.
Sites using custom typefaces optimized for screens (Inter, SF Pro, Segoe) can technically go down to 15px without losing readability. But Google does not make this distinction in its audit tools. [To be verified]: No official documentation specifies whether the algorithm analyzes the actual font or merely checks the declared CSS value.
What are the actual risks if I stay at 14px on mobile?
In practice, a site at 14px will not be de-indexed or directly penalized. Google does not impose a binary sanction on this criterion. However, you will lose points in the overall evaluation of mobile user experience, which could affect your positioning against a competitor with equivalent content.
Highly competitive sectors (e-commerce, finance, health) can no longer afford this point loss. In queries with strong commercial intent, the difference between position 3 and 5 can represent 40% less organic traffic. The effort/benefit ratio clearly favors compliance, except in very specific cases (web applications, complex interfaces where information density takes precedence).
Practical impact and recommendations
How can I quickly audit my mobile site's font size?
Use PageSpeed Insights or Lighthouse directly in Chrome DevTools (F12, Lighthouse tab, mobile mode). The "Accessibility" section automatically highlights texts smaller than 16px. Complete this with the "Font Size" Chrome extension that displays the calculated size in real-time on hover.
For a more thorough audit, inspect the final compiled CSS applied to your content elements (paragraphs, lists, quotes). Pay particular attention to the classes body, .content, article, main. Be cautious of media queries that may reduce size on certain breakpoints without you having explicitly programmed it.
Should I change only the base size or all textual elements?
Focus first on the main content: article paragraphs, product descriptions, informative content. Navigation elements, footers, and form labels can remain slightly smaller (minimum 14px) without major SEO impact.
Use a CSS cascading approach: set font-size: 16px on body for mobile, then adjust exceptions through specific classes. Avoid absolute values everywhere, prefer em or rem to maintain a consistent typographic hierarchy. An h2 at 1.5rem (24px) on a base of 16px remains proportional if you change the base later.
What should I do if my current design doesn't support these constraints?
Many corporate designs impose reduced sizes to "fit more content". This is a strategic mistake in modern SEO. If your management refuses the 16px, demonstrate the impact through measurable A/B testing: session time, bounce rates, mobile conversions.
In complex cases (complete redesign needed, legacy technical constraints), a gradual migration may be justified: start with critical pages (landing pages, top product sheets), then generalize. These typographic optimizations and their coherent integration into an existing technical ecosystem can be tricky to orchestrate alone. Turning to a specialized SEO agency can provide personalized support that considers your business constraints while maximizing your organic visibility.
- Audit font size via PageSpeed Insights and Lighthouse on a representative sample of pages
- Check the final calculated line height, not just the value declared in your source CSS
- Identify frameworks or normalize CSS that overwrite your baseline settings
- Set font-size: 16px on body with media query @media (max-width: 768px)
- Define line-height: 1.2 minimum (ideally 1.4-1.6 for optimal comfort)
- Test the real rendering on multiple devices (iPhone SE, standard Androids, tablets)
❓ Frequently Asked Questions
Les 16 pixels CSS correspondent-ils aux 16 pixels physiques de l'écran ?
Puis-je utiliser des unités relatives comme rem ou em au lieu de px ?
Les polices custom de marque doivent-elles aussi respecter ce minimum ?
Un interlignage de 1,2 est-il vraiment suffisant ou faut-il aller plus loin ?
Cette règle s'applique-t-elle aussi aux contenus en langue asiatique (chinois, japonais) ?
🎥 From the same video 3
Other SEO insights extracted from this same Google Search Central video · duration 10 min · published on 26/03/2015
🎥 Watch the full video on YouTube →
💬 Comments (0)
Be the first to comment.