Vertical
Rhythm &
Modular
ScaleCreatingaUIThatIs Based on
Typographic Rules Using Sass
and Math

Ian Rose
@rose_ian
DesigneratNBC News Digital
Follow along during the demo:
http://codepen.io/ianrose/professor/
diKpn/

“ Space intypographyis
liketime in music. Itis
infinitelydivisible, buta
fewproportional
intervals can be much
more usefulthana
limitless choice of
arbitraryquantities.”
Robert Bringhurst, The Elements of
Typographic Style

VerticalRhythm is
the relationship
ofthe height&
spacing of
vertically
stacked
elements.

Modular Scale isjust
asequence of
numbers related
to each other bya
common ratio.

Benefits of
Using
Typographic
Systems

1. Consistencyand
Patterns ForThe Users
2. CreatesaSystem of
Constraints forthe
Designer
Let math do the boring repetitive stuff
and free time & energy for the real
design challenges.

MakingVerticalRhythm
Easierto 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 & PropertiesAre
AlreadyFigured Out
» line height
» margin top & bottom
» padding top & bottom
» border top & bottom
» horizontal rule
» front size

SassToolsThatAlready
Exist
» Compass
» Bourbon
» Typeplate
» Typecsset
» Sassaparilla

Typesettings
YetAnother SassTypeToolkit(YASTToolkit)
» 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

Howto 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;

Skippingto
aButton
.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 DemoTime
» Live Demo, I know...
» Doing it anyway :) http://codepen.io/
ianrose/professor/diKpn/

AdditionalReadingand
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