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
29
Responsive typography
Gunnar Bittersmann
July 08, 2019
Tweet
Share
More Decks by Gunnar Bittersmann
See All by Gunnar Bittersmann
gunnarbittersmann
0
40
gunnarbittersmann
0
15
gunnarbittersmann
0
11
gunnarbittersmann
1
29
gunnarbittersmann
0
31
gunnarbittersmann
2
17
gunnarbittersmann
0
24
gunnarbittersmann
0
50
gunnarbittersmann
0
60
Other Decks in Programming
See All in Programming
dictoss
0
170
yosuke_furukawa
PRO
14
3.9k
viteinfinite
0
200
trajchevska
2
370
yshrsmz
1
460
itosho525
1
370
ajstarks
2
550
malvinstn
1
650
siketyan
1
110
nauleyco
0
210
atskimura
0
300
decoc
1
340
Featured
See All Featured
thoeni
4
550
kastner
54
1.9k
62gerente
587
200k
shpigford
165
19k
phodgson
87
3.9k
colly
187
14k
roundedbygravity
241
21k
jakevdp
774
200k
sferik
609
54k
mthomps
39
2.3k
nonsquared
81
3.3k
brianwarren
83
4.7k
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); }