Embracing Mobile-First Typography: A Case for Larger Initial Font Sizes

So, I've been thinking about font sizes a lot lately. I've noticed that many websites and applications have tiny, unreadable text that strains my eyes and makes me squint. It's frustrating and uncomfortable, and it's not just me—many people struggle with small font sizes, whether due to aging eyes, visual impairments, or simply personal preference.

In the ever-evolving landscape of digital design, typography plays a pivotal role in shaping the user experience. As our interactions with websites and applications increasingly shift towards mobile devices, it's crucial to re-evaluate our approach to font sizing. Rather than adhering to desktop-centric conventions, we should embrace a mobile-first mindset and prioritize readability on smaller screens.

The current practice of designing for desktop displays and then scaling down for mobile devices often results in text that is uncomfortably small and strains the eyes. A prime example of this issue can be found in the Amazon mobile app, where product descriptions and details are frequently rendered in a font size that requires users to squint or bring the screen uncomfortably close to their face. This oversight not only compromises accessibility but also diminishes the overall user experience, leading to frustration and potential abandonment of the digital product.

By adopting a mobile-first approach to typography, we can ensure that the initial font size is optimized for the constraints of mobile devices. This means setting a larger base font size that caters to the average reading distance and screen size of handheld devices. With this foundation in place, we can then scale down the font size for larger desktop displays, where users have the luxury of greater screen real estate and closer viewing distances. Imagine browsing product details on the Amazon app with a font size that is comfortably readable, eliminating the need for constant zooming or straining your eyes.

This paradigm shift in typography not only enhances readability but also aligns with the principles of responsive web design. As users seamlessly transition between devices, the text will adapt seamlessly, providing a consistent and enjoyable reading experience regardless of the screen size.

Furthermore, embracing larger initial font sizes can have a positive impact on accessibility and inclusivity. Users with visual impairments or those in less-than-ideal lighting conditions will benefit from the increased legibility, fostering a more inclusive digital environment.

Implementing this mobile-first approach to typography may require a paradigm shift in the way we conceptualize and design digital experiences. However, the benefits of improved readability, enhanced user experience, and increased accessibility make a compelling case for prioritizing larger initial font sizes tailored to the mobile experience.

In an era where mobile devices have become the primary gateway to digital content, it's time to recalibrate our design principles and prioritize the needs of the mobile user. By embracing a mobile-first approach to typography, we can create a more inclusive and enjoyable digital landscape that caters to the diverse needs of our audiences.

Approaches to Consider

I've been experimenting with a mobile-first typography approach in my recent projects, and I've found a few strategies that have been particularly effective:

Sometimes it's the simplest things that make the biggest difference. By starting with a larger base font size and scaling down for larger displays, we can create a more comfortable and accessible reading experience for users across all devices.

/* wherever you define your variables */
:root {
  --base-font-size: 20px;

  @media (min-width: 768px) {
    --base-font-size: 18px;
  }

  @media (min-width: 1024px) {
    --base-font-size: 16px;
  }
}

/* your app css file */
body {
  font-size: var(--base-font-size);
}

Another approach that could be used is clamp() function in CSS. This function allows you to set a range of values for a property, ensuring that the font size will never be smaller than the minimum value and never larger than the maximum value. This can be particularly useful for maintaining readability across different screen sizes.

/* 
  you may need to adjust the 
  calculations based on your design 
  (specifically the 2.5vw part)
*/
body {
  font-size: clamp(16px, calc(calc(20px*2) - 2.5vw), 20px);
}

/* this approach may be more flexible */
:root {
  --font-mobile: 20px;
  --font-desktop: 16px;
}

body {
  font-size: clamp(var(--font-desktop), calc(calc(var(--font-mobile)*2) - 2.5vw), var(--font-mobile));
}

If you're using TailwindCSS, you can leverage the Fluid Tailwind plugin create a fluid clamp() for your text like ~text-xl/base. Where the left hand side is the font size on smaller screens, and the right hand side is the font size on larger screens.

Possibly the best, and most reasonable approach, comes from an article Adrian Roselli wrote titled The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet. I feel like this may be the overall best approach when it comes to setting font-size, just let the user decide!

I haven't fully embraced Adrian Roselli's approach yet, I am leaning that way because it makes the most sense to me. I'm still experimenting with it, but I think it's a solid approach.