Open-Source Webdesign

Passende Web-Schriften

Font Symbolbild

Schrift gehört zum Design, pas­sen­de Web-Schrif­ten zum Web-Design — nicht nur zu beson­de­ren Anläs­sen. Mit bootS­core kön­nen wir Goog­le Fonts direkt ein­bau­en. Uns wird sogar erklärt, wie wir sie lokal hos­ten und so die Erwäh­nung im Daten­schutz­kon­zept umge­hen. Gleich­wohl müs­sen wir uns dazu ein wenig auch auf Boot­strap ein­las­sen:

[ de | en ]

Lösung

  • Wäh­le aus den Goog­le Fonts Dei­ne Schrif­ten aus:
    • eine Schrift mit Seri­fen (z.B. pt-serif oder noto-serif),
    • eine dazu pas­sen­den seri­fen­lo­se Schrift (z.B. pt-sans oder noto-sans),
    • eine dazu pas­sen­de Mono­space-Schrift (pt-mono oer noto-sans-mono)
    • und viel­leicht noch eine spe­zi­el­le Schrift für Über­schrif­ten (z.B. ari­ma-madu­rai oder eb-gara­mond)
  • Wäh­le jede Schrift im goog­le-web­fonts-hel­per an und
    • belas­se den Zei­chen­satz (char­set) auf latin
    • selek­tie­re — so weit vor­han­den — die Grö­ßen 400 und 700.
    • selek­tie­re dazu — so weit vor­han­den, die Sti­le regu­lar, regu­lar ita­lic, bold und bold ita­lic.
    • kopie­re den im goog­le-web­fonts-hel­per dazu erzeug­ten font-face-code in die Datei scss/_bscore_custom.scss
    • lade das Zip-Paket aus dem goog­le-web­fonts-hel­per her­un­ter.
  • Erzeu­ge einen Ord­ner fonts in Dei­nem Child-The­ma.
  • Ent­pa­cke alle her­un­ter­ge­la­de­nen Zip-Pake­te im Ord­ner fonts
  • Erwei­te­re die Datei scss/_bscore_variables.scss um die Zei­len:
  $font-family-base: 'Noto sans', Verdana, sans-serif !default;
  $font-family-sans-serif: 'Noto Sans', Verdana, sans-serif, !default;
  $font-family-monospace: 'Noto Sans Mono', 'Courier New', monospace, !default;
  $font-family-code: 'Noto Sans Mono', 'Courier New', monospace, !default;
  $headings-font-family: 'EB Garamond', Garamond, serif !default;
  $display-font-family: 'EB Garamond', Garamond, serif !default;

Hintergrund

Schrif­ten sind — begriff­lich und inhalt­lich gese­hen — ein wei­tes Feld1:

In der Typo­gra­fie ist es üblich zwi­schen Seri­fen-Schrif­ten und seri­fen­lo­sen Schrif­ten zu unter­schei­den. Seri­fen­schrif­ten sei­en — heißt es — für gedruck­ten Fließ­text bes­ser, weil sie durch ihre hori­zon­ta­len Ver­län­ge­run­gen am Buch­sta­ben das Auge bes­ser füh­ren. Im Web galt dage­gen lan­ge, dass serif­lo­se Schrif­ten am Bild­schirm lese­ba­rer sei­en. Je fei­ner aber die Bild­schir­me über die Zeit wur­den, des­to fei­ner lie­ßen sich auch die Seri­fen dar­stel­len. Das Auge ermü­de­te weni­ger. Und so wird heu­te gesagt, es gäbe von der Les­bar­keit her kei­nen wirk­lich Unter­schied mehr: Seri­fen­schrif­ten und seri­fen­lo­se Schrif­ten kön­nen glei­cher­ma­ßen ver­wen­det wer­den.

Für alles nur eine ein­zi­ge Schrift zu ver­wen­den, lang­weilt aller­dings. Wenigs­tens die Über­schrif­ten und die Text­kör­per soll­ten sich unter­schei­den. Ande­rer­seits redu­zie­ren zu vie­le Schrif­ten — der Unru­he im Gesamt­bild wegen — die Les­bar­keit. Und Les­bar­keit und unmit­tel­ba­re Wahr­nehm­bar­keit ist nun ein­mal der Qua­li­täts­maß­stab. So arbei­tet die moder­ne Web-Desi­gne­rin mit Paa­ren, mit einem Font für die Über­schrift, einem für den Fließ­text. Und eben des­halb wer­den uns heu­te so oft Font­paa­re ‘emp­foh­len’, bei denen die Fonts doch recht wild kom­bi­niert wer­den.

In die­sem Kon­text wich­tig ist auch die Unter­schei­dung zwi­schen font-fami­liy und font-face. Mit der CSS-Anwei­sung font-family: XYZ; tei­len wir dem Brow­ser — unge­nau gespro­chen — mit, dass er den Text in einem HTML-Tag mit dem Font XYZ dar­stel­len sol­le. Tat­säch­lich wei­sen wir ihn aber an, den Text mit einem pas­sen­den Font aus der Font-Fami­lie XYZ dar­zu­stel­len. Mit der CSS-Anwei­sung @font-face {...}2 haben wir ihm zuvor gesagt, dass eine bestimm­te durch­ge­stal­te­te Schrift aus einer bestimm­ten Schrift­fa­mi­lie (font-family: XYZ) mit einem bestimm­ten Stil (font-style: [normal|italic]) und einer bestimm­ten Stär­ke (font-weight: [<400<...<700<]) zur Ver­fü­gung steht und wo er sie fin­det. Es ist dann Auf­ga­be des Brow­sers, die für eine bestimm­te Stel­le im HTML-Quell­text am bes­ten pas­sen­de Schrift kon­kret her­aus­zu­su­chen. Denn er muss ja nicht nur die Schrift selbst dar­stel­len, son­dern auch die Spe­zi­fi­ka­tio­nen nor­mal, ita­lic, bold, bold-ita­lic berück­sich­ti­gen.3

Wenn ein spe­zi­fi­zier­ter Font doch nicht zu Ver­fü­gung steht — etwa, weil der Brow­ser ihn nicht hat her­un­ter­la­den oder ver­ste­hen kön­nen -, dann wählt der Brow­ser einen ande­ren, mög­lichst ‘ähn­li­chen’ Font aus sei­nem Bestand. Und ‘ähn­lich’ meint hier nur, ob es sich dabei auch um einen seri­fen­lo­sen Font oder auch um eine seri­fen­lo­se Schrift han­delt. Wenn für die ande­ren gefor­der­ten Eigen­schaf­ten kein genau pas­sen­der Font einer Fami­lie bereit­steht, kann der Brow­ser die­se Eigen­schaf­ten ‘her­stel­len’, indem er den gewähl­ten Font rech­ne­risch kippt oder ver­stärkt. Sol­che ‘berech­ne­ten’ Schrif­ty­pen sehen aber schlech­ter aus, als die expli­zit so gestal­te­ten.4

Im Prin­zip kann die Web-Desi­gne­rin also nicht sicher sein, wie ihr Text auf dem Rech­ner einer Lese­rin tat­säch­lich aus­sieht. Um die Wahr­schein­lich­keit zu erhö­hen, dass die Desi­gne­rin ihrer Lese­rin das lie­fern kann, was sie vor­hat, dür­fen in der CSS-Anwei­sung font-family: XYZ; meh­re­re Font-Fami­li­en kom­bi­niert wer­den — bis hin zur gene­ri­schen Fami­lie serif, sans-serif oder monospace. Der Brow­ser sichert zu, — für jeden Buch­sta­ben — den ers­ten Font aus einer der Fami­li­en zu neh­men, mit dem er den Buch­sta­ben wie gefor­dert dar­stel­len kann. Ob und wie gut das klappt, hängt auch von Art und Güte des Brow­sers ab. Und um der Desi­gne­rin noch mehr Gewiss­heit zu bie­ten, ist das Kon­zept der Web Safe Fonts ent­stan­den5: Fonts, von denen frau weiß, dass sie auf den Gerä­ten (meis­tens) zur Ver­fü­gung ste­hen. Aus die­sen wählt sie ersatz­wei­se die, die ihren Design­vor­stel­lun­gen zwar nicht opti­mal, aber noch gut gerecht wer­den.

Damit ent­steht eine Stra­te­gie, Goog­le-Fonts lokal zu inte­grie­ren6:

Wir ent­schei­den uns für eine Font-Paar und nut­zen — wie von bootS­core emp­foh­len — den goog­le-web­fonts-hel­per, um die ent­spre­chen­den Goog­le-Fonts her­un­ter­zu­la­den und die auch gene­rier­ten @font-face-Anwei­sun­gen in Datei scss/_bscore_custom.scss ein­zu­fü­gen.

In der Datei scss/_bscore_variables.scss legen wir dann fest, wofür die Schrif­ten über­haupt ver­wen­det wer­den sol­len. Dazu nut­zen wir die Boostrap-Metho­dik:

Bei Boot­strap legen wir über die Varia­ble $font-family-base die ‘Haupt­schrift’ fest. Das kann die Fami­lie einer Seri­fen­schrift oder einer seri­fen­lo­sen Schrift sein. Über die Varia­ble $font-family-sans-serif legen wir die seri­fen­lo­sen Haupt­schrift fest. Eine Varia­ble $font-family-serif gibt es nicht. Wol­len wir für die Über­schrif­ten eine ande­re Fami­lie neh­men, als die der gene­rel­len Haupt­schrift, wären dafür die Varia­blen $headings-font-family und $display-font-family zustän­dig. So las­sen sich alle Kom­bi­na­tio­nen ein­fach abbil­den.


Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, hat Web-Desi­gne­rin im Rah­men ihrer Anpas­sun­gen die Fra­ge einer guten Bebil­de­rung beant­wor­tet, kann sie ent­spannt Tags und Wol­ken in ihre Site ein­bin­den, ihre Über­blicks­sei­te ver­bes­sern und eine eige­ne Landing­pa­ge gestal­ten. Ob die ent­stan­de­ne Fül­le der eige­nen Lese­rin wirk­lich nutzt, ob es nicht schlan­ker geht und wie, ob dezen­te­re Ver­wei­se und spe­zi­el­le Fonts auch für beson­de­re Anläs­se die Les­bar­keit erhö­hen, all das gilt es zu beden­ken. Das tut auch die­ser Post.


Im Übri­gen: Män­ner sind mit­ge­meint.

  1. vgl. https://kinsta.com/de/blog/html-fonts/ []
  2. vgl. https://www.w3schools.com/cssref/css3_pr_font-face_rule.php []
  3. vgl. https://technicalcommunicationcenter.com/2020/06/10/whats-a-font-font-family-typeface-font-face/ []
  4. Des­halb ist es wich­tig, die gewünsch­te Schrift­fa­mi­lie min­des­tens in den Stär­ken ‘400’ und ‘700’ und die jeweils in den Typen ‘regu­lar’ und ‘ita­lic’ bereit­zu­stel­len. []
  5. vgl. https://www.w3schools.com/cssref/css_websafe_fonts.php []
  6. Die Alter­na­ti­ve wäre, die Fonts fall­wei­se direkt von Goog­le-Font-Ser­vern hin­zu­la­den zu las­sen. Das erleich­tert Dei­ne Arbeit. Und kom­pli­ziert Dein Daten­schutz­kon­zept: Denn beim Her­un­ter­la­den fragt Goog­le Nut­zer­da­ten ab, also die Dei­ner Lese­rin. Das ver­ur­sacht Dei­ne Site. Mit­hin müss­test in Dei­nem Daten­schutz­kon­zept dar­auf hin­wei­sen. Bes­ser also, Du lädst die Fonts selbst her­un­ter, inte­grierst sie in Dei­ne Site und lie­ferst sie selbst mit aus. []
To top