Soo — A layered typeface

Stitch thread onto a patch. Stack two fonts, pick two colors, and the letters come together.

3Fonts
2Layers
∞Colors

Soo comes in three fonts. Every glyph has the same width in all three, so when you stack them they line up exactly.

AAA

Wappen

The base patch, with needle holes where the thread will pass.

+
AAA

Thread

The thread that links hole to hole, set on top in a second color.

=
AAA

Stacked

Both layers together. For single-color use, there is Completed.

26 Latin capitals, 10 figures, and basic punctuation. Lowercase input shows the same shapes as the capitals.

The patch and thread colors are set in CSS, not fixed in the font. Pick a pair — the title above changes with it.

STITCH BY STITCH

Click the text and type your own

Load both fonts, place the same text in the same spot, and give each layer its own color.


        

        

          


        

      

      

        
01Use a numeric line-heightThe two fonts have slightly different vertical metrics. With normal, Safari shifts the thread on wrapped lines.

        
02Set letter-spacing on the parentApply it to the wrapper so both layers get the same value.

        
03Hide the thread layerAdd aria-hidden="true" to the Thread layer so screen readers don’t read the text twice.

      

  


  
  
  

    

      

        
繡 /SU/

        
The name comes from the Korean word su (繡), embroidery: making patterns on cloth with thread. Join the holes in the patch one by one, and the letter is complete.
It is also the soo in my daughter’s name, LeeSoo.

      

      
Download Soo