Ty­po­gra­fie im Re­spon­si­ve Webdesign - Teil 2: Geeignete Schrift­ar­ten

Wenn Sie eine Schrift für Ihre re­spon­si­ve Website suchen, können Sie sich aus dem reich­hal­ti­gen Angebot an so­ge­nann­ten re­spon­si­ven Webfonts (re­ak­ti­ons­fä­hi­gen Schriften für In­ter­net­sei­ten) im Netz bedienen.

Kos­ten­lo­se Webfonts fürs Re­spon­si­ve Webdesign

Webfonts eignen sich als Grundlage für die Ty­po­gra­fie im Re­spon­si­ve Webdesign, da sie auf Vek­tor­gra­fi­ken basieren, die frei ska­lier­bar sind. Beim Aufruf einer Webseite, die Webfonts verwendet, werden die Schriften von einem Server her­un­ter­ge­la­den und an­schlie­ßend zur Anzeige im Web­brow­ser des Users umgesetzt. Re­ak­ti­ons­fä­hi­ge Webfonts passen sich hierbei den An­for­de­run­gen des je­wei­li­gen Browsers bzw. An­zei­ge­ge­räts an. Diverse Internet-Platt­for­men halten re­spon­si­ve Webfonts zum Download bereit – teils gratis, teils kos­ten­pflich­tig. Bekannte Anbieter von ge­büh­ren­pflich­ti­gen Schrift­ar­ten sind bei­spiels­wei­se Adobe Fonts oder Font­spring, die mit einer großen Auswahl an bekannten Schrift­ar­ten, darunter vielen Klas­si­kern, aufwarten.

Genauso können Sie aber auch auf das nicht weniger viel­fäl­ti­ge Angebot an kos­ten­frei­en Webfonts zu­rück­grei­fen. Samm­lun­gen freier Webfonts finden Sie z. B. bei Google Fonts, Font Squirrel oder DaFont. Nicht alle dort er­hält­li­chen Schrift­ar­ten eignen sich für den all­ge­mei­nen Gebrauch: Einige sind zu verspielt oder un­ge­wöhn­lich und deshalb nur für spezielle Belange zu empfehlen; manche enthalten keine Umlaute oder andere Son­der­zei­chen – generell variiert der Zei­chen­um­fang der Schrift­ar­ten, teilweise stark. Achten Sie daher darauf, dass Sie für Ihr Re­spon­si­ve Webdesign eine Schrift auswählen, die aus­rei­chend viele Zeichen umfasst. Ex­em­pla­risch stellen wir Ihnen einige viel­sei­tig ein­setz­ba­re Google Fonts für Ihre Website vor.

Web­ty­po­gra­fie-Beispiele von Google Fonts

Die Plattform Google Fonts wird von vielen Web­de­si­gne­rin­nen und -designern als Quelle von Schriften für eine re­ak­ti­ons­fä­hi­ge Ty­po­gra­fie genutzt. 2010 ging die Seite online. Von Anfang an wurden aus­schließ­lich kos­ten­lo­se Open-Source-Fonts angeboten, die sowohl für nicht­kom­mer­zi­el­le als auch für kom­mer­zi­el­le Zwecke genutzt werden dürfen. Sie haben die Auswahl aus über 1.900 ver­schie­de­nen Webfonts. Alle Fonts können Sie her­un­ter­la­den und über einen Code in Ihren Web­auf­tritt einbetten.

Open Sans

„Open Sans“ gehört zu den klas­si­schen Standard-Webfonts. Es handelt sich um eine se­ri­fen­lo­se Schrift mit klas­si­schem, schlich­tem Er­schei­nungs­bild. Sie wurde von Steve Matteson entworfen und ist für die Nutzung im Web, für mobile Geräte und für den Print­be­reich optimiert.

Close

Lato

„Lato“ ist eine weitere populäre Schrift­art ohne Serifen. Sie wurde von Łukasz Dziedzic ent­wi­ckelt und mit der Un­ter­stüt­zung von Google ver­öf­fent­licht.

Close

Roboto

„Roboto“ wurde zunächst als Schrift­art für das Be­triebs­sys­tem Android genutzt und seitdem kon­ti­nu­ier­lich wei­ter­ent­wi­ckelt. Der ebenfalls se­ri­fen­lo­se Webfont besteht aus relativ schmalen Buch­sta­ben, wodurch mehr Zeichen in eine Zeile passen als bei vielen anderen Schriften.

Close

Source Serif 4

„Source Serif 4“ ist eine von Adobe ent­wi­ckel­te Schrift­art, die Be­stand­teil der Source-Font­fa­mi­lie ist. Die Se­ri­fen­schrift kann als Ergänzung zum se­ri­fen­lo­sen Font „Source Sans 3“ und der Monospace-Schrift „Source Code Pro“ dienen, die Adobe ebenfalls kos­ten­frei be­reit­stellt.

Close

Playfair Display

Wenn Sie auf eine stilvolle Schrift mit Serifen zu­rück­grei­fen möchten, ist der Webfont „Playfair Display“ eine gute Wahl. Sie können zwischen ver­schie­de­nen Stilen der eher de­ko­ra­ti­ven Schrit wählen.

Close

Webfonts über Google Fonts einbinden

Viele Webfonts befinden sich in den Da­ten­ban­ken mehrerer Anbieter. Die hier vor­ge­stell­ten Schrift­ar­ten findet man bei­spiels­wei­se auf Google Fonts und Font Squirrel. Wir zeigen Ihnen wiederum bei­spiel­haft, wie Sie die Schrift­art „Open Sans“ über Google Fonts einfügen.

• Geben Sie im Suchfeld „Open Sans“ ein und wählen Sie die Schrift­art. Dort klicken Sie auf den Button „Get font“.
• Daraufhin werden Ihnen noch einmal die wich­tigs­ten In­for­ma­tio­nen zum Webfont angezeigt. Mit einem Klick auf den Button „Get embed code“ fahren Sie fort.
• Nun wird Ihnen je ein Code für den <head> Ihrer Webseiten und für das CSS-Dokument angezeigt. Sie haben außerdem die Mög­lich­keit, den ge­wünsch­ten Stil der re­spon­si­ven Schrift ein­zu­stel­len.
• Um „Open Sans“ in HTML ein­zu­bin­den, fügen Sie im <head> den ent­spre­chen­den Code (der auch den Link zu Google Fonts enthält) ein. Die Anweisung sieht dann so aus:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>So binden Sie einen Webfont von Google ein</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>

Mit dem zweiten Code de­fi­nie­ren Sie die Schrift in CSS:

/ *Schrift anwenden – Beispiel für Open Sans* /
body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400; / *Normales Gewicht* /
    font-style: normal;
}

Wie Sie sehen, ist das Einfügen eines Webfonts über den Google-Service aus­ge­spro­chen simpel. Neben dieser Variante können Sie bei Google Fonts außerdem die @import-Regel in CSS nutzen, um die Schrift ein­zu­bin­den.

Fazit: Fürs Re­spon­si­ve Webdesign gibt es viele gute Schriften gratis

Für an­pas­sungs­fä­hi­ge Webseiten steht eine breite Palette an Schrift­ar­ten zur Verfügung. So können Sie pro­blem­los kos­ten­freie Webfonts von Google Fonts, Font Squirrel u. a. verwenden. Al­ler­dings sollte Ihnen auch bewusst sein, dass gerade die beliebten Schriften wie „Open Sans“, „Roboto“ oder „Lato“ sehr häufig im Web benutzt werden. Eine besonders in­di­vi­du­el­le, gar ein­zig­ar­ti­ge Schrift­art (etwa im Sinne einer Haus­schrift) erhalten Sie nicht als kos­ten­lo­sen Webfont. Dafür gestatten Ihnen die frei ver­füg­ba­ren Schriften einen sehr großen Freiraum bei der re­spon­si­ven Web­ty­po­gra­fie. Außerdem ist die Ein­bin­dung in die Webseite schnell erledigt – so pro­fi­tie­ren Ihre Be­su­che­rin­nen und Besucher innerhalb kürzester Zeit von re­ak­ti­ons­fä­hi­gen Webfonts.