Skip to main content

Why does my code snippet look hard to read, and how can I fix readability fast?

A practical checklist to improve readability using line numbers, header controls, spacing, and typography settings in the Style tab.

Written by Karan Bhakuni

If users are scanning your snippet on mobile or dense desktop layouts, readability settings matter more than visual style.

Quick readability checklist

Go to Style and adjust these in this order:

  1. Interface Toggles

    • Turn on Show Line Numbers for tutorials and debugging examples.

    • Keep Show Header Controls on when you want the snippet to feel familiar/dev-like.

  2. Typography & Spacing

    • Increase Padding if code feels cramped.

    • Set Font Size so text is readable without zoom.

    • Adjust Line Height to reduce visual crowding in long blocks.

  3. Color Palette

    • Pick a palette with clear contrast between:

      • background

      • container

      • accent

Recommended starting values

Use these as a baseline, then fine-tune:

  • Font Size: 14px to 16px

  • Line Height: 26px to 32px

  • Padding: 20px to 32px

When to change each setting

  • Users say text is tiny: increase font size first.

  • Code looks “jammed”: increase line height and padding.

  • Snippet blends into page background: switch to a higher-contrast color palette.

  • Tutorial steps reference specific lines: enable line numbers.

Did this answer your question?