Schrif­ten im Web-Deve­­lo­p­­ment: Grund­la­gen der Typo­gra­fie

Schrif­ten in einer Web­site ein­zu­bin­den (auf den Datei­pfad zu ver­wei­sen), bedeu­tet nichts ande­res, als die Web­site daran zu hin­dern, auf Stan­dard-Sys­tem­zei­chen zurück­zu­grei­fen und kos­me­tisch die Kon­trolle zu behal­ten. Dabei kön­nen Schrif­ten LOKAL auf dem eigene Ser­ver abge­legt oder EXTERN wie z.B. von Google oder Adobe-Ser­vern gela­den wer­den. Da nicht alle Brow­ser das glei­che Schrift-Datei­for­mat lesen kön­nen, müs­sen von jedem Schrift­schnitt die For­mate .EOT, .WOFF, .WOFF2 und .SVG hin­ter­legt wer­den. Daten wie z.B. Schrift extern zu laden, ist daten­schutz­recht­lich anspruchs­voll. In unse­rem CSS-Code­bei­spiel gehen wir auf Num­mer sicher und legen im Haupt­ver­zeich­nis unse­res Web­ser­vers den Ord­ner “fonts” an und legen die Schrift­for­mate dort ab.

@font-face {
  font-family: 'My Font';
  src: url('/fonts/myfont.eot'); 
  src: url('/fonts/myfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff'), 
       url('/fonts/myfont.ttf') format('truetype'),
       url('/fonts/myfont.svg#svgFontName') format('svg'); 
font-display: swap;
font-weight: normal;
}

Wird die Web­site in HTML aus­ge­ge­ben, folgt der Quell­text ein vor­de­fi­nier­ten Struk­tur für Berei­che, Ele­mente und natür­lich Text. In HTML gibt es 6 Hier­ar­chie­ebe­nen bei den Über­schrif­ten (h= hea­ding), wobei h1 die höchste und h6 die nied­rigste Ebene ist. Ent­spre­chend der Zahl soll­ten Über­schrif­ten nach ihrer Wich­tig­keit chro­no­lo­gisch abwärts ein­ge­setzt wer­den, wobei die h1-Über­schrift nur ein­mal ver­wen­det wer­den sollte. Neben ande­ren kommt als wich­ti­ges Text­ele­ment der p-Tag dazu, der für den Absatz oder Fliess­text steht. REDAK­TION UND WEB­DE­SIGN SOLL­TEN DIE ÜBER­SCHRIF­TEN-HIER­AR­CHIEN SCHON IN DER KON­ZEPT- UND DESIGN­PHASE BERÜCK­SICH­TI­GEN. Um im Design aber fle­xi­bel zu blei­ben, kön­nen durch unter­schied­li­che CSS-Klas­sen Größe und Optik vari­ie­ren. Emp­feh­lens­wert ist die Pla­nung von 3 Schrift­grö­ßen für die Tags h1 bis h6 und p.

Nach­dem OPTI­SCHE und SEMAN­TI­SCHE Hier­ar­chien fest­ge­legt und Schrif­ten zuge­ord­net wur­den, geht es im letz­ten Schritt, um die respon­sive Umset­zung des Designs und sei­ner Schrif­ten. Dafür ste­hen 5 Maß­ein­hei­ten zur Ver­fü­gung:

PRO­ZENT [%]
Pro­zent­an­ga­ben bezie­hen sich auf den rela­ti­ven Anteil einer Größe in Bezug auf die Größe des über­ge­ord­ne­ten Ele­ments. Kom­plexe Ver­schach­te­lun­gen erschwe­ren die Grö­ßen­kon­trolle.

PIXEL [px]
Pixel sind eine sta­ti­sche Ein­heit und nicht respon­sive. Für jede (viele, viele, viele) Auf­lö­sung müs­sen Pixel­grö­ßen indi­vi­du­ell ange­passt wer­den.

EM [em]
Die EM-Ein­heit geht auf die Druck­in­dus­trie zurück - sie beschreibt die Größe des Buch­sta­ben M im Ver­hält­nis zum Druck­block­for­mat. Ähn­lich wie die Maß­ein­heit % bezieht sich die Ein­heit em auf das Ver­hält­nis zum über­ge­ord­ne­ten Ele­ment und ist schwer zu kon­trol­lie­ren.

REM [rem]
Die REM-Ein­heit (root-em) basiert auf der Schrift­größe des Wur­zel­ele­ments (die im html-Ele­ment defi­nierte Basis-Schrift­größe). Das bie­tet eine ein­heit­li­che Ska­lie­rung über die gesamte Web­seite, unab­hän­gig von der Hier­ar­chie der Ele­mente.

CLAMP [clamp]
Die Clamp-Funk­tion ver­eint die Vor­teile der Ein­heit rem mit der View­port­weite, der Breite des Sicht­be­rei­ches und erzeugt eine linear-respon­sive Ska­lie­rung, indem Min­dest-, Wunsch- und Maxi­mal­wert als Para­me­ter gesetzt wer­den, z.B.

html {
font-size: 16px; /* Wurzelelement */
}

h1 {
font-size: clamp(1.5rem, 1vw + 1rem, 2.5rem)
}

/* 

1.5rem = 24px = Minimum
1% Viewportbreite + 16px = Wunschwert
2.5rem = 40px = Maximum

*/

Die Wahl der rich­ti­gen Maß­ein­heit hängt von den Anfor­de­run­gen des Pro­jekts ab, ein­schließ­lich des gewünsch­ten Designs, der Respon­si­vi­tät und der Brow­ser­kom­pa­ti­bi­li­tät. Oft ist eine Kom­bi­na­tion ver­schie­de­ner Ein­hei­ten in Abhän­gig­keit von den Ele­men­ten und Anfor­de­run­gen des Designs sinn­voll.

Unter allen Aspek­ten des Designs sollte der Aspekt der Benut­zer­freund­lich­keit immer im Mit­tel­punkt ste­hen: HIN­TER­GRÜNDE und SCHRIFT­FARBE kon­trast­reich anle­gen, LES­BAR­KEIT durch schmale Spal­ten­breite, aus­rei­chende Zei­len­höhe und ange­nehme Schrift­grö­ßen erhö­hen und den TEXT­UM­FANG an eine durch­schnitt­li­che Lese­zeit anpas­sen.