How to Improve Text Readability – ZenBlocks buttonBasic

How to Improve Text Readability – ZenBlocks buttonBasic

Summary

Text readability issues can be efficiently resolved by adjusting in this order: **contrast first, then font settings, then text shadow, then background overlay**. The key is to change one thing at a time and verify each adjustment before moving on.

—

Cause

  • **Insufficient contrast between text and background colors**: Even if hues differ, low brightness difference makes text hard to read
  • **Font size too small**: Readability drops especially on smartphone displays
  • **Text placed directly over a background image**: Without an overlay, text blends into the background
  • **Improper line height/letter spacing**: Too tight reduces readability

Solution Steps (Recommended Order)

  1. Check the Text Color in Style Settings
  2. Verify brightness difference with the background color (dark background -> light text, light background -> dark text)
  3. Aim for WCAG AA standard (contrast ratio of 4.5:1 or higher)
  4. Check that the text color Alpha (opacity) is not too low
  5. **Font Size**: Ensure at least 14px on smartphones
  6. **Font Weight**: Use a bolder weight (600-700) when the background is complex for better readability
  7. **Line Height**: Set within the 1.4-1.8 range
  8. **Letter Spacing**: Add 0.02-0.05em if characters feel too cramped
  9. Open the text shadow options in the Font Settings panel
  10. Set the shadow color to contrast with the background (dark background -> dark shadow, light background -> light shadow)
  11. Set Blur to a small value (2-4px)
  12. Start with low Alpha (0.3-0.5) and increase as needed
  13. Open the overlay options in the Background Settings panel
  14. Add a semi-transparent black overlay (when text is white) or white overlay (when text is black)
  15. Adjust Alpha within the 0.3-0.6 range to balance image visibility and text readability
  16. Preview in order: PC -> Tablet -> Smartphone
  17. Verify that text is not too small and lines are not too cramped on smartphones
  18. Adjust font sizes per device as needed
  19. Micro Text and Sub Text are typically set smaller and lighter than the main text to create a clear information hierarchy, but be careful not to make them so small they become unreadable.
  20. Micro Copy and Sub Copy are positioned outside the button, so they have a different background than the button interior. Check their readability against the page background.

Related Settings

関連設定

– [スタイル設定](../style/) – 文字色・背景色・ボーダー
– [フォント設定](../font/) – フォントファミリー・サイズ・太さ・行間
– [背景設定](../background/) – 背景画像・オーバーレイ
– [マイクロテキスト設定](../microtext/) – ボタン内上段テキスト
– [サブテキスト設定](../subtext/) – ボタン内下段テキスト

Related FAQ