5 websichere Schriftarten, die Sie auf Ihrer Website verwenden können

Veröffentlicht: 2020-10-07

Wenn Sie Inhaber einer Website sind, sollten Sie wissen, dass eine HTML-Schriftart auf Ihrer Website eine wichtige Rolle spielt. Alle Websites verfügen über Textinhalte in der einen oder anderen Form. Wenn eine gute Schriftart richtig ausgewählt wird, kann sie die Ästhetik Ihrer Seite verbessern und sich positiv auf die Lesbarkeit des Inhalts auswirken. Deshalb ist das Design und die Entwicklung einer Website in der Tat eine der wichtigsten Aufgaben wichtigsten Aspekte, um ein Unternehmen anzukurbeln. Eine schlechte Schriftart wirkt sich negativ auf die Leistung Ihrer Suite aus. Es hängt alles davon ab, ob Sie eine websichere Schriftart verwenden oder nicht.

Inhaltsverzeichnis anzeigen
  • Was ist eine websichere Schriftart?
  • Warum sind websichere Schriftarten wichtig?
  • Was sind die fünf Schriftfamilien?
    • 1. Kursivschrift (z. B. Zapf-Chancery)
    • 2. Fantasy (z. B. Star Wars)
    • 3. Serifenschrift (z. B. Times New Roman)
    • 4. Sans-Serif (z. B. Helvetica)
    • 5. Monospace (z. B. Courier)
  • Beliebte Web-Schriftarten:
    • 1. Arial
    • 2. Times New Roman
    • 3. Helvetica
    • 4. Kurier
    • 5. Calibri
  • Schriftarten-Tools zum Ausprobieren
    • Schriftartenpaar
    • Wordmark.it
    • WhatTheFont
  • Wie füge ich meiner Website websichere Schriftarten hinzu?

Was ist eine websichere Schriftart?

Typografie-Schriftarten-Zeichen-Buchstaben-Design

Eine Schriftart ist nur dann lesbar und sieht in jedem Browser oder Gerät (Mobilgerät, Tablet usw.) gleich aus, wenn die Schriftart auf diesem Gerät installiert ist. Websichere Schriftarten sind Schriftarten, die normalerweise auf jedem Gerät vorinstalliert sind – Computer, Mobiltelefone, Spielekonsolen, Tablets und Smart-TVs.

Für Sie empfohlen: 20 atemberaubende Logo-Design-Schriftarten, die jeder große Designer braucht.

Warum sind websichere Schriftarten wichtig?

Logo-Design-Schriftart-Skizze

In einer perfekten Welt können Sie jede gewünschte Schriftart für Ihre Website auswählen. Je nach Betriebssystem verfügen die Geräte jedoch über eine eigene vorinstallierte Schriftartenauswahl. Das Problem liegt darin, dass ihre Ausführungen je nach verwendetem System meist unterschiedlich sind. Geräte, die unter Windows laufen, können eine Gruppe haben, MacOS könnte eine andere haben und dann hat Googles Android eine andere, andere Version.

Wenn Sie eine Website aufrufen, ist die Schriftart, die Sie im Ansichtsfenster sehen, möglicherweise nicht unbedingt die Schriftart, die der Designer beabsichtigt hat. Bedeutung: Nehmen wir an, der Designer verwendet eine Schriftart, die relativ undurchsichtig ist. Wenn Sie diese Schriftart nicht installiert haben, würde Ihre Website auf die vom System definierte generische Schriftart zurückgreifen, und Sie kennen sie möglicherweise nicht einmal, sie würde für Sie einfach unangenehm aussehen.

Websichere Schriftarten sind eine Sammlung von Schriftarten, die auf allen Systemen vorhanden sind und Ihnen als Designer die Möglichkeit geben, die Schriftart anzugeben, auf die zurückgegriffen werden soll, falls das Gerät nicht über die benötigte Schriftart verfügt. Damit haben Sie die Möglichkeit, die Website auf verschiedenen Geräten gleich aussehen zu lassen.

Was sind die fünf Schriftfamilien?

Photoshop-Schriftarten KOSTENLOS! Hervorgehoben

In der Typografie werden alle Schriftarten aufgrund ihrer gestalterischen Ähnlichkeit in eine der fünf Schriftfamilien eingeteilt. Diese lauten wie folgt:

1. Kursivschrift (z. B. Zapf-Chancery)

Websichere Schriftarten – Punkt 1

Die Schriftfamilie Cursive imitiert die menschliche Handschrift, wobei die Buchstaben normalerweise fließend aneinandergefügt werden. Es wird oft mit Menschen mit Kalligraphie und schnellerem Schreiben in Verbindung gebracht.

2. Fantasy (z. B. Star Wars)

Websichere Schriftarten – Punkt 2

Die Schriftarten der Fantasy-Schriftfamilie weisen in der Regel dekorative Elemente in jedem Buchstaben auf, repräsentieren aber dennoch den Charakter. Die Titel vieler fiktionaler Bücher und Filme verwenden Schriftarten dieser Familie, um die Nuancen des Inhalts zu verstärken.

3. Serifenschrift (z. B. Times New Roman)

Websichere Schriftarten – Punkt 3

Das bemerkenswerteste Merkmal der Serif-Schriftfamilie ist eine kleine Linie am Ende eines großen Strichs in einem Buchstaben oder Symbol. Es schafft ein Gefühl von Eleganz und Formalität. Es wird von einer Vielzahl von Websites häufig für Fließtexte verwendet.

4. Sans-Serif (z. B. Helvetica)

Websichere Schriftarten – Punkt 4

Im Gegensatz zu den Schriftarten der Serif-Familie ist bei den Schriftarten der Sans-Serif-Familie nicht an jedem Buchstaben eine kleine Linie angebracht. Die meisten Schriftarten dieser Familie haben eine ähnliche Strichstärke und wirken dadurch minimalistisch und modern.

5. Monospace (z. B. Courier)

Websichere Schriftarten – Punkt 5

In der Monospace-Schriftfamilie nimmt jeder Buchstabe und jedes Symbol horizontal genau den gleichen Platz ein. Dadurch sind sie konsistent und leicht zu unterscheiden, weshalb sie häufig bei Schreibmaschinen und neuerdings auch bei Computerterminals verwendet werden.

Das könnte Ihnen gefallen: 11 fantastische Photoshop-Schriftarten, die Sie ausprobieren müssen (KOSTENLOS!).

Beliebte Web-Schriftarten:

Webdesign-Blog-Wordpress-Font-Typografie-Customizer

Nachdem wir nun einen Einblick in die Schriftarten erhalten haben, finden Sie unten fünf beliebte websichere Schriftarten, die Sie Ihrer Website hinzufügen können:

1. Arial

Arial-Schriftart

Eine der am häufigsten verwendeten serifenlosen Schriftarten sowohl in Online- als auch in Printmedien. Es ist der De-facto-Standard. Die OpenType-Version 3.0 beschreibt es als:

„Arial ist ein zeitgenössisches serifenloses Design, das mehr humanistische Merkmale aufweist als viele seiner Vorgänger und als solches eher im Einklang mit der Stimmung der letzten Jahrzehnte des 20. Jahrhunderts steht.“ Die Gesamtbehandlung der Kurven ist weicher und voller als bei den meisten serifenlosen Schriftarten im Industriestil. Die Endstriche sind diagonal geschnitten, was dazu beiträgt, dem Gesicht ein weniger mechanisches Aussehen zu verleihen. Arial ist eine äußerst vielseitige Schriftfamilie, die mit gleichem Erfolg für den Textsatz in Berichten, Präsentationen, Magazinen usw. sowie für den Display-Einsatz in Zeitungen, Werbung und Verkaufsförderungsmaßnahmen eingesetzt werden kann.“

Es ist auch die Standardschriftart in Google-Dokumenten.

2. Times New Roman

Times-New-Roman-Schriftart

Times New Roman ist eine Variation der alten Times-Schriftart aus der Serif-Schriftfamilie. Im Auftrag der britischen Zeitung „The Times“ im Jahr 1931 und entworfen von Stanley Morison, dem künstlerischen Berater von Monotype, dem Druckausrüstungsunternehmen, und in Zusammenarbeit mit Victor Lardent von der Beschriftungsabteilung der Werbeabteilung der Time. Sie hat sich zu einer der beliebtesten Schriftarten aller Zeiten entwickelt und ist auf den meisten Geräten vorinstalliert.

Der Name Roman in Times New Roman ist eine Anspielung auf den Roman-Stil, den ersten Teil der Times New Roman-Schriftfamilie, der entworfen wurde. Es hat seinen Ursprung im italienischen Druck des späten 15. und frühen 16. Jahrhunderts, das Design hat keine Verbindung zu Rom oder den Römern.

3. Helvetica

Helvetica-Schriftart

Helvetica oder Neue Haas Grotesk ist eine weit verbreitete Schriftart aus der Familie der Sans-Serif-Schriftarten. 1957 vom Schweizer Schriftdesigner Max Miedinger unter Mitwirkung von Eduard Hoffmann entwickelt. Es ist in einem neo-grotesken Design gestaltet und zeichnet sich durch eine hohe x-Höhe, einen Abschluss der Striche auf horizontalen oder vertikalen Linien und einen sehr ungewöhnlich engen Abstand zwischen den Buchstaben aus, was ihm zusammen ein solides, dichtes Erscheinungsbild verleiht. Ursprünglich als neutrale Schriftart konzipiert, die große Klarheit hatte, keine eigentliche Bedeutung in der Form hatte und in einer Vielzahl von Beschilderungen verwendet werden konnte und den Namen „Neue Haas Grotesk“ trug, wurde sie schnell von Linotype lizenziert und 1960 in Helvetica umbenannt , lateinisch für Schweizer. Die Schriftart wird von Designern wegen ihrer Neutralität geliebt und von vielen bekannten Marken wie Jeep, Kawasaki, Motorola und BMW bevorzugt.

4. Kurier

Courier-Schriftart

Die Schriftart Courier ist eine Schriftart, die zur Serif-Schriftfamilie gehört. Ursprünglich von Howard „Bud“ Kettler für IBM-Schreibmaschinen entworfen, wurde sie für die Verwendung als Computerschriftart angepasst und ist auf fast allen Computern vorinstalliert. Aufgrund seines Monospace-Schriftsatzes fand es in den 1990er Jahren erneut Verwendung in der Elektronik- und Computerindustrie, wo Zeichenspalten konsistent ausgerichtet werden müssen, beispielsweise bei der Codierung, wo es die Standardschriftart zum Schreiben oder Darstellen jeglicher Art von Code ist.

Gemäß Industriestandard sollten alle Drehbücher in 12-Punkt-Courier geschrieben werden. Das US-Außenministerium verwendete sie bis Januar 2004 als Standardschriftart für alle Dokumente. Mit der zunehmenden Verwendung in der digitalen Industrie hat Courier Varianten mit Funktionen wie größeren Satzzeichen und stärkeren Unterscheidungen zwischen ähnlichen Zeichen (wie der Ziffer 0 / Großbuchstabe O und Ziffer 1 / Kleinbuchstabe L) usw. für eine bessere Lesbarkeit auf dem Bildschirm.

5. Calibri

Calibri-Schriftart

Die Schriftart Calibri ist ein Mitglied der Sans-Serif-Schriftfamilie, die 2002–2004 von Lucas de Groot entworfen wurde. Es wurde 2007 im Bundle mit Microsoft Office 2007 und Windows Vista veröffentlicht. Ab Office 2007 ersetzte es Times New Roman als Standardschriftart in MS Word und Arial als Standardschriftart für MS Powerpoint, MS Excel, Microsoft Outlook und WordPad. Es ist Teil der ClearType-Schriftartensammlung, die für die Zusammenarbeit mit dem ClearType-Textwiedergabesystem von Microsoft entwickelt wurde, um Text auf Flüssigkristallanzeigen (LCDs) klarer lesbar zu machen.

Schriftarten-Tools zum Ausprobieren

Werkzeuge-Konfiguration-Einstellungen-Teile-Anforderung

Es gibt eine Reihe von Online-Tools, mit denen Sie die verschiedenen Schriftarten testen können, bevor Sie sie auf Ihrer Website verwenden. Wenn Sie die verfügbaren Schriftarten erkunden möchten oder Schwierigkeiten bei der Auswahl der Schriftart haben, sind diese Tools eine große Hilfe.

Schriftartenpaar

Websichere Schriftarten – Punkt 1

Font Pair ist eine Nischen-Website mit zahlreichen Ressourcen zum Thema Typografie. Es gibt verschiedene E-Books, Anleitungen, Rezensionen, Videos und Plugin-Empfehlungen für Schriftarten. Sie haben einen Abschnitt, der den beliebtesten bei Google verfügbaren Schriftarten gewidmet ist, und einen ausführlichen Vergleich, welche Schriftarten zusammen am besten sind.

Wordmark.it

Websichere Schriftarten – Punkt 2

Wordmark.it bietet Ihnen eine schnelle Vorschau, wie Ihr Text mit einer bestimmten Schriftart oder sogar mehreren Schriftarten zusammen aussehen würde. Geben Sie einfach den Text in die Leiste ein und schon wird Ihnen angezeigt, wie er mit verschiedenen Schriftarten aussieht.

WhatTheFont

Websichere Schriftarten – Punkt 3

WhatTheFont ist für Text das, was die umgekehrte Bildsuche für Bilder ist. Es hilft Ihnen, eine Schriftart zu identifizieren, die Sie gesehen haben. Laden Sie einfach das Bild der Schriftart hoch und es gleicht es mit der Datenbank ab und zeigt Ihnen, was seiner Meinung nach am ehesten zutrifft. Sie können auch die aktiven Foren des Unternehmens besuchen, um Hilfe bei der Identifizierung von Schriftarten oder auch bei allgemeinen typografischen Fragen zu erhalten.

Vielleicht gefällt Ihnen auch Folgendes: 3 verschiedene Möglichkeiten, benutzerdefinierte Schriftarten zu Ihrem WordPress-Site-Theme hinzuzufügen.

Wie füge ich meiner Website websichere Schriftarten hinzu?

Stellen Sie sich drei Fragen, um die Ergebnisse zu bewerten

Nachdem Sie sich nun für eine websichere Schriftart entschieden haben, ist es an der Zeit, diese anzuwenden. Wenn Sie wenig Programmiererfahrung haben, befolgen Sie diese Schritte, um Ihrer Webseite eine websichere Schriftart hinzuzufügen:

1. Öffnen Sie Ihre header.php-Datei.

2. Kopieren Sie die Schriftartquelle/den Standardcode. Normalerweise finden Sie diese über Google.

Code-1

3. Fügen Sie den Code oben in Ihre Header-Datei ein.

4. Laden Sie Ihre style.css-Datei und geben Sie den Schriftartencode ein, um den Schriftartentext Ihrer Wahl zu ändern.

Code-2

Am Ende sollte Ihr Stylesheet so aussehen:

Code-3
Autor-Bild-Abhyank-Srinet
Dieser Artikel wurde von Abhyank Srinet geschrieben. Abhyank hat einen Master in Management von ESCP Europe und einen Ingenieurabschluss mit Spezialisierung auf Instrumentierung und Steuerung. Sein Interesse an der digitalen Landschaft motivierte ihn, ein Online-Startup für Bewerbungsberatung (MiM-Essay) zu gründen, das sich auf die Verbreitung hochwertiger Informationen über den Einstieg in den Masterstudiengang konzentriert.