Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vertical Rhythm and Modular Scale: Typesettings

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

  • Login to see the comments

Vertical Rhythm and Modular Scale: Typesettings

  1. 1. Vertical Rhythm & Modular ScaleCreatingaUIThatIs Based on Typographic Rules Using Sass and Math
  2. 2. Ian Rose @rose_ian DesigneratNBC News Digital Follow along during the demo: diKpn/
  3. 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. 4. VerticalRhythm is the relationship ofthe height& spacing of vertically stacked elements.
  5. 5. Modular Scale isjust asequence of numbers related to each other bya common ratio.
  6. 6. Benefits of Using Typographic Systems
  7. 7. 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.
  8. 8. MakingVerticalRhythm Easierto Implement& Master » Think of the web as the web and not approach it the exact same way as print design.
  9. 9. 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
  10. 10. 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
  11. 11. The Math & PropertiesAre AlreadyFigured Out » line height » margin top & bottom » padding top & bottom » border top & bottom » horizontal rule » front size
  12. 12. SassToolsThatAlready Exist » Compass » Bourbon » Typeplate » Typecsset » Sassaparilla
  13. 13. 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) » - PRs Welcome
  14. 14. Howto Setup » Using Bower (better way) bower install typesettings --save-dev » Copy/Paste works too (quick and dirty)
  15. 15. 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";
  16. 16. 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;
  17. 17. 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); }
  18. 18. Live DemoTime » Live Demo, I know... » Doing it anyway :) ianrose/professor/diKpn/
  19. 19. AdditionalReadingand Code » 2012/12/17/css-baseline-the-good-the- bad-and-the-ugly/ » development/8f433689736f »