Responsive typography

RESPONSIVE TYPOGRAPHY

LEGIBLE READABLE

LEGIBLE 1Il Gill Sans 1Il 1Il 1Il Helvetica Franklin Gothic FS Source Sans Pro

Schriftgröße 16px 1em Zeilenlänge 65 Zeichen/Zeile Zeilenabstand 1.5 READABLE

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 { body h1 h2 } (min-width: 22.5em) @media { body h1 h2 } (min-width: 45em) { font-size: 1.125rem } { font-size: 1.778rem } { font-size: 1.333rem } { font-size: 1.25rem } { font-size: 1.8rem } { 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 button: 13 small: 14 medium: 16 large: 22 x-large: 26 } },{ breakpoint: 360 font-sizes: { x-small: 12 button: 14 small: 16 medium: 18 large: 24 x-large: 32 } },{ breakpoint: 720 font-sizes: { x-small: 12 button: 14 small: 16 1.3 1 1.3 1.4 1.2 1.2 1.3 1 1.3 1.5 1.2 1.2 1.3 1 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

Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite f(x) = m x + n Δy 18 − 16 18 − 16 m= = = Δx 960 − 320 640 f(x) = m (x − 320) + 16 18 − 16 18 − 16 18 − 16 f(x) = (x − 320) + 16 = x + 16 − 640 640 2 calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/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);

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