Share
Embed
Slide 1
Slide 1 text
FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS
JOHN ATHAYDE @johnathayde RAILSCONF 2021
Slide 2
Slide 2 text
http://www.
fl
ickr.com/photos/michael-seljos/2073146716/
Slide 3
Slide 3 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 4
Slide 4 text
METICULOUS
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 7
Slide 7 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://www.pixelstech.net/article/1313756405-Web-Design-is-95%25-Typography
— Oliver Reichenstein
Slide 8
Slide 8 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The quick brown fox jumped over the lazy dog.
HELVETICA NEUE
Slide 9
Slide 9 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The quick brown fox jumped over the lazy dog.
COMIC SANS
Slide 10
Slide 10 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The quick brown fox jumped over the lazy dog.
IMPACT
Slide 11
Slide 11 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The quick brown fox jumped over the lazy dog.
SNELL ROUNDHAND
Slide 12
Slide 12 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The quick brown fox
jumped over the lazy dog.
BRANDON PRINTED TWO
Slide 13
Slide 13 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The
quick
brown
fox
jumped
over
the
lazy
dog.
BRANDON PRINTED TWO
Slide 14
Slide 14 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The
quick
brown
fox
jumped
over
the
lazy
dog.
BRANDON PRINTED TWO
Slide 15
Slide 15 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The
Quick Brown Fox
JUMPED OVER THE LAZY DOG
GOTHAM
CHRONICLE DISPLAY
Slide 16
Slide 16 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The
Quick Brown Fox
JUMPED OVER THE LAZY DOG
GOTHAM
CHRONICLE DISPLAY
Slide 17
Slide 17 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The
Quick Brown Fox
JUMPED OVER THE LAZY DOG
GOTHAM
CHRONICLE DISPLAY
Slide 18
Slide 18 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The quick brown fox jumped over the lazy dog.
Slide 19
Slide 19 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
The
Quick Brown Fox
JUMPED OVER THE LAZY DOG
GOTHAM
CHRONICLE DISPLAY
Slide 20
Slide 20 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
1 2 3
HISTORY
OF TYPE
LEARNING
TYPE &
THE WEB
APPLYING
TO OUR
APPS
Slide 21
Slide 21 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
A BRIEF HISTORY
OF EVERYTHING
(TYPOGRAPHIC)
Slide 22
Slide 22 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://en.wikipedia.org/wiki/History_of_writing#/media/File:Development_of_writing.jp
Slide 23
Slide 23 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://clevelandart.org/art/1942.152, CC0, https://commons.wikimedia.org/w/index.php?curid=77629894
Slide 24
Slide 24 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 25
Slide 25 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 26
Slide 26 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 27
Slide 27 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 28
Slide 28 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
NYC Wanderer (Kevin Eng) - originally posted to Flickr as Gutenberg Bible, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=9914015
Slide 29
Slide 29 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
By Daniel Ullrich, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=4141776
By Willi Heidelbach, CC BY 2.5, https://commons.wikimedia.org/w/index.php?curid=154912
Slide 30
Slide 30 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 31
Slide 31 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 32
Slide 32 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 33
Slide 33 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
“Typography”
Slide 34
Slide 34 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Typeface Font
A collection of glyphs, often
referred to as a font family
Speci
fi
c weight, size, and size
of a typeface
Slide 35
Slide 35 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
GILL SANS
ADOBE JENSON
Slide 36
Slide 36 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
ADOBE JENSON
GARAMOND PREMIERE
BODONI 72
CLARENDON
Slide 37
Slide 37 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
HELVETICA
FUTURA
GILL SANS
Slide 38
Slide 38 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
FETTE FRAKTUR
OPERATOR
FONT AWESOME
HOEFLER ORNAMENTS
Slide 39
Slide 39 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Used for emphasis, foreign language words and phrases,
titles of
fi
lms, books, magazines, etc. and written dialogue
to show thought vs spoken words.
SURVEYOR DISPLAY LIGHT
Slide 40
Slide 40 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://www.marksimonson.com/notebook/view/FakevsTrueItalics
Slide 41
Slide 41 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://www.marksimonson.com/notebook/view/FakevsTrueItalics
Slide 42
Slide 42 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://www.marksimonson.com/notebook/view/FakevsTrueItalics
Slide 43
Slide 43 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://graphicdesign.stackexchange.com/questions/75965/distinguishing-real-and-faux-bold-and-italics
Slide 44
Slide 44 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://graphicdesign.stackexchange.com/questions/75965/distinguishing-real-and-faux-bold-and-italics
Slide 45
Slide 45 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Tracking vs Kerning
T R A C K I N G
MUSEO SANS
Slide 46
Slide 46 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Tracking vs Kerning
https://blog.creatopy.com/kerning-typography/
Slide 47
Slide 47 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 48
Slide 48 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Kerning in CSS & JS
Slide 49
Slide 49 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
100
200
300
400
500
600
700
800
900
normal
bold
thin
extra-light / ultra-light
light
book / regular / roman
medium
semi-bold / demi-bold
bold
extra-bold / ultra-bold
black / heavy
https://drafts.csswg.org/css-fonts/#font-weight-numeric-values
Font Weights &
Common Names
Slide 50
Slide 50 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://drafts.csswg.org/css-fonts/#font-weight-numeric-values
Font Weights: Missing Weights
When a weight is missing, it will substitute a nearby weight.
Slide 51
Slide 51 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Font Weights: Space Between
Good rule: Separate by at least one weight.
300 400 500 100 400 700
Slide 52
Slide 52 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Font Stretch
Traditionally separate typefaces in one family.
Slide 53
Slide 53 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://css-tricks.com
Font Scaling
Slide 54
Slide 54 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://www.modularscale.com
Font Scaling
Traditional Print Scale
8pt
9pt
10pt
12pt
14pt
18pt
24pt
36pt
48pt
72pt
Golden Ratio Scale
13/23
16/27
20/33
26/42
33/52
42/65
Arial 16px @ 600px width
(Font size/line height in px)
Modular Scale
0.296em
0.444em
0.667em
1em
1.5em
2.25em
3.375em
5.063em
7.594em
11.391em
https://grtcalculator.com/
Slide 55
Slide 55 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Widows
&
Orphans
https://indesignskills.com/tutorials/widows-and-orphans/
Slide 56
Slide 56 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Widows & Orphans (+ hyphenation)
• Don’t hyphenate more than 3
consecutive lines
• Orphans says the minimum
number of lines left on a page
• Widows is the minimum number
of lines.
• Mostly important for print css
• Not exactly the same as in print
applications like InDesign.
Slide 57
Slide 57 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 58
Slide 58 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
— Tobias Frere-Jones
Slide 59
Slide 59 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Legibility refers to how easily we can
recognize a typeface. Speci
fi
cally, how easy
it is to discern the letters and distinguish
them from each other—as in an eye exam.
— French, Nigel. InDesign Type; Professional Typography with Adobe InDesign, Fourth Edition
Readability refers to the ease with which we
comprehend text by recognizing words and
phrases as shapes. It is a product of how the
type is set and the responsibility of the
typographer.
Slide 60
Slide 60 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
InDesign Type; Professional Typography with Adobe InDesign, Fourth Edition
— Nigel French
Slide 61
Slide 61 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
• Leading/line-height
• Measure (length of line)
• Alignment (left/center/justify)
• Margins
• Medium (print, web, mobile)
• Reading conditions
Factors affecting readability
Slide 62
Slide 62 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
—David Carson
Slide 63
Slide 63 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Picking Fonts for Screen
Medium weight
Stroke modulation
Serif or Sans?
Enlarged apertures
X-height
Embeddable license if needed (app, epub)
Rules from Nigel French
Slide 64
Slide 64 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
It was the best of times, it was the
worst of times, it was the age of
wisdom, it was the age of foolishness,
it was the epoch of belief, it was the
epoch of incredulity, it was the season
of Light, it was the season of
Darkness, it was the spring of hope, it
was the winter of despair, we had
everything before us, we had nothing
before us, we were all going direct to
Heaven, we were all going direct the
other way—in short, the period was so
far like the present period, that some
of its noisiest authorities insisted on its
being received, for good or for evil,
It was the best of times, it was the
worst of times, it was the age of
wisdom, it was the age of foolishness,
it was the epoch of belief, it was the
epoch of incredulity, it was the season
of Light, it was the season of
Darkness, it was the spring of hope, it
was the winter of despair, we had
everything before us, we had nothing
before us, we were all going direct to
Heaven, we were all going direct the
other way—in short, the period was so
far like the present period, that some
of its noisiest authorities insisted on its
being received, for good or for evil, in
the superlative degree of
It was the best of times, it was the worst of
times, it was the age of wisdom, it was the
age of foolishness, it was the epoch of
belief, it was the epoch of incredulity, it
was the season of Light, it was the season
of Darkness, it was the spring of hope, it
was the winter of despair, we had
everything before us, we had nothing
before us, we were all going direct to
Heaven, we were all going direct the other
way—in short, the period was so far like
the present period, that some of its noisiest
authorities insisted on its being received,
for good or for evil, in the superlative
degree of comparison only.
Open Sans 30 / 39 More Pro 30 / 39 Times New Roman 30 / 39
Slide 65
Slide 65 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Surveyor Text Book Small Caps
Surveyor Display Light
Surveyor Text Book Italic
Gotham Book Small Caps
Gotham Narrow Black
Gotham Book Italic
Slide 66
Slide 66 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Gotham Bold Small Caps
Surveyor Display Light
Gotham Book Italic
Surveyor Text Book Small Caps
Gotham Narrow Black
Surveyor Text Book Italic
Slide 67
Slide 67 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://www.typography.com/blog/tag/Pairing%20Fonts
Slide 68
Slide 68 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 69
Slide 69 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
@font-face
Slide 70
Slide 70 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Google Fonts/Externally Hosted
Slide 71
Slide 71 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Pre-Rails 6
con
fi
g/application.rb:
Slide 72
Slide 72 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
font-url/font-path
Somewhere inside your SCSS:
Slide 73
Slide 73 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
DRY it up
Slide 74
Slide 74 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
DRY it up
Slide 75
Slide 75 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Webpacker
Slide 76
Slide 76 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 77
Slide 77 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/
OpenType_fonts_guide
The Source.
(Well, it’s easier to read than the actual W3C Spec)
Slide 78
Slide 78 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Number Types
Tabular Lining
Tabular Old Style
Proportional Old Style
Proportional Lining
Slide 79
Slide 79 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Number Types
Slide 80
Slide 80 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
“Text Transform”
https://techstacker.com/fake-small-caps-vs-real-small-caps/
Slide 81
Slide 81 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
“Text Transform”
Slide 82
Slide 82 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
“Text Transform”
Slide 83
Slide 83 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Ex Ponto Pro
Contextual Alternatives
Poem Script
Sample from https://www.fontshop.com/families/poem-script
Slide 84
Slide 84 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
DIN Pro
Contextual Alternatives
Slide 85
Slide 85 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Ligatures
Adobe Jenson Pro
Slide 86
Slide 86 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Enabling ligatures & contextual alternates
Slide 87
Slide 87 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Stylistic Sets
“Stylistic sets are a feature that makes it easier to use a
font’s alternate characters. Instead of leaving it to the user
to manually replace every incidence of a character with a
desired alternate — replacing a lowercase A with an
alternate form, for example — typeface designers can add
a stylistic set to a font that allows users to select an entire
range of text, and apply this one kind of substitution.”
https://www.typography.com/faq/157
Slide 88
Slide 88 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Stylistic Sets
Slide 89
Slide 89 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 90
Slide 90 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Grid Systems
Slide 91
Slide 91 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
— Josef Müller-Brockmann
Slide 92
Slide 92 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
What is a baseline grid?
Slide 93
Slide 93 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Hard PX vs EM
Slide 94
Slide 94 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 95
Slide 95 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://madebymike.github.io/html5-periodic-table/
Slide 96
Slide 96 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
Slide 97
Slide 97 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 98
Slide 98 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://github.com/wearebraid/griddle
Slide 99
Slide 99 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
Slide 100
Slide 100 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
Slide 101
Slide 101 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
Slide 102
Slide 102 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
John Athayde
A Designer & Permaculturist from Charlottesville, Virginia
Member since 14 Dec 2009
John Athayde
A Designer & Permaculturist from Charlottesville, Virginia
Member since 14 Dec 2009
Slide 103
Slide 103 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
John Athayde
A Designer & Permaculturist from Charlottesville, Virginia
Member since 14 Dec 2009
John Athayde
A Designer & Permaculturist from Charlottesville, Virginia
Member since 14 Dec 2009
Slide 104
Slide 104 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
It was the best of times, it was the worst of
times, it was the age of wisdom, it was the
age of foolishness, it was the epoch of
belief, it was the epoch of incredulity, it
was the season of Light, it was the season
of Darkness, it was the spring of hope, it
was the winter of despair, we had
everything before us, we had nothing
before us, we were all going direct to
Heaven, we were all going direct the other
way—in short, the period was so far like
the present period, that some of its noisiest
authorities insisted on its being received,
for good or for evil, in the superlative
degree of comparison only.
FOUT
Flash of Unstyled Text
Slide 105
Slide 105 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
It was the best of times, it was the
worst of times, it was the age of
wisdom, it was the age of foolishness,
it was the epoch of belief, it was the
epoch of incredulity, it was the season
of Light, it was the season of
Darkness, it was the spring of hope, it
was the winter of despair, we had
everything before us, we had nothing
before us, we were all going direct to
Heaven, we were all going direct the
other way—in short, the period was so
far like the present period, that some
of its noisiest authorities insisted on its
being received, for good or for evil, in
the superlative degree of
FOUT
Flash of Unstyled Text
Slide 106
Slide 106 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
“Skeleton Screens”
Courtesy Joe Johnston / @merhl https://twitter.com/merhl/status/694259963225587712
Slide 107
Slide 107 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
• Leading/line-height
• Measure (length of line)
• Alignment (left/center/justify)
• Margins
• Medium (print, web, mobile)
• Reading conditions
Factors affecting readability
Refresher!
Slide 108
Slide 108 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui of
fi
cia deserunt mollit
anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui of
fi
cia deserunt mollit
anim id est laborum.
Slide 109
Slide 109 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui of
fi
cia deserunt mollit
anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui of
fi
cia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui of
fi
cia deserunt mollit anim id est laborum.
Measure
60
100
130
Target: ~75 characters
Slide 110
Slide 110 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Measure
Slide 111
Slide 111 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui of
fi
cia deserunt mollit anim id est laborum.
Measure +
Line-height
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui of
fi
cia deserunt mollit anim id est laborum.
Slide 112
Slide 112 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Legibility
Georgia Charcuterie Block
Slide 113
Slide 113 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 114
Slide 114 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Responsive/Fluid Type
https://piccalil.li/tutorial/
fl
uid-typography-with-css-clamp
Slide 115
Slide 115 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Responsive/Fluid Type
https://piccalil.li/tutorial/
fl
uid-typography-with-css-clamp
Slide 116
Slide 116 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Hard to read Better
Highest Contrast
Hard to read Better
Contrast/Figure-Ground
Slide 117
Slide 117 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
(white space)
Slide 118
Slide 118 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Label
Label
Form field length hinting
Slide 119
Slide 119 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 120
Slide 120 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
It was the best of times, it was the
worst of times, it was the age of
wisdom, it was the age of foolishness,
it was the epoch of belief, it was the
epoch of incredulity, it was the season
of Light, it was the season of
Darkness, it was the spring of hope, it
was the winter of despair, we had
everything before us, we had nothing
before us, we were all going direct to
Heaven, we were all going direct the
other way—in short, the period was so
far like the present period, that some
of its noisiest authorities insisted on its
being received, for good or for evil, in
the superlative degree of
Paragraph & Character
• Paragraph styles a
ff
ect entire
block one at a time. We’d apply
this to the ‘p’ tag, typically.
• Character styles are inline
elements, and help create
uniformity across large chunks
of text (or multiple articles)
Slide 121
Slide 121 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Start with a base
Slide 122
Slide 122 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
abbr, i, b, strong, em, dfn, cite, time
And many more!
Slide 123
Slide 123 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 124
Slide 124 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 125
Slide 125 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 126
Slide 126 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 127
Slide 127 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 128
Slide 128 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 129
Slide 129 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 130
Slide 130 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 131
Slide 131 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 132
Slide 132 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 133
Slide 133 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Where to Begin?
Slide 134
Slide 134 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
https://getbootstrap.com/docs/5.0/content/typography/
Slide 135
Slide 135 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 136
Slide 136 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 137
Slide 137 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 138
Slide 138 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 139
Slide 139 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 140
Slide 140 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 141
Slide 141 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 142
Slide 142 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 143
Slide 143 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 144
Slide 144 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 145
Slide 145 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
@font-feature-values
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values
Slide 146
Slide 146 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 147
Slide 147 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 148
Slide 148 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Web Browser Support for Color Fonts
Support Supported formats Comments
Microsoft Edge SVG SBIX COLR CBDT Since version 38 on Windows 10
Safari SVG SBIX COLR Since version 12, macOS 10.14 & iOS 12
Firefox SVG COLR Since version 26
Chrome COLR CBDT
Internet Explorer COLR Only on Windows 8.1
Opera COLR Only on Windows
Source: www.colorfonts.wtf
Slide 149
Slide 149 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
• Harder to read/accessibility concerns
• Massive
fi
le size to load the entire font (one weight)
• Poor cross-browser support
• Color scheme encoded into the font
Downsides of Color Fonts
Slide 150
Slide 150 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 151
Slide 151 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 152
Slide 152 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
Slide 156
Slide 156 text
TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE | @johnathayde
www.power
fl
eet.com
www.meticulous.com
www.developerux.com
@johnathayde
[email protected]
GitHub.com/jathayde/type_is_design