Ob auf unseren Telefonen, in Büchern oder auf Websites, wir verdauen ständig geschriebene Wörter. Von Anleitungsheften bis hin zu Ladenfronten ist Typ überall um uns herum. Wir denken oft über die Kraft des geschriebenen Wortes nach, aber selten berücksichtigen wir die Rolle des Designers bei der Nachahmung des Tons des Wortes oder Satzes.
Hinter den Kulissen hat sich ein Designer die Zeit genommen, die Beziehung zwischen dem Aussehen des Textes und dem, was der Text sagt, zu betrachten. In Wirklichkeit können unterschiedliche Stimmungen, Atmosphären und Emotionen einfach durch die Typwahl ausgedrückt werden. Aber was ist eigentlich Typografie — und warum ist sie so wichtig?
In diesem Artikel heben wir den Deckel auf alles, was Sie über Typografie wissen müssen. Wir beginnen mit der Definition der Typografie, einschließlich einer kurzen Entstehungsgeschichte. Wir werden uns dann mit den Vorteilen einer guten Typografie und den Auswirkungen auf Ihre Benutzer befassen. Schließlich werden wir uns die verschiedenen Elemente ansehen, aus denen Typografie besteht, und was sie alle bedeuten.
Hier ist, was wir behandeln werden:
- Was ist Typografie?
- Warum ist Typografie wichtig?
- Die verschiedenen Elemente der Typografie
- So wählen Sie die richtige Schriftart für Ihre Website
- Fazit
Bereit? Lass uns eintauchen!
Was ist Typografie?
Beginnen wir mit den Grundlagen: Was ist eigentlich Typografie? Im Wesentlichen ist Typografie die Kunst, Buchstaben und Text so anzuordnen, dass die Kopie für den Leser lesbar, klar und visuell ansprechend ist. Typografie beinhaltet Schriftstil, Aussehen und Struktur, die darauf abzielt, bestimmte Emotionen hervorzurufen und bestimmte Botschaften zu vermitteln. Kurz gesagt, Typografie erweckt den Text zum Leben.
Im folgenden Video erklärt CareerFoundry UI Design Mentorin Olga, warum Typografie wichtig ist — und welchen Unterschied sie für Ihre Benutzer macht.
Die Typografie lässt sich auf das 11.Jahrhundert zurückdatieren, während der Innovation der beweglichen Schrift. Vor dem digitalen Zeitalter war Typografie ein spezialisiertes Handwerk, das mit Büchern und Zeitschriften und schließlich öffentlichen Arbeiten verbunden war. Das erste Beispiel für Typografie ist in der Gutenberg-Bibel zu sehen, die eine Typografie-Revolution im Westen auslöste. Fun Fact: Der in der Gutenberg-Bibel verwendete Schriftstil ist jetzt als Textura bekannt, und Sie finden ihn heute im Dropdown-Menü Schriftart in wichtigen Desktop-Anwendungen!
Schneller Vorlauf in die Moderne, in der Typografie hauptsächlich mit der digitalen Welt und dem Druck in Verbindung gebracht wird. Mit der Geburt des Internets kam eine kreative Explosion der Kunst der Typografie. Plötzlich verfügten Webdesigner über eine Fülle von Schriftarten und Schriftoptionen, die die Typografie visuell vielfältiger als je zuvor machten.
Warum ist Typografie wichtig?
Typografie ist so viel mehr als nur die Auswahl schöner Schriften: Sie ist ein wichtiger Bestandteil des User Interface Designs. Gute Typografie schafft eine starke visuelle Hierarchie, sorgt für ein grafisches Gleichgewicht auf der Website und bestimmt den Gesamtton des Produkts. Typografie sollte Ihre Benutzer führen und informieren, die Lesbarkeit und Zugänglichkeit optimieren und eine hervorragende Benutzererfahrung gewährleisten.
Lassen Sie uns ein wenig tiefer in die Frage eintauchen, warum Typografie so wichtig ist.
Typografie schafft Markenbekanntheit
Eine gute Typografie wird nicht nur die Persönlichkeit der Website verbessern, sondern Ihre Benutzer werden unterschwellig beginnen, die auf Ihrer Website enthaltene Schrift mit Ihrer Marke in Verbindung zu bringen. Einzigartige, konsistente Typografie hilft Ihnen dabei, eine starke Nutzergemeinde aufzubauen, Vertrauen bei Ihren Nutzern aufzubauen und Ihre Marke voranzubringen.
Typografie beeinflusst die Entscheidungsfindung
Typografie hat einen tiefgreifenden Einfluss auf die Art und Weise, wie Benutzer die vom Text übermittelten Informationen verdauen und wahrnehmen. Auffällige Schriftarten sind viel überzeugender als schwache Schriftarten, die die Botschaft des Textes nicht verstärken.
Typografie zieht die Aufmerksamkeit der Leser auf sich
Gute Typografie kann den Unterschied ausmachen, ob jemand eine Minute oder eine halbe Stunde auf Ihrer Website bleibt. Es ist wichtig, dass Ihre Website visuell anregend und einprägsam ist, und Typografie spielt dabei eine große Rolle.
Die verschiedenen Elemente der Typografie
Um in die Typografie einzusteigen, müssen Sie sich zunächst mit den acht wesentlichen typografischen Gestaltungselementen vertraut machen.
Schriften und Schriften
Es gibt einige Verwirrung um den Unterschied zwischen Schriften und Schriften, wobei viele die beiden als synonym behandeln. Eine Schriftart ist ein Designstil, der eine Vielzahl von Zeichen unterschiedlicher Größe und Gewicht umfasst, während eine Schriftart eine grafische Darstellung von Textzeichen ist. Einfach ausgedrückt ist eine Schrift eine Familie verwandter Schriftarten, während sich Schriftarten auf die Gewichte, Breiten und Stile beziehen, die eine Schrift bilden.
Es gibt drei grundlegende Arten von Schrift: Serif, Sans-Serif und dekorativ. Um die Benutzeroberfläche übersichtlich und rationalisiert zu halten, wird ein guter Designer niemals mehr als drei Schriftarten verwenden — und dekorative Schriftarten auf ein Minimum beschränken. Die meisten UI-Designer kombinieren Serifenschriften mit serifenlosen Schriften, z. B. indem Sie den Haupttext in eine Serifenschrift einfügen und Ihren Titel in eine serifenlose Schriftart einfügen oder umgekehrt.
Kontrast
Ähnlich wie Hierarchie hilft Kontrast, Ihren Lesern zu vermitteln, welche Ideen oder Botschaften Sie hervorheben möchten. Wenn Sie etwas Zeit mit Kontrast verbringen, wird Ihr Text interessant, aussagekräftig und aufmerksamkeitsstark. Die meisten Designer schaffen Kontrast, indem sie mit unterschiedlichen Schriften, Farben, Stilen und Größen herumspielen, um Wirkung zu erzielen und die Seite aufzubrechen.
Konsistenz
Um eine verwirrende und unordentliche Benutzeroberfläche zu vermeiden, ist es wichtig, Ihre Schriften konsistent zu halten. Bei der Übermittlung von Informationen ist es wichtig, sich an denselben Schriftstil zu halten, damit Ihre Leser sofort verstehen, was sie lesen, und ein Muster bemerken. Es ist zwar in Ordnung, bis zu einem gewissen Grad mit Hierarchieebenen herumzuspielen, es empfiehlt sich jedoch, eine konsistente Schrifthierarchie (eine konsistente Schriftart für Überschriften, eine andere für Unterüberschriften) festzulegen und dabei zu bleiben.
White space
Oft als ’negativer Raum‘ bezeichnet, ist weißer Raum der Raum um Text oder Grafiken. Es wird oft übersehen und neigt dazu, vom Benutzer unbemerkt zu bleiben, aber die richtige Verwendung von Leerzeichen stellt sicher, dass die Benutzeroberfläche übersichtlich und der Text lesbar ist. Weißraum kann sogar die Aufmerksamkeit auf den Text lenken und bietet ein ästhetisch ansprechendes Gesamterlebnis. Leerraum hat oft die Form von Rändern, Polstern oder einfach nur Bereichen ohne Text oder Grafiken.
Ausrichtung
Ausrichtung ist der Prozess der Vereinheitlichung und Zusammenstellung von Text, Grafiken und Bildern, um sicherzustellen, dass zwischen jedem Element gleicher Abstand, gleiche Größe und gleiche Abstände vorhanden sind. Viele UI-Designer erstellen Ränder, um sicherzustellen, dass Logo, Kopfzeile und Textkörper aufeinander ausgerichtet sind. Wenn Sie Ihre Benutzeroberfläche ausrichten, sollten Sie auf Branchenstandards achten. Wenn Sie beispielsweise Ihren Text nach rechts ausrichten, ist dies für Leser, die von links nach rechts lesen, nicht intuitiv.
Farbe
Farbe ist eines der spannendsten Elemente der Typografie. Hier können Designer wirklich kreativ werden und die Benutzeroberfläche auf ein neues Niveau heben. Textfarbe ist jedoch nicht leicht zu nehmen: das Nageln Ihrer Schriftfarbe kann den Text hervorheben und den Ton der Nachricht vermitteln — aber wenn Sie ihn falsch verstehen, kann dies zu einer unordentlichen Benutzeroberfläche und einem Text führen, der mit den Farben der Website kollidiert.
Farbe hat drei Schlüsselkomponenten: Wert, Farbton und Sättigung. Ein guter Designer wird wissen, wie man diese drei Komponenten ausbalanciert, um den Text sowohl auffällig als auch klar lesbar zu machen, auch für Menschen mit Sehbehinderungen. Designer testen dies häufig, indem sie den Text in Graustufen (ohne Farbe) anzeigen und Änderungen vornehmen, wenn der Text vor dem Hintergrund der Hintergrundfarbe zu dunkel oder zu hell ist.
Hierarchie
Die Festlegung einer Hierarchie ist eines der wichtigsten Prinzipien der Typografie. Die typografische Hierarchie zielt darauf ab, eine klare Unterscheidung zwischen prominenten Texten, die zuerst bemerkt und gelesen werden sollten, und Standardtextkopien zu treffen. In Zeiten kurzer Aufmerksamkeitsspannen, die durch soziale Medien hervorgerufen werden, werden Designer aufgefordert, prägnant zu sein und Schriften zu erstellen, mit denen Benutzer die erforderlichen Informationen in kurzer Zeit konsumieren können.
Die Hierarchie kann mithilfe von Größe, Farbe, Kontrast und Ausrichtung erstellt werden. Wenn Sie beispielsweise eine Textzeile mit einem Ausrufezeichensymbol am Anfang haben, das rot und größer als die vorherige Kopie ist, ist dies ein visueller Hinweis für die Leser, dass es sich um einen Aufruf zum Handeln handelt. Das typischste Beispiel für typografische Hierarchie ist die Größe: Überschriften sollten immer größer sein als Zwischenüberschriften und Standardtext.
Wie wählen Sie die richtige Schriftart für Ihre Website?
Nachdem wir uns mit den verschiedenen Typografieelementen vertraut gemacht haben, wollen wir über den Prozess der Auswahl von Schriften für Ihre Benutzeroberfläche sprechen. Bei so vielen verschiedenen Schriftarten und Schriften zur Auswahl ist es leicht, sich überfordert zu fühlen. Die richtige Wahl zu treffen, hängt von so viel mehr ab, als nur zu sehen, was gut aussieht. Hier sind einige wichtige Überlegungen:
Denken Sie an die Persönlichkeit
Wie sollen sich Ihre Benutzer fühlen, wenn sie Ihre Website zum ersten Mal betreten. Möchten Sie eine freundliche Atmosphäre emulieren? Möchten Sie, dass sich die Website hochwertig anfühlt?, einladend, spielerisch, oder ernst? Es ist unerlässlich, dass die Typografie die Persönlichkeit der Marke oder des Produkts widerspiegelt. Ein guter Ausgangspunkt für diese Herausforderung besteht darin, die Kernmerkmale Ihrer Marke zu definieren und Schriften zu sammeln, die diese Merkmale widerspiegeln. Von dort aus können Sie beginnen, einen Trend zu bemerken.
Reflektieren Sie den Ton
Es ist ebenso wichtig zu überlegen, wie die Schriftart mit dem Ton der Nachricht harmoniert. Wenn Sie beispielsweise ernsthafte oder wichtige Informationen übermitteln möchten, wählen Sie eine weniger stilisierte oder dekorative Schriftart, die sowohl gut lesbar ist als auch die Ablenkung einschränkt.
Nicht an Funktion sparen
Funktion ist genauso wichtig wie Form: Es gibt nichts Schlimmeres als eine Website, die hübsch aussieht, aber völlig unleserlich ist, was dazu führt, dass Sie auf die falsche Schaltfläche klicken oder falsch abbiegen, weil die Anweisungen unklar waren. Wenn Sie entscheiden, welche Schriften in Ihre Benutzeroberfläche aufgenommen werden sollen, legen Sie den Stil, die Ästhetik und die Stimme beiseite und überlegen Sie, ob die Schriftart lesbar, lesbar und zugänglich ist. Kann der Text ohne Anstrengung lesbar sein? Sind die Charaktere unterschiedlich genug?
Betrachten Sie die Leistung
Eine Sache, die viele Designer oft übersehen, ist die Auswahl von Schriften, die webbrowser-freundlich sind. Häufig verwendete Schriftbibliotheken wie Google Fonts bieten webbasierte Schriftdateien, die problemlos in einem Browser perfekt gerendert werden können. Profi-Tipp: Laden Sie beim Herunterladen von Webfonts niemals mehr Zeichensätze herunter, als Sie benötigen. Auf diese Weise vermeiden Sie Übergewicht!
Lassen Sie sich inspirieren
Wenn Sie sich nicht sicher sind, wo Sie anfangen sollen, nehmen Sie sich etwas Zeit, um zu sehen, was andere Leute tun. Öffnen Sie Ihre Augen für die Typografie, die Sie um sich herum sehen. Können Sie ähnliche Muster feststellen? Können Sie gute und schlechte Beispiele für Typografie sehen? Selbst wenn Sie Typografie-Hashtags in sozialen Medien folgen oder Typografie auf Pinterest nachschlagen, erhalten Sie einige gute Ideen, was da draußen ist. Sie können sich auch diese acht Typografie-Trends für weitere Inspiration ansehen.
Nehmen Sie sich etwas Zeit zum Testen
Der beste Weg, um zu entschlüsseln, welche Schriftart für Ihre Benutzeroberfläche verwendet werden soll? Testen, testen und testen! Indem Sie nützliches Feedback von echten Benutzern sammeln, erhalten Sie einen klareren Einblick, was funktioniert, was nicht, was lesbar ist und was sich nicht intuitiv oder klobig anfühlt.
Fazit
Typografie wird oft übersehen, ist aber ein entscheidender Bestandteil des User Interface Designs. Wenn Sie die Typografie beherrschen, sind Sie auf dem besten Weg, ein fantastischer UI-Designer zu werden! Wenn Sie nicht sicher sind, wo Sie anfangen sollen, gehen Sie zu Ihren Lieblingswebsites und notieren Sie sich, für welche Schriften sie sich entschieden haben.
Möchten Sie mehr über UI-Design erfahren? Schauen Sie sich diese verwandten Blogbeiträge an:
- 10 Beispiele für schöne Blogs, die ihr UI-Design festgenagelt haben
- 32 Benutzeroberflächenelemente für UI-Designer: ihr ultimatives Glossar
- So entwerfen Sie ein Symbol von Grund auf neu: eine Schritt-für-Schritt-Anleitung