Skip to content
Illustration

Textures that survive the isometric skew

Patterns that still read after a rotateX and a rotateZ.

Typography on a tilted plane is readable only in small doses. A single word on the side of a block looks great; a paragraph set at an angle is exhausting. Keep running text flat and upright, and save the skewed type for labels, numbers and the occasional headline where the shape of the word matters more than speed.

3 imagesJPG, 1200 × 1200

Download ZIP 756 KB

SVG is often the better choice for complex scenes. CSS cubes are fun to build and easy to animate, but a city block made of hundreds of divs is hard to change and heavy to render. We draw the static parts in SVG, keep the interactive blocks in CSS, and layer the two together.

Share

Written by

Priya Raman

Priya covers accessibility and tooling. She reviews every illustration on the site with a screen reader before it ships.

All 18 posts by Priya Raman

2 comments

  1. Soren Dahl

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

    Reply to Soren Dahl
  2. June Park

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

    Reply to June Park

Leave a comment

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