Eine Einführung in die Typografie mit starkem Fokus auf Web. Von den Begriffen der Typografie über den Ist-Zustand vonWebfonts bis hin zur Detailtypografie wird versuch alle wichtigen Begriffe und Buzzwords zu behandeln.
8. Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Spationierung
HambDie Spationierung wird für jede
Glyphe eingestellt. Sie stellt ein
harmonisches Schriftbild sicher.
9. Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Spationierung
Obwohl die Japaner als siebtgrößte aus-
ländische Bevölkerungsgruppe eine kleine
Minderheit bilden, prägen sie seit über 50
Jahren das Stadtbild und bereichern das
wirtschaftliche und kulturelle Leben der
Stadt. Die meisten in Düsseldorf lebenden
Japaner wurden von ihren Arbeitgebern
nach Deutschland entsandt und sind für
wenige Jahre oder kurzfristige Einsätze in
der Stadt. Es handelt sich überwiegend um
gutbezahlte Spezialisten und Führungs-
kräfte sowie deren Familienangehörige.
Daneben studieren regelmäßig junge Ja-
paner an der Musikhochschule oder der
Kunstakademie.
letter-spacing: 0.2em; Probleme:
• Schrift ist Sprache
• Sub-Pixel Positioning
10. Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Kerning
AV Toll Voll Vhs
AV Toll Voll Vhs
ohne Kerning
mit Kerning
Das Kerning regelt den Abstand
bei zwei aufeinander treffenden
Buchstabenpaaren.
12. Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Hamburgefonts
Der braune Fuchs
Schriftgrad & Durchschuß
Grundline
x-Höhe
VersalhöheOberlängen
Unterlängen
Durchschuß
font-size line-height
13. Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Schriftgrad & Durchschuß
Einheiten
font-size line-height
px /* Pixel */ Feste Größe
em Größe richtet sich nach
HTML-Elternelemente
Zeilenhöhe richtet sich
nach font-size; Einheit
kann auch weggelassen
werden.
rem Größe richtet sich nach
root
keine Infos
% /* Prozent */ Größe richtet sich nach
Elternelemente
Zeilenhöhe richtet sich
nach font-size von root
pt /* Punkt */ Feste Größe;
eigentlich eine Maßeinheit 1pt = 0,3527 mm
14. Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Tiefergehender
How to Size Text in CSS
Css font-size: em vs. px vs. pt vs. percent
Font sizing with rem
Refine your Web type with this crash course on the CSS line-height property
Schriftgrad & Durchschuß
15. Einführung in die (Web-)Typografie
jensweigel.de
Schrift
serif sans-serif
Tiefergehender
Schriftklassifikation in a nutshell
Schriftklassifikation und Schriftmischung (SlideShare, Blog)
Klassifikation nach DIN 16518
font-family: ”Tolle Schrift”,
Systemschrift,
serif;
font-family: ”Tolle Schrift”,
Systemschrift,
sans-serif;
cursive fantasy monospace
Klassifikation
16. Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Schriftschnitte
Regular
Italic
Bold
Bold italic
Kapitälchen
Condensed
Extended
font-weight: normal;
font-style: italic;
font-weight: bold; /* od. 700 */
font-style: italic; font-weight: bold;
font-variant: small-caps;
Working Draft: font-stretch: condensed;
Working Draft: font-stretch: expanded;
17. Einführung in die (Web-)Typografie
jensweigel.de
Schrift
weitere Auszeichnungen
Iquistionem eaturerum, omnis autempo ratio-
ribus aut odi que nonsequias con rest haruptam
voluptaecto dit que dolupta tibusam harchil
itaepe laut quis di cus
Unterstrichen
text-decoration: underline; text-decoration: line-through;
Iquistionem eaturerum, omnis autempo ratio-
ribus aut odi que nonsequias con rest haruptam
voluptaecto dit que dolupta tibusam harchil
itaepe laut quis
Durchgestrichen
Iquistionem eaturerum, omnis autempo ratio-
ribus aut odi que nonsequias con rest haruptam
voluptaecto dit que dolupta tibusam harchil
itaepe laut quis di cus
Oberstrich
text-decoration: overline;
text-decoration-style: solid | double |
dotted | dashed | wavy
text-decoration-color: #f00;
Zukunft
19. Einführung in die (Web-)Typografie
jensweigel.de
Webfonts
WOFF
Formate
EOT TTF/OTF
• Microsoft-Format
• nur IE ab 5.5
• Umständlich zu
erstellen
• weit verbreitet
• wird fast von jedem
Browser unterstütz
• da nicht geschützt
wurde es von den
Fontherstellern
nicht unterstützt
• modernstes
Containerformat
• wird von allen Brow-
sern unterstützt
außer Android
Systembrowser
SVG ist inzwischen nicht mehr notwendig.
20. Einführung in die (Web-)Typografie
jensweigel.de
Webfonts
Einbinden
Selbstgehostet
• meist nur WOFF und EOT
@font-face {
font-family: 'Schriftname';
src: url('dateiname.eot‘);
src: local('?'),
url('dateiname.woff‘) format('woff'),
url('dateiname.ttf') format('truetype')
font-weight: normal;
font-style: normal;
}
fontshop.com
myfonts.com
CDN
• teilweise speziell
überarbeitete Schriften
• große Auswahl von
Schriften
typekit.com
fonts.com
22. Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Absatzarten
linksbündig rechtsbündig
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace
restiurem. Ebis simporro volo cum harumquis
esciis ressinc temperisci blam, to conseque
plautemquia alisquunt fugiam faccaest, sapitia
eles estior sam, volorae ptatus dit, aspero que
consed quame sapiet aut rep
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace
restiurem. Ebis simporro volo cum harumquis
esciis ressinc temperisci blam, to conseque
plautemquia alisquunt fugiam faccaest, sapitia
eles estior sam, volorae ptatus dit, aspero que
consed quame sapiet aut rep
text-align: left; /* default */ text-align: right;
23. Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Absatzarten
Blocksatz zentriert
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est,
comniatem sitatum ad eumque veliqui debit
vellace restiurem. Ebis simporro volo cum
harumquis esciis ressinc temperisci blam, to
conseque plautemquia alisquunt fugiam fac-
caest, sapitia eles estior sam, volorae ptatus dit,
asperoqueconsed quame sapiet aut rep
Iquistionem eaturerum, omnis autempo
ratioribus aut odi que nonsequias con rest
haruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo
cone ilit que voluptae. Ut harum ex et magni
doluptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace
restiurem. Ebis simporro volo cum harumquis
esciis ressinc temperisci blam, to conseque
plautemquia alisquunt fugiam faccaest, sapitia
eles estior sam, volorae ptatus dit, aspero que
consed quame sapiet aut rep
text-align: justify; text-align: center;
24. Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Einzüge
Eingerückt hängender Einzug
Iquistionem eaturerum, omnis autempo ra-
tioribus aut odi que nonsequias con rest ha-
ruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo cone
ilit que voluptae. Ut harum ex et magni do-
luptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace restiu-
rem. Ebis simporro volo cum harumquis esciis
ressinc temperisci blam, to conseque plautem-
quia alisquunt fugiam faccaest, sapitia eles es-
tior sam, volorae ptatus dit, aspero que consed
quame sapiet aut rep
Iquistionem eaturerum, omnis autempo rati-
oribus aut odi que nonsequias con rest ha-
ruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es
arum harumendam, tessi blaboritis exerum
volo cone ilit que voluptae. Ut harum ex et
magni doluptatur reperunt, inctur mo est,
comniatem sitatum ad eumque veliqui debit
vellace restiurem. Ebis simporro volo cum
harumquis esciis ressinc temperisci blam, to
conseque plautemquia alisquunt fugiam fac-
caest, sapitia eles estior sam, volorae ptatus
dit, aspero que consed quame sapiet aut rep
text-indent: 1em; Wroking Draft: text-align: hanging;
25. Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Initialen
Iquistionem eaturerum, omnis autempo ra-
tioribus aut odi que nonsequias con rest ha-
ruptam voluptaecto dit que dolupta tibusam
harchil itaepe laut quis di cus dolorum es arum
harumendam, tessi blaboritis exerum volo cone
ilit que voluptae. Ut harum ex et magni do-
luptatur reperunt, inctur mo est, comniatem
sitatum ad eumque veliqui debit vellace restiu-
rem. Ebis simporro volo cum harumquis esciis
ressinc temperisci blam, to conseque plautem-
quia alisquunt fugiam faccaest, sapitia eles es-
tior sam, volorae ptatus dit, aspero que consed
quame sapiet aut rep
:first-letter {font-size: 3em;
27. Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Anführungszeichen
”Die englischen Anführungszeichen
sind bei deutschen Texten falsch”
„Diese Anführungszeichen sind
besser. Eselsbrücke: 99 66“
Die Systemschriften Verdana und Trebuchet haben keine korrekten
deutschen Abführungszeichen.
28. Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Anführungszeichen
«Die französischen Anführungszei-
chen auch Guillemet genannt»
»… werden im deutschen
andersherum gesetzt«
29. Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Bindestrich und Devis
Bindestriche werden für Worttren-
nungen, gekoppelte Begriffe (Die
Prism-Affäre) und »Auflistungen«
(ein-, zwei-, dreimal) verwendet.
Im Web kann die CSS-Anweisung hy-
phens:auto; vor automatisches setzen
von Bindestrichen. Nachteil ist, dass
nach caniuse.com Chrome den Befehl
nicht unterstützt. Außerdem gibt
es keine Begrenzungsmöglichkeiten
wieviel Zeilen hintereinander mit ei-
ner Trennung enden.
Das Devis hingegen wird als Ge-
dankenstrich gestzt – natürlich
geht das auch im Web. Auch als Bis-
Strich wird das Devis verwendet.
31. Einführung in die (Web-)Typografie
jensweigel.de
Quellen
W3C CSS2 http://www.w3.org/TR/CSS2/
W3C CSS3-Fonts http://www.w3.org/TR/css3-fonts/
Wikipedia http://www.wikipedia.de
Smashing Magazin http://www.smashingmagazine.com/
Weitere Infos
Fontrendering A Closer Look At Font Rendering
Font-Smoothing Schriftdarstellung mit -webkit-font-smoothing
white-space http://css-tricks.com/almanac/properties/w/whitespace/
Anführungszeichen Typografie der Anführungszeichen:
Gänsefüßchen und Guillemets
Typografie.info