Die richtige Anwendung von Schriftarten spielt im Webdesign inzwischen eine große Rolle – das gilt auch fürs Responsive Webdesign, bei dem die Schrift ebenfalls einen starken Einfluss auf die Wahrnehmung einer Website hat.
Ursprünglich bezeichnete Typografie das Handwerk des Druckens von Texten mit beweglichen Lettern, den sogenannten Typen. Der Begriff ist historisch gesehen eng mit der Entwicklung der Schrift und ihrer technischen Reproduzierbarkeit durch die Druckerpresse verknüpft. Mittlerweile ist die Bezeichnung sehr viel weiter gefasst: Unter Typografie versteht man die Gestaltung von Schriften und deren Anwendung im weitesten Sinne – auch der digitalen Schrift, wie sie auf Websites oder in Computerprogrammen verwendet wird.
Es wird zwischen Mikro- und Makrotypografie unterschieden. Unter dem Begriff Mikrotypografie subsumiert man die Ausgestaltung der Schriftart als solcher sowie die Zeichen- und Wortabstände. Demgegenüber umfasst Makrotypografie alle Merkmale der Gestaltung einer gedruckten oder digitalen Textseite: Seitenformat, Satzspiegel, Schriftgröße, Zeilenabstände, -anzahl und -breite sowie die Platzierung anderer grafischer Elemente (z. B. Bilder) sind Bestandteile der Makrotypografie.
Der Begriff Font bezeichnet einen digitalen Zeichensatz, also eine bestimmte Computerschrift. Die Gestaltung einer Schrift innerhalb digitaler Textdokumente und im Web nennt man Webtypografie. Diese orientiert sich grundsätzlich an der klassischen Typografie – auch bei der Webtypografie hängt die Leserlichkeit unter anderem von der Schriftgröße, Zeilenlänge und dem Zeilenabstand ab. Darüber hinaus sind bei Internetschriften die Dateiformate und die Darstellungstechnik der Fonts zu berücksichtigen.
Die Anwendung verschiedener Schriftarten im Web hat sich im Laufe der Zeit stark geändert. Früher war die Darstellbarkeit von Schriftarten in einem Browser deutlich begrenzt – nur wenige Schriften wie Times New Roman oder Arial galten als universell kompatibel, da sie auf den meisten Computern installiert waren und für eine Website abgerufen werden konnten. Inzwischen werden ganz unterschiedliche Schriften in Form von Webfonts genutzt. Webfonts sind Schriftarten, die der Rechner per CSS zusammen mit der anzuzeigenden Website aus dem Netz lädt. Egal ob Webfonts oder lokal installierte Fonts: Bei den Schriften, die heute zum Einsatz kommen, handelt es sich fast ausschließlich um Vektorfonts, die in jeder Vergrößerungsstufe gleich gut aussehen und im Browser über eine Pixelmatrix dargestellt werden. Die gängigsten Formate für Vektorfonts sind TrueType (TTF) und OpenType (OTF).
Die Webtypografie hat sich bereits enorm weiterentwickelt, allerdings stellt das responsive bzw. reaktionsfähige Design von Internetauftritten Webdesigner vor neue Herausforderungen. Responsive Webdesign ist eine heute verbreitete Webdesign-Technik, bei der die Darstellung des Bildausschnitts einer Webseite sich an das verwendete Gerät und die Größe des Bildschirms anpasst. Auf dem Display eines Smartphones wird eine Homepage anders abgebildet als auf dem eines Tablets, Laptops oder Desktop-Computers. Die Anpassung aller Seiteninhalte an die jeweilige Bildschirmgröße betrifft dabei natürlich auch die Schrift – auch sie sollte sich in den Bildausschnitt sinnvoll eingliedern. Das bedeutet, dass auch das Schriftbild anpassungsfähig sein muss. Die Größe der Schrift und die Zeilenumbrüche des Textes passen sich im Optimalfall an jeden beliebigen Ausschnitt an. Und es gibt noch einige weitere Faktoren, die man bei der Webtypografie berücksichtigen muss:
Weiterhin sollte bei der Darstellung auf kleinen Bildschirmen die Schriftfarbe ein wenig greller und der Kontrast etwas stärker als bei einem PC-Monitor sein. Im Gegensatz zu großen Displays nutzt man die kompakteren Bildschirme mobiler Geräte nicht nur innerhalb abgeschlossener Räume, sondern auch viel unterwegs. Somit lassen sich die Lichtverhältnisse kaum beeinflussen. Schrift sollte auf kleinen Displays aber auch bei starker Hellig- oder Dunkelheit und bei Spiegelungen noch leserlich sein, was über ein satteres Schriftbild erreicht wird.
Um im Responsive Webdesign die Schrift auf allen Endgeräten bestmöglich abzubilden, werden Vektorfonts eingesetzt. Vektorfonts sind frei skalierbar und verlieren auch bei einer Vergrößerung der Schrift nicht an Qualität. Das unterscheidet sie von Bitmap-Fonts, die allein auf Basis von Punkten (Pixeln) dargestellt werden.
Allerdings können Vektorschriften – genau wie alle anderen Vektorgrafiken – ohne eine Umwandlung des Formats nicht auf Computerbildschirmen dargestellt werden, da diese nur für Rastergrafiken geeignet sind. Deswegen durchlaufen Vektoren im Vorfeld eine Rasterung, wodurch Vektorfonts letztlich also auch als Raster- bzw. Pixelgrafik auf den Bildschirm gelangen.
Mithilfe von Vektorfonts können Sie die Leserlichkeit einer Schriftart auch im Responsive Webdesign stets gewährleisten. Um das Schriftbild individuell zu gestalten und nicht von den wenigen Fonts abhängig zu sein, die auf den meisten Geräten vorinstalliert sind, können Sie Schriftarten per CSS in die Seite einbinden.
Web Safe Fonts bezeichnen Schriftarten, deren Verwendung im Web problemlos möglich ist. Schlüsselfaktor ist hierbei die Frage, ob die jeweiligen Fonts von möglichst vielen Browsern richtig dargestellt werden können. Warum die Zahl an websicheren Schriften stetig wächst und warum Webfonts eine wichtige Rolle für den Erfolg von Unternehmen im Netz spielen, verraten wir hier.
Im Responsive Webdesign ist die Typografie ein häufig vernachlässigtes Feld, obwohl die Gestaltung einer anpassungsfähigen Schrift kein Expertengeheimnis ist. Wie lässt sich diese realisieren? Und welche Webfonts taugen für ein responsives Schriftbild? Wir geben Ihnen einen Einblick in die technische Umsetzung reaktionsfähiger Webtypografie und wie Sie diese über CSS in Ihren Webauftritt...
Die Auswahl an Webschriften hat sich mit der Einführung von Webfonts gewaltig erhöht. Viele dieser Schriftarten lassen sich kostenlos herunterladen. Dank ihrer Anpassungsfähigkeit eignen sie sich perfekt fürs Responsive Webdesign – die Schrift Ihrer Webseiten passt sich den Anforderungen der Endgeräte an. Verschiedene Internet-Plattformen bieten reaktionsfähige Webfonts an, die Sie schon mit...
Die Entwicklung neuer digitaler Produkte kann zur teuren Investition werden. Wie lässt sich im Vorfeld abschätzen, ob sich die Mühe lohnt? Beziehen Sie Ihre Nutzer mit in die Produktentwicklung ein. User-Centered Design nennt sich dieser Ansatz, von dem Unternehmen und Kunden gleichermaßen profitieren.
Moderne Websites werden von einer Vielzahl ganz unterschiedlicher Geräte aufgerufen: Vom Handy mit kleinem Bildschirm bis zum hochauflösenden 4K-Profirechner ist alles dabei. Um diese Bandbreite an Ausgabemedien zu bedienen kommt das responsive Webdesign zum Einsatz. Layout, Typografie, Bilder und Navigation werden dabei so gestaltet, dass sie sich an das jeweils vorhandene Gerät anpassen.
Nur für kurze Zeit: So erhalten Sie zwei Gratis-Domains!
Kaufen Sie eine .de-Domain und erhalten Sie eine .com und .info Domain gratis dazu.
Sie empfehlen unsere Produkte über unseren Partner Aklamio weiter. Wir bedanken uns mit einer Geldprämie.
Weiterempfehlen
Professionell: 100% werbefrei