Vertical Rhythm and Modular Scale: Typesettings

1,772 views

Published on

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

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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: http://codepen.io/ianrose/professor/ 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) » http://typesettings.io - 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 :) http://codepen.io/ ianrose/professor/diKpn/
  19. 19. 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

×