Wenn es eine Sache gibt, die für das Branding und das Erscheinungsbild deiner Webseite am wichtigsten ist, dann sind es die Schriftarten. Eine sorgfältig gewählte Schriftart kann Persönlichkeit vermitteln, lange Textpassagen besser lesbar machen und deine Marke in den Köpfen der Menschen verankern.
Aber du kannst nicht einfach irgendeine alte Schriftart herunterladen und sie auf deiner Webseite verwenden. Es gibt einige Dinge zu beachten.
Wo findest du Webfonts, welche Fonts sind mit HTML kompatibel und welche sind „websicher“ und können auf jeder Webseite verwendet werden? Wir werden sie alle in diesem Artikel erkunden.
Lasst uns beginnen!
HTML Fonts: Was sind Web Fonts?
Schriftarten haben eine lange Geschichte, aber Schriften, wie wir sie heute kennen, kamen mit dem Aufkommen von Computern und dem Internet in den breiten Gebrauch. Digitale Schriftarten mussten speziell behandelt werden, um auf Bildschirmen dargestellt werden zu können. Und als verschiedene Bildschirmgrößen und Geräte ins Spiel kamen, wurden die Dinge nur noch komplizierter.
Wenn es um digitale Schriftarten geht, gibt es ein paar verschiedene Arten. Einige Schriften sind vor allem für den Druck und das Grafikdesign gedacht. Diese sind in der Regel groß und ungeeignet für Webseiten, eignen sich aber perfekt für die Erstellung von Grafiken. Es gibt auch „websichere“ Schriftarten, die auf einem Großteil aller Geräte zu finden sind.
Für das Webdesign musst du jedoch nach Webfonts Ausschau halten, also nach Schriften, die speziell für die perfekte Darstellung im Web und auf verschiedenen Geräten entwickelt wurden. Du kannst Web-Fonts auch in E-Mails oder anderen Online-Diensten verwenden.
Es gibt ein paar Dinge, die Webfonts von den Standardschriften zum Herunterladen unterscheiden. Zum einen können sie oft nicht mit Programmen auf deinem Computer verwendet werden; sie müssen auf einen Server hochgeladen und im Internet verwendet werden.
Sie sind außerdem so konzipiert, dass sie auf verschiedenen Bildschirmen und in verschiedenen Größen lesbar sind. Sie können mit CSS gestylt werden (z.B. mit Fett- oder Kursivschrift, Farben und anderen Attributen) und bieten Unterstützung für andere Bedingungen wie die Darstellung von rechts nach links.
Während Webfonts nicht auf deinen Geräten oder denen deiner Besucher installiert werden, gibt es spezielle Möglichkeiten, sie anzuzeigen, damit jeder, der deine Seite besucht, sie sehen kann.
Du kannst diese Schriftarten entweder ganz normal herunterladen und auf deinen Server hochladen oder einen speziellen Web Font Hosting Service nutzen, der sie auf deiner Seite einbettet, ohne dass ein Download erforderlich ist.
Welche Fonts kannst du in HTML verwenden?
Einige Schriftarten sind nicht für das Web gedacht, aber welche können in deine HTML Seite eingefügt werden?
Im Grunde kannst du jede herunterladbare Schriftart auf deiner Seite verwenden. Du musst sie nur hochladen und richtig konfigurieren, dann sollte sie auf deiner Webseite angezeigt werden.
Aber obwohl du technisch gesehen jede Schriftart auf deiner Seite verwenden kannst, ist das nicht immer die beste Idee. Du solltest speziell nach Web-Fonts suchen, nicht nach Fonts, die für den Druck oder das Grafikdesign gedacht sind. Manche Schriften sind so stilisiert oder für so große Textgrößen gedacht, dass sie auf deiner Seite nicht richtig dargestellt werden können. Bei einer Webschriftart ist das kein Problem.
Bei der Verwendung von Desktop-Schriften auf deiner Seite (oder bei der Verwendung von Web-Fonts für das Druckdesign) gibt es auch lizenzrechtliche Fragen zu klären. Eine Schriftart in einem anderen Medium zu verwenden, als du sie gekauft hast, kann dich in Schwierigkeiten bringen. Achte darauf, die Lizenz deiner Schriftart sorgfältig zu lesen, bevor du sie kaufst.
Du kannst auch bestimmte Hosts ausfindig machen, die es dir erlauben, einen einfachen Aufruf im HTML zu verwenden, um ihre Schriften auf deiner eigenen Webseite zu rendern, entweder durch kostenlose oder bezahlte Pläne.
So oder so, solange die Schriftart, die du verwendest, richtig hochgeladen ist und den richtigen Dateityp hat:
- TTF
- OTF
- WOFF/WOFF2
- SVG
- EOT
Mit diesen Schriftarten kannst du sie dann auf deiner ganzen Seite verwenden und mit HTML und CSS gestalten.
Es gibt auch websichere Schriftarten, die in der Regel universell in allen Browsern und Programmen funktionieren.
Was sind websichere Schriftarten?
Ein Problem mit den meisten Web Fonts ist, dass es keine Garantie gibt, dass sie auf deiner Webseite richtig angezeigt werden. Anders als beim Grafikdesign, wo du einfach ein Bild in einem Programm erstellen und es zur Verteilung ausdrucken kannst, muss ein Browser Webfonts jedes Mal rendern, wenn jemand die Seite öffnet. Wenn deine Schriftarten nicht geladen werden, kann es passieren, dass du eine leere, kaputte Webseite hast.
Aus diesem Grund entscheiden sich einige Webseiten-Besitzer dafür, sich nur auf websichere Schriftarten zu verlassen. Diese sind auf den meisten Systemen vorinstalliert, sodass sie garantiert auf allen Geräten korrekt angezeigt werden. Außerdem laden sie in der Regel viel schneller als Webfonts, die nur langsam angezeigt werden können.
Wenn es dir nur darum geht, die Performance zu maximieren und absolut sicher zu gehen, dass deine Seite die Schriftarten korrekt anzeigt, dann sind websichere Schriftarten das Richtige für dich.
Hier ist eine Liste von websicheren Schriftarten, die im Allgemeinen gut zu verwenden sind.
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Es gibt noch Dutzende weiterer websicherer Schriftarten, aber diese sind auf allen Geräten am weitesten verbreitet.
Von all diesen sind Arial, Times New Roman, Helvetica und Courier New die sichersten. Obwohl sie als websicher gelten, funktionieren einige der anderen auf bestimmten Betriebssystemen nicht.
Das Problem ist, dass es sich nicht lohnt, dein Branding zu opfern, indem du die meisten Schriften vermeidest, es sei denn, du betreibst so etwas wie eine Regierungsseite oder eine einfache Informationsseite. Websafe-Schriften sind zwar lesbar, aber sie sind auch zu generisch und werden zu oft verwendet.
Es ist viel besser, einen schöneren, einzigartigeren Satz von Schriftarten für deine Webseite zu wählen, vor allem, da es eine Lösung für das Problem der nicht ladenden Web Fonts gibt: Fallback Fonts.
Ein Hinweis zu Font Stacks
Font Stacks, auch bekannt als Fallback Fonts, sind der einzige Grund, um fette und kreative Web Fonts zu verwenden.
Egal was du tust oder welche Vorkehrungen du triffst, es wird immer jemanden geben, der deine Schriften nicht laden kann. Vielleicht haben sie Javascript deaktiviert, so dass deine gehosteten Fonts nicht richtig gerendert werden, oder irgendetwas läuft im Code schief und verhindert, dass die von dir hochgeladenen Fonts angezeigt werden. Oder vielleicht ist eine bestimmte Schriftart nicht mit dem Gerät des Nutzers kompatibel.
Dank der Fallback-Fonts ist es einfach, eine websichere Schriftart zu laden, wenn etwas schief läuft. Das funktioniert, indem du eine Schriftart auswählst, die der Nutzer installiert hat, basierend auf der Schriftfamilie:
- Serifenschriften zeichnen sich durch kleine Striche an den Enden der Buchstabenlinien aus. Diese Schriftarten gelten als elegant und gut lesbar.
- Sans-Serif-Schriften sind ähnlich wie Serifen-Schriften gestaltet, haben aber keine Striche. Sie sind schlichter und besser lesbar.
- Monospace-Schriften haben einen gleichmäßigen Abstand zwischen den einzelnen Buchstaben, was ihnen ein markantes Aussehen verleiht.
- Cursive Fonts (oder Script Fonts) stellen formale, handgeschriebene Buchstaben dar. Sie sind nicht sehr gut lesbar und besser für Überschriften oder grafisches Design geeignet.
- Fantasieschriften (oder dekorative Schriften) sind stark stilisiert und wie kursive Schriften nicht als Fließtext geeignet.
Denke daran, dass Font Stacks tatsächlich ein „Stack“ sind; es ist durchaus möglich, mehrere Fallback-Fonts in Folge zu haben. Achte nur darauf, dass du immer eine websichere Schriftart am Ende des Stacks hast und du immer noch eine Chance hast, dein Branding mit einer ähnlichen Schriftart zu vermitteln, wenn die Hauptschriftart ausfällt.
Wie man Fonts mit HTML hinzufügt
Wenn du eine Webschriftart auf deiner Seite einfügen möchtest, hast du einige Möglichkeiten.
Für WordPress-Nutzer ist der einfachste Weg, Schriftarten auf deine Seite zu bekommen, ein Plugin zu verwenden. Die zwei beliebtesten sind Easy Google Fonts und Use Any Font. Ersteres vereinfacht das Hinzufügen von Google Fonts auf deiner Webseite, während UAF es dir ermöglicht, Schriften direkt auf deine Seite hochzuladen.
Wenn du kein WordPress verwendest oder dich nicht auf ein Plugin verlassen willst, wird der Prozess einige manuelle Eingriffe erfordern.
Zunächst kannst du Schriftarten verwenden, die woanders gehostet werden, wie z.B. bei Google Fonts. Die Anleitung dazu hängt davon ab, welchen Dienst du wählst. Bei Google Fonts müsstest du die Schriftart, die du verwenden willst, in deinen <head> einbetten und dann aufrufen, wenn du sie verwenden willst.
Du kannst Schriftarten, die du aus dem Internet heruntergeladen hast, auch lokal auf deiner Webseite hosten. Das kann vorteilhaft sein, weil du dich dann nicht auf Drittanbieterdienste verlassen musst.
Glücklicherweise ist dies sehr einfach zu bewerkstelligen, solange du eine richtig konfigurierte Webschrift hast. Lade die Dateien einfach auf deinen Server hoch und benutze dann die @font-face Regel in deinem Stylesheet, um sie zu definieren. Zum Beispiel:
@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}Dann kannst du den font-family-Tag verwenden, um deine Schriftart dort aufzurufen, wo du sie im HTML-Dokument haben möchtest.
Schriftarten mit HTML und CSS stylen
Sobald deine Schrift sicher auf deiner Webseite hochgeladen ist, kannst du sie mit HTML und CSS stylen. Selbst wenn du nur wenig Programmierkenntnisse hast, ist das Styling einer Schriftart ziemlich einfach. Du kannst die Textfarbe, die Hintergrundfarbe, die Größe, den Stil oder das Gewicht ändern.
Hinweis: Wenn du mit älteren HTML-Versionen gearbeitet hast, erinnerst du dich vielleicht an den <font>-Tag. Dieser wird nicht mehr unterstützt und sollte nicht mehr verwendet werden. Stattdessen kannst du Text mit CSS oder einem HTML-Style-Element stylen.
Als erstes kannst du die Schriftart mit Farbcodes ändern. Du kannst entweder einen Farbnamen wie „red“, einen RGB-Code oder einen HEX-Wert verwenden. Dieser wird mit der Eigenschaft color wie folgt gesetzt:
p {
color: blue;
}
Oder in einem individuellen HTML-Style-Element:
<p style="color:blue;">Text.</p>
Die Hintergrundfarbe ist die selbe, aber mit dem Attribut background-color.
p {
background-color: blue;
}Als nächstes kommt die Schriftgröße. Diese kann entweder in Pixeln, Prozenten oder ems angegeben werden (was gut für die Gestaltung von responsive Seiten ist).
p {
font-size: 16px;
}oder:
<p style="font-size:200%;">Text.</p>
Und zuletzt sind Schriftart und -stärke, oder kursiv und fett. Für schrägen Text benutze den „italic“ Tag.
.italic {
font-style: italic;
}
And for bold:
.bold {
font-weight: bold;
}
Du kannst stattdessen auch HTML-Tags verwenden. Für Kursivschrift kannst du verwenden:
<em>für einen Text, der eine Betonung oder einen Gebrauch vermittelt:
<i> für einen Text, der visuell deutlich sein soll.
Und für fett, benutze:
<b>or<strong>
Zum Beispiel:
<b>Bold Text</b>
oder
<strong>I'm of special importance.</strong>Wo bekommt man HTML Fonts?
Egal, ob du einen Third-Party Font Host nutzen oder sie herunterladen möchtest, du musst wissen, wo die besten Orte sind, um Fonts zu finden. Es gibt hunderte von Distributoren, aber nur eine gute Handvoll sind als zuverlässige Quellen für Schriften bekannt. Hier sind ein paar:
- Google Fonts ist einer der besten Orte, um Fonts zu bekommen. Und warum? Du kannst sie ganz einfach auf deiner Seite einbinden, ohne sie herunterzuladen, die Auswahl ist riesig und wunderschön, und das Wichtigste, sie ist komplett kostenlos. Die Google-Server sind immer schnell, du kannst dich also darauf verlassen, dass sie die Schriften mit so wenig Verzögerung wie möglich liefern.
- Adobe Fonts bietet Tausende von Schriftarten mit jedem Creative Cloud-Abonnement. Bei anderen Diensten (die nicht auf Open-Source-Schriften setzen, wie z.B. Google Fonts) musst du dir oft Gedanken über die Lizenzierung machen. Diese Fonts sind für die Verwendung in jedem Projekt freigegeben, egal ob privat oder kommerziell.
- Fonts.com hat eine große Auswahl an Schriftarten für den Desktop- und Webgebrauch. Sie bieten dir den Code, den du brauchst, um sie auf deine Seite zu bekommen. Das Problem ist, dass es mehrere verschiedene Lizenzen gibt und das kann ein bisschen verwirrend sein. Die Bezahlung basiert auf einer einmaligen Gebühr oder einem Pay-as-you-go-Modell.
- TypeNetwork bietet hochwertige Schriften für seriöse Projekte mit einer Vielzahl von Lizenzierungsoptionen. Erwerbe Schriften für Desktop, Web, Anwendungen oder ePub. Für Web-Fonts gibt es außerdem eine zusätzliche Option: gehostet oder selbst gehostet.
- Bevor es Google Fonts gab, war Font Squirrel der Ort, an dem man kostenlose, kommerziell lizenzierte Fonts für die Verwendung in jedem Projekt finden konnte. Die Auswahl ist ziemlich groß, aber leider gibt es keine Option zum Hosten der Schriften. Du musst die Schriftarten herunterladen und manuell auf deine Seite hochladen. Auch sind nicht alle Schriften für das Web optimiert, aber du kannst den Webfont Generator
Die 10 besten HTML Fonts
Es gibt tausende von Web Fonts da draußen, aber wo soll man anfangen? Hier sind zehn einfache HTML Fonts, die auf jeder Webseite gut aussehen würden. Diese sind alle websicher, also sollten sie auf fast allen Geräten funktionieren. Sie sind auch großartige Fallback-Schriften.
Wenn du etwas Aufregenderes brauchst, haben wir jede Menge Artikel über kursive Schriftarten, Kalligraphie-Schriftarten und moderne Schriftarten.
1. Arial
Arial ist die bekannteste aller Schriftarten. Sie ist nicht die schönste, aber sie ist einfach und nützlich in einer Vielzahl von Situationen.
2. Times New Roman
Times New Roman ist auch eine sehr verbreitete Schriftart. Sie ist am besten geeignet, wenn du eine eher formelle Seite betreibst. Diese Serifenschrift ist nicht besonders aufregend, aber sie lenkt auch nicht ab.
3. Palatino
Palatino kommt dir vielleicht bekannt vor, da sie oft im Buchdruck verwendet wird. Jetzt ist sie eine elegante digitale Schriftart, die standardmäßig auf vielen Geräten enthalten ist.
4. Verdana
Verdana ist bekannt dafür, sehr gut lesbar zu sein und sieht auch in großen Größen noch gut aus. Diese serifenlose Schrift ist eine gute Alternative zur Arial.
5. Courier New
Courier New erinnert an alten Schreibmaschinentext und ist ein großartiges Monospaced-Design für Seiten, die einen altmodischen, aber gut lesbaren Look wünschen.
6. Calibri
Calibri ist eine einfache, schöne serifenlose Schriftart, die standardmäßig in Programmen wie Microsoft Office enthalten ist. Allerdings ist es eine proprietäre Schriftart, sodass sie oft nur auf Windows-Betriebssystemen unterstützt wird.
7. Georgia
Diese abgerundete Serifenschrift ist inspiriert von der ähnlichen, websicheren Schrift Garamond. Wenn du eine formale Schriftart brauchst, die nicht ganz so seriös ist wie Times New Roman, ist sie eine gute Wahl.
8. Garamond
Ähnlich wie die Palatino ist die Garamond eine klassische Schriftart, die oft für den Buchdruck verwendet wird. Obwohl sie für moderne Betriebssysteme aktualisiert wurde, sieht sie immer noch ziemlich altmodisch aus.
9. Didot
Die minimalen Buchstabenabstände dieser Serifenschrift geben ihr ein einzigartiges Aussehen und Gefühl. Du kannst sie auf den meisten Apple-Geräten finden.
10. Tahoma
Diese saubere Schriftart hat als Standardschrift für ältere Windows-Betriebssysteme fungiert. Ihr kühneres Erscheinungsbild lässt sie gerade genug hervorstechen, ohne abzulenken.
Zusammenfassung
Es ist wichtig, dass du Schriftarten auswählst, die auf deiner Webseite gut aussehen, lesbar sind und deine Marke verkörpern. Es gibt verschiedene Webseiten, auf denen du kostenlose Schriftarten installieren oder lizenzierte gegen eine Gebühr herunterladen kannst, und wir haben ein paar Beispiele für gute Schriftarten für den Anfang zusammengestellt.
Du musst dich nicht mit langweiligen, websicheren Schriftarten begnügen, die du schon seit Jahrzehnten überall im Internet siehst. Dank der Fallback-Fonts kannst du jede Typografie verwenden, die dir gefällt, und einen Fallback festlegen, der verwendet wird, wenn sie nicht geladen wird.
Egal ob du diese HTML Fonts auf deiner Webseite, in E-Mails oder in deinem Logo verwendest, stelle sicher, dass du viele Tests durchführst, damit deine Seite lesbar bleibt und die Typografie gut mit dem Rest deines Designs harmoniert.
Schreibe einen Kommentar