Kraken-Sass

← Kraken-Sass Home

Typography

Kraken uses relative sizing (ems and %, not px) for everything.

The body has a base font-size of 106.25%, which is 17px on browsers with default font settings. All other sizes are in ems. Changing the font-size on the body element will adjust the typographical scale for the entire site.

(New to relative sizing? Learn more.)

The font-family on the body is "Helvetica Neue", Arial, sans-serif. This sets the typeface for the entire site. Adjust as needed.

The typographic scale was built using Iain Lamb's Typograph app.

Text Basics

Default text.
Muted text.
Small text.
Tall text.
Hyperlinks.
Bold and italics.

                
            

Or with Scss @extend

                
            

Note: Because Kraken uses relative sizing, you should always apply .text-tall and .text-small classes to a <span> element and not directly to a <p>. Otherwise, your spacing will get all messed up.

This
                        
                    
Not This
                        
                    

Getting Started

Advanced