33
Einführung in die (Web-)Typografie Jens Weigel Designer

Einführung in die (Web-)Typografie

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Einführung in die (Web-)Typografie

Einführung in die

(Web-)Typografie

Jens WeigelDesigner

Page 2: Einführung in die (Web-)Typografie

»Schrift verhilft der Sprache zur

Kommunikation. Sie will und wird

gelesen werden. Die Schrift erzeugt

eine Stimme im Kopf.«

Page 3: Einführung in die (Web-)Typografie

»Gute Typographie bemerkt man

so wenig wie gute Luft zum Atmen.

Schlechte merkt man erst, wenn es

einem stinkt.«

Kurt Weidemann

Page 4: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Grundlegende

Begriffe

Page 5: Einführung in die (Web-)Typografie

Einführung in die (Web-)Typografie

jensweigel.de

Grundlegende Begriffe

HamburgewrSerifen

Punzen Abstrich

Auf- oder Haarstrich

Glyphe

Page 6: Einführung in die (Web-)Typografie

Einführung in die (Web-)Typografie

jensweigel.de

Grundlegende Begriffe

ABCDEF Versalien

Majuskeln text-transform:uppercase;

abcdef Gemeine

Minuskeln

text-transform:lowercase;

text-transform: none; /* default */

ff fl fflff fl ffl

Ligaturen font-feature-settings: ”liga=0”;

ß & ä ö ü auch Ligaturen

Page 7: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Glype

Page 8: Einführung in die (Web-)Typografie

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.

Page 9: Einführung in die (Web-)Typografie

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

Page 10: Einführung in die (Web-)Typografie

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.

Page 11: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Schrift

Page 12: Einführung in die (Web-)Typografie

Einführung in die (Web-)Typografie

jensweigel.de

Schrift

Hamburgefonts

Der braune Fuchs

Schriftgrad & Durchschuß

Grundline

x-HöheVersalhöheOberlängen

UnterlängenDurchschuß

font-size line-height

Page 13: Einführung in die (Web-)Typografie

Einführung in die (Web-)Typografie

jensweigel.de

Schrift

Schriftgrad & Durchschuß

Einheitenfont-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

Page 14: Einführung in die (Web-)Typografie

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ß

Page 15: Einführung in die (Web-)Typografie

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

Page 16: Einführung in die (Web-)Typografie

Einführung in die (Web-)Typografie

jensweigel.de

Schrift

Schriftschnitte

Regular

Italic

Bold

Bold italic

Kapitälchen

CondensedExtended

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;

Page 17: Einführung in die (Web-)Typografie

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

Unterstrichentext-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

Oberstrichtext-decoration: overline;

text-decoration-style: solid | double |

dotted | dashed | wavy

text-decoration-color: #f00;

Zukunft

Page 18: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Webfonts

Page 19: Einführung in die (Web-)Typografie

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.

Page 20: Einführung in die (Web-)Typografie

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

Page 21: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Absatz

Page 22: Einführung in die (Web-)Typografie

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;

Page 23: Einführung in die (Web-)Typografie

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;

Page 24: Einführung in die (Web-)Typografie

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;

Page 25: Einführung in die (Web-)Typografie

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;

Page 26: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Detailtypografie

Page 27: Einführung in die (Web-)Typografie

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.

Page 28: Einführung in die (Web-)Typografie

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«

Page 29: Einführung in die (Web-)Typografie

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.

Page 30: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Quellen

Page 31: Einführung in die (Web-)Typografie

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

Page 32: Einführung in die (Web-)Typografie

jensweigel.de

Einführung in die (Web-)Typografie

Fragen?

Page 33: Einführung in die (Web-)Typografie

Vielen Dank für eure

Aufmerksamkeit

Jens WeigelDesigner