Post on 27-Aug-2020
–
Interaktive Medien 1. Semester Martin Vollenweider
Typografie im Web
Interaktive Medien 1. Semester, Martin Vollenweider
21.08.2020
2
Typografie im Web Codecademy: Styling with CSS > Fonts
3
Kurze Einführung in die Typografie (Video)
4
Schriftgrad font-size: 1rem;
5
Schriftgrad oder Schriftgrösse in rem und nicht in px rem ist die Standard-Schriftgrösse des Browsers
em: ungefähr die Breite und Höhe des großen "M" als Referenz verwendet
rem bezieht sich auf die Schriftgrösse des Root-Elements.
Bei Desktop-Browsern 16px, kann im html-Tag überschrieben werden
Beispiel Die Schrift im body soll 10px, diejenige von h1 36px sein
html {font-size: 100%;} /* Browserdefault 16px */ body {font-size: 0.625rem} /* 10/16 */ h1 {font-size: 2.25rem;} /* 36/16 */ Übung (css_schriftgrad_unfertig.html)
Fertiges Beispiel (css_schriftgrad.html)
6
Umrechnen pt, px und rem: 1rem = 16px = 12pt
7
Zeilenabstand line-height: 170%;
8
Buchstabenabstand letter-spacing: -0.05rem;
9
Wortabstand word-spacing: 0.3rem;
Übung (css_spacing_unfertig.html)
Fertiges Beispiel (css_spacing.html)
10
Manuelles Unterschneiden oder Kerning <span class="kerning">W</span>asser, <span class="kerning">T</span>ext,
Übung (css_kerning_unfertig.html)
Fertiges Beispiel (css_kerning.html)
11
Ausrichtung text-align: justify;
Übung (css_ausrichtung_unfertig.html)
Fertiges Beispiel (css_ausrichtung.html)
12
Silbentrennung Achtung: Funktioniert nur im Firefox & Safari richtig (im Chrome nicht, siehe
CanIuse.com)
hyphens: auto; <body lang="de">
Übung (css_silbentrennung_unfertig.html)
13
Fertiges Beispiel (css_silbentrennung.html)
Zeilenlänge oder -breite width: 500px;
Eine Zeile sollte nicht mehr als ungefähr 60 Zeichen1 oder Buchstaben umfassen. Bei längeren Zeilen ist es für das Auge schwierig, vom Ende einer Zeile zum Anfang der nächsten Zeile zu springen.
1 Die optimale Satzbreite liegt für Print bei 55-75, und für Web bei 45-55 Zeichen pro Zeile. (Hammer, N. & Bensmann, K. (2011). Webdesign für Studium und Beruf. Webseiten planen, gestalten und umsetzen. X.media.press, 2., überarb. und erw. Auflage, Berlin: Springer.)
14
Übung (css_breite_unfertig.html)
Fertiges Beispiel (css_breite.html)
Sonderzeichen
Fertiges Beispiel (css_sonderzeichen.html)
15
Linien Den Absätzen lassen sich Linien zuweisen
Übung (css_linien_unfertig.html)
Fertiges Beispiel (css_linien.html)
Der Abstand zwischen Inhalt und Linie wird mit dem Padding (zum Beispiel padding-left) festgelegt.
16
Artikel Ct 18-2019: Typografiegestaltung im Browser mit modernem CSS
Page 10-2019: Webtypografie
17
Inhaltsverzeichnis Typografie im Web ............................................................................................................... 2
Kurze Einführung in die Typografie (Video) ................................................................. 3
Schriftgrad ....................................................................................................................... 4
Schriftgrad oder Schriftgrösse in rem und nicht in px ................................................ 5
Beispiel ............................................................................................................................. 5
Umrechnen pt, px und rem: 1rem = 16px = 12pt ......................................................... 6
Zeilenabstand .................................................................................................................. 7
Buchstabenabstand ........................................................................................................ 8
Wortabstand .................................................................................................................... 9
Manuelles Unterschneiden oder Kerning .................................................................... 10
Ausrichtung .................................................................................................................... 11
Silbentrennung .............................................................................................................. 12
18
Zeilenlänge oder -breite ................................................................................................ 13
Sonderzeichen ............................................................................................................... 14
Linien .............................................................................................................................. 15
Artikel .................................................................................................................................. 16