8. WWW.SCHELPERDESIGN.NET
Responsive Typography
01 Responsive Web Design
• Das CSS fragt ab, wie breit ein Bildschirm ist
und verändert das Layout
@media screen and (max-width: 600px){
#content { width:100%;}
}
@media screen and (min-width: 601px){
#content { width:60%; float:right;}
}
11. WWW.SCHELPERDESIGN.NET
Responsive Typography
02 Lesbarkeit: Zeilenlänge
• Zeilen mit 50 bis 70 Zeichen sind angenehm zu lesen
• Bei längeren Zeilen muss sich das Auge anstrengen
um die Zeile zu „halten“
Diese Zeile hat eine gut lesbare Länge, nämlich 58 Zeichen
15. WWW.SCHELPERDESIGN.NET
Responsive Typography
03 Bedienbarkeit
• Ausreichend großer Zeilenabstand
• Sicher anklickbare Buttons (40 x40 Pixel)
Etiam porta sem malesuada magna
mollis euismod. Etiam porta sem
malesuada Link im Text euismod. Sed
posuere consectetur est at lobortis.
Donec id elit non mi porta gravida at eget
metus.
Etiam porta sem malesuada magna
mollis euismod. Etiam sem Link im Text
mollis euismod. Sed posuere consectetur
est at lobortis. Donec id elit non mi porta
gravida at eget metus.»
weiterlesen
24. WWW.SCHELPERDESIGN.NET
Responsive Typography
05 Rezept
• html {font-size: 100%} + rem für Schriften
• body {font-size: x%} + em für Elemente/Abstände,
die über umgebende Container „gesteuert“werden sollen
• px für Abstände, die in Bezug zu einem Bild (icon, bg-image)
stehen, z. B. li.icon {padding-left: 25px}
• % für Layoutelemente (Spalten)
{html font-size:60%} wäre bad practise,
überschreibt die Browser-Einstellungen des Users