Skip to content
Typography

Keep isometric text short

Tilted words are hard to read. Use them for labels, not sentences.

Reading isometric art is a learned skill, and most readers have learned it from games and instruction manuals. That shared vocabulary is what makes the style so friendly. It also means readers notice immediately when something is off, even if they cannot say why, so consistency matters more than detail.

Your toolkit

  • Triangle-grid paper and a soft pencil
  • A browser with a Layers panel
  • A snippets file of finished scenes
Share

Written by

Sam Whitfield

Sam makes tile-based games in the evenings and brings the sorting tricks back to the blog. Currently building a very small harbour.

All 17 posts by Sam Whitfield

12 comments

  1. Hana Sato

    Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.

    Reply to Hana Sato
  2. Tess Walsh

    The paper cube exercise sounds fun. Are the templates available somewhere?

    Reply to Tess Walsh
    1. Kofi Mensah

      Yes, container queries work well; we will cover them soon.

      Reply to Kofi Mensah
  3. Pia Jensen

    The tip about naming faces instead of colours saved our design system a lot of pain.

    Reply to Pia Jensen
  4. Bea Kowalski

    Has anyone tried this with container queries? Feels like a good fit.

    Reply to Bea Kowalski
  5. Eli Novak

    I tried this on an old iPad and one of the faces flickers on hover. Any idea why?

    Reply to Eli Novak
  6. Rosa Medina

    We used the grid background on our docs site and it looks great with a dark theme too.

    Reply to Rosa Medina
  7. Mateo Rossi

    Bookmarked. The table alone is worth it.

    Reply to Mateo Rossi
  8. Lena Vogel

    Thanks for covering reduced motion. It is so often an afterthought.

    Reply to Lena Vogel
    1. Sam WhitfieldAuthor

      Glad it helped. The values are in the colour ratios reference.

      Reply to Sam Whitfield
      1. Sam WhitfieldAuthor

        The templates are in the downloads section of the reference post.

        Reply to Sam Whitfield
    2. Sam WhitfieldAuthor

      Thanks! A follow-up is already in the drafts.

      Reply to Sam Whitfield

Leave a comment

Your email address won’t be published. Required fields are marked.