Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Responsive typography
Gunnar Bittersmann
July 08, 2019
Programming
0
32
Responsive typography
Gunnar Bittersmann
July 08, 2019
Tweet
Share
More Decks by Gunnar Bittersmann
See All by Gunnar Bittersmann
gunnarbittersmann
0
5
gunnarbittersmann
0
2
gunnarbittersmann
0
7
gunnarbittersmann
0
47
gunnarbittersmann
0
29
gunnarbittersmann
0
14
gunnarbittersmann
1
33
gunnarbittersmann
0
36
gunnarbittersmann
2
23
Other Decks in Programming
See All in Programming
kaz29
2
130
quannt
1
110
ykpythemind
0
160
nerocrux
3
1.7k
shiba6v
0
210
rgoswami
1
110
y__mattu
0
230
scrpgil
0
110
jschaedl
2
110
bkuhlmann
2
330
77web
2
2.6k
deepu105
1
200
Featured
See All Featured
holman
448
140k
malarkey
193
8.7k
chriscoyier
683
180k
jonyablonski
22
1.3k
eitanlees
116
10k
geeforr
333
29k
hursman
108
9.3k
schacon
147
6.7k
shpigford
166
19k
stephaniewalter
262
11k
orderedlist
PRO
330
36k
brianwarren
82
4.8k
Transcript
RESPONSIVE TYPOGRAPHY
LEGIBLE READABLE
LEGIBLE 1Il Gill Sans 1Il Helvetica 1Il Franklin Gothic
FS 1Il Source Sans Pro
READABLE Schriftgröße Zeilenlänge Zeilenabstand 16px 1em 65 Zeichen/Zeile 1.5
body { font-size: 1rem } h1 { font-size: 1.625rem }
h2 { font-size: 1.375rem }
body { font-size: 1rem } h1 { font-size: 1.625rem }
h2 { font-size: 1.375rem } @media (min-width: 22.5em) { body { font-size: 1.125rem } } @media (min-width: 45em) { body { font-size: 1.25rem } }
body { font-size: 1rem } h1 { font-size: 1.625rem }
h2 { font-size: 1.375rem } @media (min-width: 22.5em) { body { font-size: 1.125rem } h1 { font-size: 1.778rem } h2 { font-size: 1.333rem } } @media (min-width: 45em) { body { font-size: 1.25rem } h1 { font-size: 1.8rem } h2 { font-size: 1.4rem } }
body { font-size: var(--medium) } h1 { font-size: var(--x-large) }
h2 { font-size: var(--large) } :root { --medium: 1rem; --large: 1.375rem; --x-large: 1.625rem; } @media (min-width: 22.5em) { :root { --medium: 1.125rem; --large: 1.778rem; --x-large: 1.333rem; } } @media (min-width: 45em) { :root { --medium: 1.25rem; --large: 1.8rem; --x-large: 1.43rem; } }
body { font-size: 1.25rem; font-size: var(--medium); } h1 { font-size:
1.8rem; font-size: var(--x-large); } h2 { font-size: 1.4rem; font-size: var(--large); } :root { --medium: 1rem; --large: 1.375rem; --x-large: 1.625rem; } @media (min-width: 22.5em) { :root { --medium: 1.125rem; --large: 1.778rem; --x-large: 1.333rem; } } @media (min-width: 45em) { :root { --medium: 1.25rem; --large: 1.8rem; --x-large: 1.43rem; } }
$type-config = { breakpoint: 0 font-sizes: { x-small: 12 1.3
button: 13 1 small: 14 1.3 medium: 16 1.4 large: 22 1.2 x-large: 26 1.2 } },{ breakpoint: 360 font-sizes: { x-small: 12 1.3 button: 14 1 small: 16 1.3 medium: 18 1.5 large: 24 1.2 x-large: 32 1.2 } },{ breakpoint: 720 font-sizes: { x-small: 12 1.3 button: 14 1 small: 16 1.3
$fallback-font-sizes = $type-config[2][font-sizes] $px-factor = 16 set-font-size($font-size, importance = false)
font-size: ($fallback-font-sizes[$font-size][0]/$px-factor)rem (importance is important ? !important :) font-size: s('var(--font-size-%s, %s)', $font-size, ($fallback-font-sizes[$font-size][0]/ $px-factor)rem) (importance is important ? !important :) set-line-height($font-size, importance = false) line-height: $fallback-font-sizes[$font-size][1] (importance is important ? !important :) line-height: s('var(--line-height-%s, %s)', $font-size, $fallback-font-sizes[$font-size][1]) (importance is important ? !important :) set-font-size-line-height($font-size, importance = false) set-font-size($font-size, importance) set-line-height($font-size, importance) :root for $screen-size in $type-config @media (min-width: ($screen-size[breakpoint]/$px-factor)em) for $key, $value in $screen-size[font-sizes] --font-size-{$key}: ($value[0]/$px-factor)rem --line-height-{$key}: $value[1]
body set-font-size-line-height(medium) h1 set-font-size-line-height(x-large) h2 set-font-size-line-height(large)
FLUID TYPOGRAPHY
calc((18 - 16)/640 * 100vw + (16 - (18 -
16)/2) * 1rem/16) f(x) = m x + n f(x) = m (x − 320) + 16 m = = = Δy Δx 18 − 16 960 − 320 18 − 16 640 18 − 16 640 f(x) = (x − 320) + 16 18 − 16 640 18 − 16 2 = x + 16 − Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite
body { font-size: calc((18 - 16)/640 * 100vw + (16
- (18 - 16)/2) * 1rem/16); } Überschrift: 26px bei 320px Breite, 36px bei 960px Breite h1 { font-size: calc((36 - 26)/640 * 100vw + (26 - (36 - 26)/2) * 1rem/16); } Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite
body { --font-size-320: 16; --font-size-960: 18; } h1 { --font-size-320:
26; --font-size-960: 36; } body, h1 { font-size: calc((var(--font-size-960) - var(--font-size-320))/640 * 100vw + (var(--font-size-320) - (var(--font-size-960) - var(--font-size-320))/2) * 1rem/16); }