I use a combination of “Roboto” for headings and “Open Sans” for body text on my Shopify store. While the fonts look clean and modern, some customers have mentioned that the text size feels too small, especially on mobile devices. Additionally, the contrast between the font color (dark gray) and background (light gray) may not be strong enough for easy readability.
How can I adjust my typography choices to improve readability and user experience? Should I increase font sizes, switch to bolder colors, or use a single font throughout the site for consistency?
Appreciate for some one can assist me with some code
Hi @DarylMaguire95
It sounds like you’re aiming for a clean, modern look with your Shopify store’s typography, but a few customers have pointed out that readability might be an issue, especially on mobile. This is a common challenge—while Roboto and Open Sans are excellent choices for clarity, font size, color contrast, and spacing can significantly impact the overall user experience.
How to Improve Readability and UX in Your Store’s Typography#### 1. Increase Font Size for Better Legibility- For headings (h1, h2, h3), aim for at least 24px–30px depending on importance.
- For body text (p), 16px–18px is ideal for readability, especially on mobile.
- Shopify themes typically set body text at 14px–16px, but increasing it slightly can improve clarity.
2. Improve Contrast Between Text & Background- Dark gray (#333) on light gray can strain the eyes, particularly for users with visual impairments.
- Consider switching to a darker shade for text (e.g., #222 or pure black #000) and a lighter background (#f8f8f8 or white #fff).
- Use accessible contrast ratios (at least 4.5:1 for body text and 3:1 for headings).
3. Adjust Line Height & Letter Spacing- A good line height ensures your text isn’t too cramped. Try:
- 1.5x for body text
- 1.3x for headings- Letter spacing (letter-spacing) of 0.02em to 0.05em can also improve readability.
4. Keep Font Consistency but Prioritize Readability- Using two fonts (one for headings, one for body) is fine, but ensure they complement each other.
- If readability is a concern, consider using one font family (like Open Sans for both headings and body) to maintain consistency.
Custom Code to Improve Readability in Shopify
You can apply these adjustments by adding custom CSS to your Shopify theme. Here’s how:
- Go to your Shopify admin panel
- Navigate to Online Store → Themes → Customize
- Click on “Theme Settings” and look for “Typography” (if your theme has options)
- If further customization is needed, add this CSS to your “theme.css” or “base.css” file:
/* Improve font size and line height */
body {
font-size: 17px; /* Adjust for better readability */
line-height: 1.6;
color: #222; /* Darker text color for better contrast */
font-family: “Open Sans”, sans-serif;
}
/* Adjust headings for better readability */
h1, h2, h3 {
font-family: “Roboto”, sans-serif;
line-height: 1.3;
color: #111; /* Slightly darker than body text */
}
/* Improve mobile readability */
@media (max-width: 768px) {
body {
font-size: 16px;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
}
This CSS ensures your text is larger, more readable, and mobile-friendly while maintaining the clean aesthetic of your store.
Final Thoughts- Start by increasing font size and contrast first—these changes will have the most immediate impact.
- Test on multiple devices (mobile, tablet, desktop) to ensure readability across screen sizes.
- Use Shopify’s built-in typography settings if you want a quick fix without coding.
Let me know if you need help tweaking the code further!
If you need any other assistance, feel free to reply and I will try my best to help.
Best regards,
Daisy