Vertical Rhythm & Modular ScaleCreating a UI That Is Based on Typographic Rules Using Sass and Math

Ian Rose@rose_ianDesigner at NBC News Digital

Follow along during the demo:http://codepen.io/ianrose/professor/diKpn/

“ Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.”Robert Bringhurst, The Elements of Typographic Style

Vertical Rhythm is the relationship of the height & spacing of vertically stacked elements.

Modular Scale is just a sequence of numbers related to each other by a common ratio.

Benefits of Using Typographic Systems

1. Consistency and Patterns For The Users2. Creates a System of Constraints for the DesignerLet math do the boring repetitive stuff and free time & energy for the real design challenges.

Making Vertical Rhythm Easier to Implement & Master» Think of the web as the web and not

approach it the exact same way as print design.

The Baseline» Use a small vertical unit to create the

rhythm

» Typically just line-height is too large a value

» All UI elements can benefit from following rhythm & modular scale

» Don't stress about where on the baseline

Browser Rounding» Accept browsers

don't round numbers the same way

» A user is not comparing your site in Chrome vs Firefox

» Consistency within an session/experience is the important part

The Math & Properties Are Already Figured Out» line height

» margin top & bottom

» padding top & bottom

» border top & bottom

» horizontal rule

» front size

Sass Tools That Already Exist» Compass

» Bourbon

» Typeplate

» Typecsset

» Sassaparilla

TypesettingsYet Another Sass Type Toolkit (YAST Toolkit)

» Sass as the only dependency - node-sass

» Uses Ems for sizes - sizing on a root & component level

» Unit-less line height - best practice

» Borders in pixels

» Vanilla CSS with Sass Functions over Mixins (Teams)

» http://typesettings.io - PRs Welcome

How to Setup» Using Bower (better way)

bower install typesettings --save-dev

» Copy/Paste works too (quick and dirty)

Main.scss@import "_config.scss"; /* Your Sassy Settings For Your Site */@import "_normalize.scss"; /* Your Normalize or Reset */@import "../../bower_components/typesettings/_typesettings.scss";"

/* Your Modules */@import "modules/_site-logo.scss";@import "modules/_story-meta.scss";@import "modules/_flag.scss";@import "modules/_timestamp.scss";@import "modules/_button.scss";

Config.scss/* Has default settings that can be changed. */

$font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;$font-serif: Georgia, 'Times New Roman', serif;$font-mono: 'Lucida Console', Monaco, monospace;$text-color: #000;

$base-vertical-unit: 6px;

$base-line-multi: 4;

$base-font-size: 16px;

$ms-ratio: 1.414;

$paragraph-indent: true;$paragraph-justify: true;

$load-typesetted: true;

Skipping to a Button.btn_default { padding-right: emRhythm(2, $ms-down1); padding-left: emRhythm(2, $ms-down1); @include rhythmBorderTop(2px, 1, $ms-down1); @include rhythmBorderBottom(2px, 1, $ms-down1);}

Live Demo Time» Live Demo, I know...

» Doing it anyway :) http://codepen.io/ianrose/professor/diKpn/

Additional Reading and Code» http://www.smashingmagazine.com/

2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

» https://medium.com/front-end-development/8f433689736f

» http://codepen.io/ianrose/pen/diKpn