Ask any question about CSS here... and get an instant response.

How can I adjust font sizes with media queries to ensure readability on both mobile and desktop devices?

Asked on Nov 22, 2025

Answer

To ensure readability across different devices, you can use CSS media queries to adjust font sizes based on the screen size. This approach allows you to specify different styles for mobile and desktop views.

<!-- BEGIN COPY / PASTE -->
    <style>
      body {
        font-size: 16px; /* Default font size for desktop */
      }

      @media (max-width: 768px) {
        body {
          font-size: 14px; /* Smaller font size for mobile devices */
        }
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

Media queries use conditions like "max-width" to apply styles based on device characteristics.
Adjust the "font-size" property within the media query to scale text appropriately for smaller screens.
Consider using relative units like "em" or "rem" for more flexible and scalable font sizing.
Test your design on various devices to ensure readability and accessibility.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I adjust font sizes with media queries to ensure readability on both mobile and desktop devices?

Asked on Nov 22, 2025

Answer

The Q&A Network