interaktive medien 1. semester martin vollenweider · 2020. 7. 20. · interaktive medien 1....
TRANSCRIPT
![Page 1: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/1.jpg)
–
Interaktive Medien 1. Semester Martin Vollenweider
Typografie im Web
Interaktive Medien 1. Semester, Martin Vollenweider
21.08.2020
![Page 2: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/2.jpg)
2
Typografie im Web Codecademy: Styling with CSS > Fonts
![Page 3: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/3.jpg)
3
Kurze Einführung in die Typografie (Video)
![Page 4: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/4.jpg)
4
Schriftgrad font-size: 1rem;
![Page 5: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/5.jpg)
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)
![Page 6: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/6.jpg)
6
Umrechnen pt, px und rem: 1rem = 16px = 12pt
![Page 7: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/7.jpg)
7
Zeilenabstand line-height: 170%;
![Page 8: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/8.jpg)
8
Buchstabenabstand letter-spacing: -0.05rem;
![Page 9: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/9.jpg)
9
Wortabstand word-spacing: 0.3rem;
Übung (css_spacing_unfertig.html)
Fertiges Beispiel (css_spacing.html)
![Page 10: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/10.jpg)
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)
![Page 11: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/11.jpg)
11
Ausrichtung text-align: justify;
Übung (css_ausrichtung_unfertig.html)
Fertiges Beispiel (css_ausrichtung.html)
![Page 12: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/12.jpg)
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)
![Page 13: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/13.jpg)
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.)
![Page 14: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/14.jpg)
14
Übung (css_breite_unfertig.html)
Fertiges Beispiel (css_breite.html)
Sonderzeichen
Fertiges Beispiel (css_sonderzeichen.html)
![Page 15: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/15.jpg)
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.
![Page 16: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/16.jpg)
16
Artikel Ct 18-2019: Typografiegestaltung im Browser mit modernem CSS
Page 10-2019: Webtypografie
![Page 17: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/17.jpg)
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
![Page 18: Interaktive Medien 1. Semester Martin Vollenweider · 2020. 7. 20. · Interaktive Medien 1. Semester Martin Vollenweider . Typografie im Web Interaktive Medien 1. Semester, Martin](https://reader036.vdocuments.mx/reader036/viewer/2022063019/5fddfdfb53c4152caf0ac598/html5/thumbnails/18.jpg)
18
Zeilenlänge oder -breite ................................................................................................ 13
Sonderzeichen ............................................................................................................... 14
Linien .............................................................................................................................. 15
Artikel .................................................................................................................................. 16