twistedintellect.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 schreiben.

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­gra­phie 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 Vollständigkeit.

1. Zweck und Message
2. Typo­gra­phie ist die Kunst des Kon­trasts zwi­schen Schrift und Freiräumen
3. Ver­ti­ka­ler Rhyth­mus wird überschätzt
4. Text­aus­zeich­nung ver­folgt einen seman­ti­schen Sinn
5. Details rich­tig einsetzen
6. Alles ist relativ

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 Message

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 Kurr­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.jp

2. Typo­gra­phie ist die Kunst des Kon­trasts zwi­schen Schrift und Freiräumen

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 Helligkeits‑, 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 oftm­las für klei­ne­re Schriftgröß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 erscheinen.
• 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 setzen.
• 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­out­ei­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.com

3. Ver­ti­ka­ler Rhyth­mus wird überschä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).

Aus­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 werden.

lordlikely.com

5. Details rich­tig einsetzen

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 Eigenheiten.

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 beitragen.
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 werden.

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.com

6. Alles ist relativ

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 setzen.

 

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