This document discusses using vertical rhythm and modular scale principles in web design with Sass. It describes how vertical rhythm creates a consistent spacing relationship between stacked elements, and how a modular scale uses a common ratio to relate numeric values. The document recommends using these typographic rules with Sass functions and math to create a consistent user interface. It provides examples of how to set up and use a Sass toolkit called Typesettings to implement vertical rhythm and modular scale in a project.

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

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

3. “ 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

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

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

8. Benefits of
Using
Typographic
Systems

9. 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.

11. MakingVerticalRhythm
Easierto Implement&
Master
» Think of the web as the web and not
approach it the exact same way as print
design.

12. 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

14. 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

15. The Math & PropertiesAre
AlreadyFigured Out
» line height
» margin top & bottom
» padding top & bottom
» border top & bottom
» horizontal rule
» front size

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

17. 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

18. Howto Setup
» Using Bower (better way)
bower install typesettings --save-dev
» Copy/Paste works too (quick and dirty)

19. 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";

20. 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;

21. 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);
}

22. Live DemoTime
» Live Demo, I know...
» Doing it anyway :) http://codepen.io/
ianrose/professor/diKpn/

23. 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