6 typographische Feinheiten im Web

14. Januar 2010 von Matthias Planitzer
twistedintellect.com Ein Blick in die Blogstatistik zeigt, dass im Lauf des mehr als einjährigen Bestehens von Castor und Pollux manche Themen schnell in den Hintergrund gerückt sind, obgleich diese dem ursprünglichen Konzept zufolge ein integraler Bestandteil dieses Blogs sein sollten. Eine dieser Themen ist die Typographie; und da ich mich in letzter Zeit wieder intensiv mit Web-Typographie beschäftigte, kommt es mir gelegen, wieder zu dem Thema zu schreiben. Obgleich man im Internet Linksammlungen, Tutorials, Ratgeber usw. zu genüge findet, werden doch m.E. manche Aspekte dieses komplexen Themas unberechtigterweise gar nicht oder nur oberflächlich aufgegriffen. Wenn man einmal die üblichen Seiten zum Thema Web-Typgraphie abgrast, wird man bald erkennen, dass die Informationen überaus redundant sind. Nicht verzagen, dafür gibt es jetzt an dieser Stelle ein kurze Liste jener typographischen Feinheiten, die im Web selten oder gar nicht zur Sprache kommen - natürlich ohne Anspruch auf Vollständigkeit.

twistedintellect.comtwistedintellect.com

Ein Blick in die Blog­sta­tis­tik zeigt, dass im Lauf des mehr als ein­jäh­ri­gen Bestehens von Cas­tor und Pol­lux man­che The­men schnell in den Hin­ter­grund gerückt sind, obgleich die­se dem ursprüng­li­chen Kon­zept zufol­ge ein inte­gra­ler Bestand­teil die­ses Blogs sein soll­ten. Eine die­ser The­men ist die Typo­gra­phie; und da ich mich in letz­ter Zeit wie­der inten­siv mit Web-Typo­gra­phie beschäf­tig­te, kommt es mir gele­gen, wie­der zu dem The­ma zu schrei­ben.

Obgleich man im Inter­net Link­samm­lun­gen, Tuto­ri­als, Rat­ge­ber usw. zu genü­ge fin­det, wer­den doch m.E. man­che Aspek­te die­ses kom­ple­xen The­mas unbe­rech­tig­ter­wei­se gar nicht oder nur ober­fläch­lich auf­ge­grif­fen. Wenn man ein­mal die übli­chen Sei­ten zum The­ma Web-Typ­graphie abgrast, wird man bald erken­nen, dass die Infor­ma­tio­nen über­aus red­un­dant sind. Nicht ver­za­gen, dafür gibt es jetzt an die­ser Stel­le ein kur­ze Lis­te jener typo­gra­phi­schen Fein­hei­ten, die im Web sel­ten oder gar nicht zur Spra­che kom­men — natür­lich ohne Anspruch auf Voll­stän­dig­keit.

1. Zweck und Messa­ge
2. Typo­gra­phie ist die Kunst des Kon­trasts zwi­schen Schrift und Frei­räu­men
3. Ver­ti­ka­ler Rhyth­mus wird über­schätzt
4. Text­aus­zeich­nung ver­folgt einen seman­ti­schen Sinn
5. Details rich­tig ein­set­zen
6. Alles ist rela­tiv

Die fol­gen­de Lis­te rich­tet sich in ers­ter Linie an jene, die bereits typo­gra­phi­sches Grund­ver­ständ­nis mit­brin­gen. Den­noch wird ein Groß­teil der Begrif­fe durch Links aufs Typo-Lexi­kon ergänzt.

annyas.com

1. Zweck und Messa­ge

Typo­gra­phie heißt nicht, die hüb­sches­ten Fonts aus­zu­wäh­len. Nicht alle von uns kön­nen Frak­tur­schrif­ten lesen, noch weni­ger Kur­r­ent­schrif­ten wie Süt­ter­lin. Obgleich bei­de Schrift­klas­sen optisch sehr anspre­chend sind, erfül­len sie doch — zumin­dest im Inter­net — den wich­tigs­ten und womög­lich auch ein­zi­gen Zweck nicht, der der Typo­gra­phie zukommt: Les­bar­keit. Daher gilt für Text­kör­per und zumeist auch Über­schrif­ten: Gute Typo ist, was dem durch­schnitt­li­chen Leser nicht auf­fällt. Punkt. Gute Typo fällt i.d.R. nur jenen auf, die sich auch dafür inter­es­sie­ren — also auch dir und mir.

Den­noch heißt das nicht, dass Web­de­si­gner aus ihrem klei­nen Reper­toire an Web­fonts nichts machen kön­nen. Bis­her habe ich immer gute und erwar­tungs­ge­mä­ße Ergeb­nis­se erzielt, wenn ich mir vor­her klar durch­dacht habe, was ich eigent­lich errei­chen will. Soll die Web­sei­te den Flair der gol­de­nen Zwan­zi­ger atmen? Soll sie klas­sisch und nach Vor­bild der Tages­zei­tun­gen aus Blei­satz­zei­ten daher­kom­men? Oder viel­leicht puris­tisch und dezent?
Die Ansprü­che und Erwar­tun­gen kön­nen viel­fäl­ti­ger Natur sein, jedoch, umso detail­lier­ter, des­to bes­ser. Der nächs­te Schritt bestün­de u.U. dann dar­in, Schrift­bei­spie­le aus dem betref­fen­dem Kon­text zu sam­meln. Inter­net und Buch­han­del sind da wie geschaf­fen für.

Wenn man die­se bei­den Gedan­ken bei allem im Hin­ter­kopf behält, hat man schon einen gro­ßen Teil der Arbeit geschafft.

informationarchitects.jpinformationarchitects.jp

2. Typo­gra­phie ist die Kunst des Kon­trasts zwi­schen Schrift und Frei­räu­men

Die­se The­se ist zwar auf ein­schlä­gi­gen Web­de­sign-Sei­ten in ähn­li­cher Form weit ver­brei­tet, wird aber mei­ner Mei­nung nach eher stief­müt­ter­lich behan­delt. Meist wird dann nur über Zei­len­ab­stän­de und mar­gins phi­lo­so­phiert, aber dahin­ter steckt noch weit­aus mehr. Man könn­te die­sem umfang­rei­che The­ma sicher­lich eini­ge Sei­ten wid­men, doch will ich hier nur eini­ge Denk­an­stö­ße geben, was die­se The­se alles umfässt:

  • Eine Let­ter, eine Schrift wir­ken nur dann har­mo­nisch, wenn zwi­schen Buch­sta­ben­kör­per und Hin­ter­grund genü­gend Kon­trast herrscht. Dies schließt Hel­lig­keits-, Farb- und Form­kon­tras­te ein. Fet­te und mage­re Schrif­ten büßen Kon­trast ein, Seri­fen­schrif­ten gewin­nen häu­fig Kon­trast mit stei­gen­der Schrift­grö­ße, seri­fen­lo­se Schrif­ten eig­nen sich oftmlas für klei­ne­re Schrift­grö­ßen.
  • Obgleich der Web­de­si­gner dar­auf nur durch sei­ne Font­wahl Ein­fluss neh­men kann, ver­mag er dank CSS mikro­ty­po­gra­phi­sche Fak­to­ren der Spa­tio­nie­rung steu­ern: Ker­ning, Lauf­wei­te (bei­de über let­ter-spa­cing) und Wort­ab­stand (word-spa­cing). Zwar ist dies i.d.R. nur für Über­schrif­ten prak­ti­ka­bel, ist aller­dings bei Text­aus­zeich­nung in Form von Ver­sa­li­en oder Kapi­täl­chen Pflicht.
  • Zei­len­län­ge und -abstand tra­gen eben­falls dazu bei, las­sen einen Text auf­ge­staut, zer­flos­sen, aus­ein­an­der­ge­ris­sen oder im güns­ti­gen Fall flie­ßend erschei­nen.
  • Die Mischung der ein­ge­setz­ten Schrif­ten ent­schei­det neben sti­lis­ti­schen (s.o.) und seman­ti­schen Fak­to­ren auch über Span­nung und Har­mo­nie zwi­schen ver­schie­de­nen Text­ele­men­ten. Eine pro­ba­te Lösung ist es etwa, Über­schrif­ten in Seri­fen und Fließ­text in seri­fen­lo­sen Schrif­ten zu set­zen.
  • Anord­nung und Abstän­de der ein­zel­nen opti­schen Ele­men­te, also Absät­ze, Über­schrif­ten, Bil­der, Menüs, lay­ou­tei­ge­ne Gra­fi­ken etc. pp. spie­len eine wich­ti­ge Rol­le im gesam­ten Web­de­sign und stel­len wohl auch den kom­ple­xes­ten Teil die­ser Lis­te dar. Rich­tig ein­ge­setzt, wer­den einer­seits Span­nun­gen und Kon­kur­ren­zen abge­baut, andern­orts wil­lent­lich erzeugt, Struk­tur erzeugt, ein­zel­ne Ele­men­te in den Vor­der­grund gestellt, ande­re in Kon­text gebracht und ins­ge­samt in eine logi­sche, anspre­chen­de Hier­ar­chie gebracht.

hotmeteor.comhotmeteor.com

3. Ver­ti­ka­ler Rhyth­mus wird über­schätzt

Die meis­ten Web­ty­po­gra­phie-Rat­ge­ber schwö­ren auf die­ses Instru­ment und geben dem fau­len Web­de­si­gner auch die pas­sen­den Werk­zeu­ge in die Hand (als ob ein Taschen­rech­ner nicht aus­rei­che). Das Anlie­gen ist rea­lis­tisch und wich­tig: Der Zei­len­ab­stand soll­te im gesam­ten Doku­ment har­mo­nie­ren, also ent­we­der gleich sein oder Viel­fa­che erge­ben. Andern­falls stört sich das Auge an neben­ein­an­der ange­zeig­ten, unhar­mo­ni­schen Absät­zen — aber oft­mals auch nur dann.

Oft­mals macht es im Inter­net Sinn, die­se Regel zu beher­zi­gen, näm­lich immer dann und genau dann, wenn Inhal­te auch neben­ein­an­der ange­zeigt wer­den. Doch gera­de in Blog­struk­tu­ren, die dem Mus­ter »Con­tent + eine Side­bar« fol­gen, kann die oft­mals zeit­rau­ben­de Arbeit, line-height, height, mar­gin und pad­ding der ein­zel­nen Ele­men­te zu kali­brie­ren, unnö­tig sein. Man den­ke an Lay­outs mit text­ar­mer, viel­leicht auch fixer Side­bar und lan­gen, mög­li­cher­wei­se vor­ran­gig aus Bild­ma­te­ri­al bestehen­den Con­tent-Tei­len: Der User scrollt die meis­te Zeit und ver­liert so neben­ein­an­der lie­gen­de Inhal­te schnell aus dem Auge.

Hier noch lan­ge Zeit über ver­ti­ka­len Rhyth­mus zu grü­beln, kann über­flüs­sig sein. Wich­tig ist dann nur, dass im Fließ­text selbst alles eini­ger­ma­ßen har­mo­niert — klei­ne Abwei­chun­gen vom Sche­ma sind natür­lich erlaubt, ins­be­son­de­re wenn strik­tes Ein­hal­ten die­ses Rhyth­mus bedeu­ten wür­de, dass ein­zel­ne Ele­men­te einen lächer­lich gro­ßen oder klei­nen Zei­len­ab­stand erhiel­ten. Wie immer aller­dings, hängt die Ent­schei­dung am Ein­zel­fall — und was schlicht und ein­fach har­mo­niert. Gera­de in die­sem Bereich kann es wert sein, ein wenig zu expe­ri­men­tie­ren, so kann zwi­schen zwei rhyth­misch kor­rek­ten Absät­zen eine arhyth­misch gesetz­te Über­schrift dem Lay­out eine gewis­se Dyna­mik ver­lei­hen (s. auch obi­ges Bild).

Auszeichnungs-FließschemaAus­zeich­nungs-Fließ­sche­ma nach Robert Bring­hurst (via)

4. Text­aus­zeich­nung ver­folgt einen seman­ti­schen Sinn

Ob kur­siv, fett, unter­stri­chen, anders­far­big, in Kapi­täl­chen, gesperrt oder ander­wei­tig vom Nor­mal­text abwei­chend — sol­che und ande­re Text­aus­zeich­nun­gen ver­fol­gen stets einen seman­ti­schen Sinn, sol­len sie doch ein­zel­ne Wor­te bis gan­ze Sät­ze aus dem Kon­text her­aus­stel­len. Anders­far­big­keit und Unter­strei­chung sind dabei stan­dard­mä­ßig Links vor­be­hal­ten, ein Abwei­chen von die­ser Regel führt schnell zu Ver­wir­rung. Alle ande­ren jedoch kön­nen indi­vi­du­ell ein­ge­setzt wer­den, solan­ge sie einer­seits Punkt 1 ent­spre­chen und ande­rer­seits kon­sis­tent blei­ben. Dem Leser muss klar sein, dass bspw. halb­fet­ter Text für Beto­nung und kur­si­ver Text für Zita­te steht.

Schlech­ter Stil wäre in die­sem Sin­ne, v.a. zu star­ke (gan­ze Satz­tei­le in Ver­sa­li­en) aber zu schwa­che Aus­zeich­nun­gen zu wäh­len, nach Gut­dün­ken zwi­schen ihnen zu wech­seln, sie unüber­legt zu mischen oder gar der­art viel her­vor­zu­he­ben, dass der Lese­fluß gra­vie­rend gestört wird. Ande­rer­seits gibt es auch eine fei­ne Hier­ar­chie zwi­schen den ein­zel­nen Aus­zeich­nun­gen: So wür­de eine Pas­sa­ge mit fet­ten Ver­sa­li­en in gewöhn­li­chem Text viel zu stark her­vor­ste­chen, inner­halb von fet­tem Text jedoch ange­bracht sein.

Ori­en­tie­rung bie­tet da etwa das obi­ge Fließ­sche­ma, in dem die Schrift­aus­zeich­nun­gen hier­ar­chisch von oben nach unten ange­ord­net sind. Pas­sen­de Kom­bi­na­tio­nen sind mit Lini­en ver­bun­den, die roten Lini­en geben die übli­chen Lösun­gen wie­der. Ein Bei­spiel: Ist ein Text­kör­per in Ver­sa­li­en gesetzt, könn­ten Tex­tei­le durch fet­te Ver­sa­li­en oder z.B. fet­ten, kur­si­ven Nor­mal­text her­vor­ge­ho­ben wer­den.

lordlikely.comlordlikely.com

5. Details rich­tig ein­set­zen

Web-Typo­gra­phie kann den Regeln der Kunst in jeder Hin­sicht ent­spre­chen, aber den­noch fad wir­ken. Dann ist man oft­mals an einen Punkt gelangt, wo der Unter­schied zwi­schen gutem und sehr gutem Lay­out im Detail steckt. Man kann dahin­ge­hend ande­rer Mei­nung sein, doch ist Typo­gra­phie m.E. auch das Wür­di­gen sti­lis­ti­scher Eigen­hei­ten.

Wenn etwa der Stil eines Buches oder einer Zei­tung aus dem 18. oder 19. Jahr­hun­dert erreicht wer­den soll, ist es zweck­mä­ßig, klei­ne­re Über­schrif­ten in gesperr­te Kapi­täl­chen zu set­zen, Orna­men­te wie das Aldus­blatt, Schluß­stü­cke oder Initia­len ein­zu­bin­den. Auch sub­ti­le­re Stil­mit­tel wie Mediä­val­zif­fern, unüb­li­che Liga­tu­ren (falls im Schrift­satz ent­hal­ten), Guil­le­mets kön­nen zu einem run­den Bild bei­tra­gen.
Wer bei Cas­tor und Pol­lux etwas auf­merk­sa­mer mit­liest, wird womög­lich schon bemerkt haben, dass bis auf das letz­te Bei­spiel all die­se Stil­mit­tel ein­ge­setzt wer­den.

Ande­re Sti­le erfor­dern natür­lich auch ande­re Stil­mit­tel, jedoch wird man dann zumeist auf lay­out­tech­ni­sche Mit­tel zurück­grei­fen müs­sen, stam­men doch die meis­ten typo­gra­phi­schen Stil­mit­tel aus eben jener Zeit. Bei­spiels­wei­se könn­te sich ein »antik« wir­ken­der Stil auf alt­rö­mi­sche Inschrif­ten bezie­hen, somit in Ver­sa­li­en gesetz­te Anti­qua-Schrif­ten wie Tra­jan, Gara­mond oder Cas­lon zum Ein­satz kom­men und die Wör­ter statt mit Leer­zei­chen mit klei­nen Drei­ecken oder Krei­sen auf Höhe der Mit­tel­län­ge getrennt wer­den. (Kennt jemand den Namen dafür?)

danielmall.comdanielmall.com

6. Alles ist rela­tiv

Typo­gra­phie lässt sich eben­so wenig wie ande­re Kunst­spar­ten auf eine Hand­voll Regeln her­un­ter­bre­chen. Wer ein­mal einen Blick in die Lite­ra­tur­klas­si­ker der Typo­gra­phie gewagt hat, wird wis­sen, dass es noch weit­aus mehr zu ler­nen und zu beach­ten gibt. Das Inter­net ist für die Typo­gra­phie ein gänz­lich neu­es Medi­um mit eige­nen Anfor­de­run­gen, sodass ein nicht gerin­ger Teil der alt­her­ge­brach­ten Regeln gar nicht anwend­bar sind.

Den­noch kann ein Lay­out — ob im Web oder in Print — stink­lang­wei­lig sein, obgleich den Regeln der Kunst in allen Punk­ten ent­spro­chen wur­de. Eben­so kann ein Lay­out, dass unkon­ven­tio­nell, gar rebel­lisch daher kommt, ein abso­lu­ter Erfolg sein. Will hei­ßen: Nur wer die Regeln kennt und anwen­den kann, kann sie auch über­ge­hen und ganz eige­ne Akzen­te set­zen.

 

Wel­che Fein­hei­ten im Gebrauch von Typo­gra­phie im Web fal­len dir noch ein?

Kommentare

  1. Ein sehr inter­es­san­ter Bei­trag mit schö­nen Bei­spie­len. Ich abon­nie­re mal den Feed. Dan­ke fürs Schrei­ben 🙂
    lg.

Andere Meinungen

  1. […] 6 typo­gra­phi­sche Fein­hei­ten im Web Obgleich man im Inter­net Link­samm­lun­gen, Tuto­ri­als, Rat­ge­ber usw. zu genü­ge fin­det, wer­den doch m.E. man­che Aspek­te die­ses kom­ple­xen The­mas unbe­rech­tig­ter­wei­se gar nicht oder nur ober­fläch­lich auf­ge­grif­fen. Wenn man ein­mal die übli­chen Sei­ten zum The­ma Web-Typ­graphie abgrast, wird man bald erken­nen, dass die Infor­ma­tio­nen über­aus red­un­dant sind. […]

  2. […] 6 typo­gra­phi­sche Fein­hei­ten im Web (Cas­tor und Pol­lux) an die­ser Stel­le ein kur­ze Lis­te jener typo­gra­phi­schen Fein­hei­ten, die im Web sel­ten oder gar nicht zur Spra­che kom­men (tags: cfi­scher­com) […]