"Getting web typography just right with SASS" – February 10, 2015 (Talk at Upfront 54)

transcript

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 symphonyTypographic symphony

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“;

@import “compass/typography/vertical_rhythm“;

Install Compass

Ferdinand:~ $fv gem install modular-scale

Terminal

require ‘modular-scale‘

config.rb

@import “modular-scale“;

Install Modular Scale

Modular scale @import “modular-scale“; $ms-base: 1em; $ms-ratio: $golden; p { font-size: ms(0);}

h1 { font-size: ms(6);}

Typographic symphony

Typographic symphonyTypographic symphony

ms(-1)

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

„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;}

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

· 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

"Getting web typography just right with SASS" – February 10, 2015 (Talk at Upfront 54)

Design