SlideShare a Scribd company logo
1 of 23
Download to read offline
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

More Related Content

Similar to Vertical Rhythm and Modular Scale: Typesettings

Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersMelvin John
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap PresentationDuy Do Phan
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your StylesheetGary Homidas
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Graphic Design For Web
Graphic Design For WebGraphic Design For Web
Graphic Design For WebDeniz Gökçe
 
Typography On The Web
Typography On The WebTypography On The Web
Typography On The WebJustin Seiter
 
.Net Dev Summit 2020 - What's new and next for Xamarin developers
.Net Dev Summit 2020 - What's new and next for Xamarin developers.Net Dev Summit 2020 - What's new and next for Xamarin developers
.Net Dev Summit 2020 - What's new and next for Xamarin developersJames Montemagno
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on RailsAvi Kedar
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sassnyccamp
 
Responsive web design
Responsive web designResponsive web design
Responsive web designSean Wolfe
 
Future-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWDFuture-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWDDigital Surgeons
 
Introduction to Responsive Web Development
Introduction to Responsive Web DevelopmentIntroduction to Responsive Web Development
Introduction to Responsive Web DevelopmentNikhil Baby
 
Responsive with SASS and compass
Responsive with SASS and compassResponsive with SASS and compass
Responsive with SASS and compassDavid Malinowicz
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez
 

Similar to Vertical Rhythm and Modular Scale: Typesettings (20)

Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap Presentation
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your Stylesheet
 
Grid system introduction
Grid system introductionGrid system introduction
Grid system introduction
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Graphic Design For Web
Graphic Design For WebGraphic Design For Web
Graphic Design For Web
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
 
Typography On The Web
Typography On The WebTypography On The Web
Typography On The Web
 
.Net Dev Summit 2020 - What's new and next for Xamarin developers
.Net Dev Summit 2020 - What's new and next for Xamarin developers.Net Dev Summit 2020 - What's new and next for Xamarin developers
.Net Dev Summit 2020 - What's new and next for Xamarin developers
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Going responsive
Going responsiveGoing responsive
Going responsive
 
Future-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWDFuture-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWD
 
Future proof rwd
Future proof rwdFuture proof rwd
Future proof rwd
 
Introduction to Responsive Web Development
Introduction to Responsive Web DevelopmentIntroduction to Responsive Web Development
Introduction to Responsive Web Development
 
Responsive with SASS and compass
Responsive with SASS and compassResponsive with SASS and compass
Responsive with SASS and compass
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 

Recently uploaded

Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design1508 A/S
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfDuyDo100
 
Digital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdfDigital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdfOnecity
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
The concept of motion graphics and its applications.
The concept of motion graphics and its applications.The concept of motion graphics and its applications.
The concept of motion graphics and its applications.WeatherOfficialProdu
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURECHANDRAKIRTISINGH
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfAlexandra Plesner
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyIsadora Agency
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjjoshuaclack73
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement 210303105569
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...Amil baba
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Cloud99 Cloud
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building DesignResDraft
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证ugzga
 

Recently uploaded (20)

Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
Digital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdfDigital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdf
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
The concept of motion graphics and its applications.
The concept of motion graphics and its applications.The concept of motion graphics and its applications.
The concept of motion graphics and its applications.
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 

Vertical Rhythm and Modular Scale: Typesettings