"Getting web typography just right with SASS" – February 10, 2015 (Talk at Upfront 54)
Transcript of "Getting web typography just right with SASS" – February 10, 2015 (Talk at Upfront 54)
Ferdinand Vogler
@ferdinandvogler
intro__upfront.scss Saved: February 10, 2015
Getting web typography { just right with SASS}
“Space in typography is like time in music. It is infinitely divisible, but a few proportional
intervals can be much more useful than a limitless choice of arbitrary quantities.”
— Robert Bringhurst “The Elements of Typographic Style“
readabilityDo I want to read it?
legibilityHow well can I read it?
Not everybody can see type, but everyone can feel it.
Typography rules ev Upfront is a monthly
Do I even want to rea
line height
font size
Typography rules everything around me. Upfront is a monthly meetup.
Do I even want to read this?
measure
font size
line height measure
font size line height measure
“[…] limit yourself, at first, to a modest set of distinct and related intervals.”
— Robert Bringhurst “The Elements of Typographic Style“
Typographic symphony
Typographic symphony
Typographic symphony
Typographic symphonyTypographic symphony
24 pt
15 pt
39 pt
62 pt
102 pt
1.618 BASE
$golden 1:1.618 1.618$double-octave 1:4 4$major-twelfth 1:3 3$major-eleventh 3:8 2.667$major-tenth 2:5 2.5$octave 1:2 2$major-seventh 8:15 1.875$minor-seventh 9:16 1.778$major-sixth 3:5 1.667$minor-sixth 5:8 1.6$fifth 2:3 1.5$augmented-fourth 1:√2 1.414$fourth 3:4 1.333$major-third 4:5 1.25$minor-third 5:6 1.2$major-second 8:9 1.125$minor-second 15:16 1.067
github.com/at-import/modular-scale
Vertical Rhythmcompass-style.org
Modular Scalegithub.com/at-import/modular-scale
Ferdinand:~ $fv gem install compassFerdinand:~ $fv compass create my-sample-project
Terminal
@import “compass“;
SCSS
@import “compass/typography/vertical_rhythm“;
Install Compass
Ferdinand:~ $fv gem install modular-scale
Terminal
require ‘modular-scale‘
config.rb
@import “modular-scale“;
SCSS
Install Modular Scale
Modular scale @import “modular-scale“; $ms-base: 1em; $ms-ratio: $golden; p { font-size: ms(0);}
h1 { font-size: ms(6);}
SCSS
Typographic symphony
Typographic symphony
Typographic symphony
Typographic symphonyTypographic symphony
ms(0)
ms(-1)
ms(1)
ms(2)
ms(3)
$ms-base
Compass Vertical Rhythm
html { font-size: 100%; line-height: 1.5em;}
p { font-size: 1em line-height: 1.5em;}
h1 { font-size: 3.5625em line-height: 1.26316em;}
Vertical rhythm @import “compass“; $base-font-size: 16px; $base-line-height: 24px;
@include establish-baseline; p { @include adjust-font-size-to($base-font-size);}
h1 { @include adjust-font-size-to(57px);}
SCSS CSS
html { font-size: 100%; line-height: 1.5em;}
p { font-size: 1em line-height: 1.5em;}
h1 { font-size: 17.94427266em; line-height: 1.08669771em;}
…both @import “compass“; @import “modular-scale“;
$ms-base: 16px;$ms-ratio: $golden; $font-size-normal: ms(0);$font-size-large: ms(6); $base-font-size: ms(0); $base-line-height: $base-font-size * 1.5;
@include establish-baseline; p { @include adjust-font-size-to($font-size-normal);}
h1 { @include adjust-font-size-to($font-size-large);}
SCSS CSS
Compass Vertical Rhythm compass-style.org/reference/compass/typography/vertical_rhythm
font size line height measure
fluid layoutAlways be flexible
adaptive layoutSet fixed breakpoints
„Yes,“ cried Passepartout, warmly; „at the pagoda of Pillaji, where they were on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
45 75
„Yes,“ cried Passepartout, warmly; „at the pagoda of Pillaji, where they were on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
66
„Yes,“ cried Passepartout, warmly; „at the pa*goda of Pillaji, where they we*re on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
„Yes,“ cried Passepartout, warmly; „at the pa*goda of Pillaji, where they we*re on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
650px
„Yes,“ cried Passepartout, warmly; „at the pa*goda of Pillaji, where they we*re on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
@media screen and (min-width: 650px) { font-size: 1em + 0.2em;}
SCSS
650px
„Yes,“ cried Passepartout, warmly; „at the pagoda of Pillaji, where they were on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
„Yes,“ cried Passepartout, warmly; „at the pagoda of Pillaji, where they were on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
„Yes,“ cried Passepartout, warmly; „at the pagoda of Pillaji, where they were on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
„Yes,“ cried Passepartout, warmly; „at the pagoda of Pillaji, where they were on the point of burning their victim.“ The judge stared with astonishment, and the priests were stupefied. „What victim?“ said Judge Obadiah. „Burn whom? In Bombay itself?“ „Bombay?“ cried Passepartout. „Certainly. We are not talking of the pagoda of Pillaji, but of the pagoda of Malabar Hill, at Bombay.“ „And as a proof,“ added the clerk, „here are the desecrator‘s very shoes, which he left behind him.“
Digital media is taking control away.
Recap
· Font size, line height and measure = harmony· Readability and legibility first· Never work without a typographic scale· Let the computer do the math· Don‘t solely rely on numbers
ToolsModular scalegithub.com/at-import/modular-scale
Vertical rhythmcompass-style.org
Type Scaletype-scale.com
ReadingThe Elements of Typographic Style – Applied to the webwebtypography.net
@ferdinandvogler
Fluid Typetrentwalton.com/2012/06/19/fluid-type
Compose to a vertical rhythm24ways.org/2006/compose-to-a-vertical-rhythm
A more modern scale for web typographytypecast.com/blog/a-more-modern-scale-for-web-typography