Divi Themebuilder im Härtetest
März 20, 2021
Der Divi Themebuilder ist sicherlich einer der besten Theme- und Pagebuilder auf dem Markt. Wie schneidet er im Test ab?
Web-Typografie:
Der vollständige Leitfaden für Designer
Inhaltsverzeichnis
Erstellen Sie ein Design-System für Ihre Website
Machen Sie sich bereit, Ihre Webdesign-Fähigkeiten zu verbessern, indem Sie die Besonderheiten der Typografie kennenlernen. In dieser umfassenden Anleitung zur Web-Typografie erfahren Sie alles, was Sie für die Erstellung Ihres Web-Design in punkto Typografie benötigen.
Obwohl seine starke Bedeutung oft übersehen wird, spielt Typografie eine grundlegende Rolle bei der Web-Erstellung – dies bedeutet Branding, visuelles Design, Benutzererfahrung, Benutzeroberfläche, Inhaltsstrategie… das gesamte Umfeld. Aber bevor wir beginnen, was ist Web-Typografie und warum ist sie wichtig? In diesem Artikel behandeln wir alles, was Sie über Typografie als Web-Ersteller wissen müssen. Wir sprechen über Konzepte, Prinzipien, Terminologien, Richtlinien zur Auswahl der besten Schriftarten und natürlich über Aktionselemente.
Typografie ist im einfachsten Sinne die Kunst und Technik des Arrangierens von Schrift. Es geht nicht nur um das Design oder die Zusammensetzung der Buchstaben und Zeichen und ihre Anordnung. Natürlich geht es um diese Dinge – aber es geht auch um Kommunikation, visuelle Identität, Markenpersönlichkeit, Benutzerfreundlichkeit und vieles mehr.
Bevor wir uns mit den Vor- und Nachteilen der Typografie für das Webdesign befassen, ist ein wichtiges Thema, warum Typografie so wichtig ist. Wenn Leute eine Website besuchen, um ihren Text zu lesen, suchen sie letztendlich nach Informationen über Sie – und wir wissen, dass Wörter wichtig sind.
Als Web-Ersteller können wir definitiv zu schätzen wissen, dass die Präsentation dem Inhalt einer Website gleichwertig ist. So wie das visuelle Design, die interaktiven Funktionen und die Gesamtfunktionalität einer Website die Qualität einer Website bestimmen, gilt dies auch für ihre Typografie.
Nachdem Sie diesen Artikel gelesen haben, können Sie Ihr Wissen und Ihr Verständnis über das Wesentliche der Web-Typografie und darüber, wie sie jede Website erstellen oder beschädigen kann, umsetzen.
Die Herausforderungen der Web-Typografie
Grundlegendes zum Lesen von Bildschirmen im Vergleich zum Lesen von Drucken
Zuerst denken Sie vielleicht, dass es keinen großen Unterschied zwischen dem Lesen von einem Bildschirm und dem Lesen von Papier gibt. Schließlich handelt es sich bei beiden um visuelle Verarbeitungserlebnisse, bei denen Sie Informationen verbrauchen, indem Sie Buchstaben des Alphabets auf einem Hintergrund lesen. Aber denken Sie noch einmal. Die Unterschiede zwischen Printdesign und Webdesign und ihren jeweiligen Leseerfahrungen sind in der Tat zahlreich.
Logischerweise besteht der grundlegendste Unterschied zwischen Druckdesign und Webdesign darin, dass Druck ein physisches, greifbares Objekt mit festem, statischem Inhalt ist. Alternativ ist der Bildschirminhalt dynamisch und ändert sich ständig, da der Bildschirm ein adaptives Medium ist.
Dies bedeutet, dass jedes Blatt Papier eine definitive, konstante Größe hat, die sich nicht ändert, und wir wissen im Voraus, wie groß diese Papiergröße ist. Beim Entwerfen von Inhalten für einen Bildschirm (ob Bilder, Akzente oder Textelemente) entwerfen wir für eine Reihe von Möglichkeiten, z. B. unterschiedliche Auflösungen, Größen und Geräte. Aber das ist ein Thema an und für sich, das wir in Kürze diskutieren werden.
Aus verhaltenstechnischer Sicht scannen und springen wir beim digitalen Lesen mehr herum. Dies könnte daran liegen, dass wir nach Schlüsselwörtern suchen, um so viele Informationen wie möglich in kürzester Zeit zu erhalten. In Bezug auf die Geschwindigkeit haben Studien der Nielsen Norman Group sogar ergeben, dass Menschen beim Lesen von einem Bildschirm 25% langsamer lesen als beim Lesen von Papier.
Anpassung an verschiedene Bildschirmgrößen
Sobald wir als Web-Entwickler die Worte „verschiedene Bildschirmgrößen“ hören, werden viele von uns oft sofort an reaktionsschnelles Design denken. Und wenn wir Responsive Design sagen, meinen wir nicht nur Websites, die sowohl auf Desktop- als auch auf mobilen Websites gut aussehen. Es ist mehr als das – seit März 2018 hat Google seine Initiative „Mobile First Indexing“ angekündigt . In der Praxis bedeutet dies, dass die Google-Suchmaschine überwiegend die mobile Version des Inhalts für die Indizierung und das Ranking verwendet. Selbst wenn Ihre Website auf Desktop-Anwendungsfälle ausgerichtet ist, ist es dennoch genauso wichtig, dass sie für Handys geeignet ist, zumindest wenn Sie möchten, dass sie auf der guten Seite von Google bleibt.
Wie verbindet sich das mit Typografie?
Dies bedeutet, dass Ihre Designs, einschließlich der Typografie Ihres Textes (Titel, Überschriften, Absätze, Schaltflächentexte usw.), auf Mobilgeräten gut aussehen müssen. In Bezug auf unseren Designprozess werden die Dinge etwas komplexer. Sie haben einen kleineren Bildschirm zum Arbeiten, aber nicht unbedingt weniger Text. Dies bedeutet häufig, dass Sie ein typografisches Schema erstellen müssen, das flexibel ist und mehrere Bildschirmgrößen aufnehmen kann. Diese Priorität kann sich auf Schriftfarbe, Schriftart, Schriftgröße, Schriftgröße und viele andere Gestaltungsmöglichkeiten auswirken.
Sobald Sie ein tieferes Verständnis dieser einzelnen Typografiekomponenten haben (und wie sie im Webdesignprozess zusammenpassen), können Sie Ihr Wissen auf das Entwerfen eines flexiblen Layouts anwenden, das reaktionsschnelle Typografieoptionen enthält.
Und vergessen Sie nicht die Beziehung zwischen Typografie und Benutzererfahrung . Die Notwendigkeit einer reaktionsschnellen Typografie ergibt sich häufig aus der Notwendigkeit, die Umstände des Website-Besuchers zu berücksichtigen, wie und wo er den Text auf Ihrer Website anzeigen wird.
Berücksichtigung der Bildschirmauflösung
Im Allgemeinen bezieht sich die Bildschirmauflösung auf die Anzahl der Pixel, die ein Bildschirm horizontal und vertikal enthält, z. B. 1024 × 768. Mit anderen Worten, die Anzahl der Punkte, die ein Bildschirm pro Zoll anzeigt. In der Praxis (und notieren Sie dies zur späteren Bezugnahme) – beträgt die Auflösungsgröße (auch als Messung der maximalen Pixelanzahl bezeichnet), die die Auflösung eines Bildschirms halten kann, 1024 Pixel horizontal und 768 Pixel vertikal.
In Bezug darauf, wie sich die Größe der Auflösung auf das auswirkt, was wir tatsächlich auf dem Bildschirm sehen: Niedrigere Auflösungen zeigen Elemente in größerer Größe auf dem Bildschirm an, um die Anzeige so scharf wie möglich zu halten. Dies bedeutet jedoch, dass weniger Seiten auf den Bildschirm passen. Monitore mit höherer Auflösung können wiederum mehr von der Website-Seite anzeigen, z. B. die gesamte Falte plus etwas unterhalb der Falte – aber auch, dass die Elemente auf der Seite kleiner aussehen, wenn auch schärfer.
Wenn wir im Kontext der Typografie sagen, dass ein Designer die Bildschirmauflösung berücksichtigen und die Schriftgröße basierend auf der Auflösung auswählen muss, bedeutet dies, dass das optische Gewicht (wie das menschliche Auge die Größe und Bedeutung eines Objekts wahrnimmt) ausgewählt wird, um sicherzustellen, dass die Die Schrift funktioniert definitiv wie vorgesehen mit jeder Bildschirmgröße und Auflösung.
Wie bereits erwähnt, erhöht eine Erhöhung der Bildschirmauflösung die Anzahl der Pixel pro Zoll. Bei der Typografie sind die Schriftgrößen eine feste Anzahl von Pixeln. Je höher die Auflösung, desto kleiner wird die Schrift, da die Schriftpixel weniger Platz beanspruchen. Letztendlich hängt der Platz, den der Text auf dem Bildschirm einnimmt, von der Auflösung des Bildschirms ab. Und hier kommt die Diskussion über reaktionsschnelle Typografie ins Spiel.
Festhalten an Responsive Text
Responsive Text selbst ist das Gestaltungsprinzip, nach dem Texte auf einer Webseite auf einer Vielzahl von Geräten und Bildschirmgrößen leicht lesbar sein sollten. Das Erstellen einer reaktionsschnellen Typografie bedeutet nicht nur, dass Sie einen Text auswählen, dessen Größe sich zwischen verschiedenen Bildschirmen ändert. Es geht auch um Lesbarkeit , die eine Beziehung zwischen Text und seinen umgebenden Elementen erfordert – wobei die Größe jedes Elements in Bezug auf seine umgebenden Elemente bestimmt wird.
Designer und Entwickler programmieren häufig die Typgröße der Site so, dass sie durch die Bildschirmgröße selbst bestimmt wird. Dies ist eine in CSS-Stylesheets übliche Methode. Eine andere CSS-bezogene Methode ist die Verwendung der Schriftmaßeinheiten rem und em. Wir werden diese beiden Themen auch später ansprechen. Letztendlich wird die Größe von reaktionsschnellem Text in Bezug auf die umgebenden Faktoren angepasst. Dies bedeutet, dass Sie Einschränkungen hinsichtlich der Schriftgröße erstellen, die auf Bildschirmgröße, Ansichtsfenster, Haltepunkten sowie Größen- und Größenanpassungseinheiten basieren
Sicherstellung der Genauigkeit durch Monitorkalibrierung
Wenn wir von Kalibrierung sprechen, beziehen wir uns auf die Kalibrierung Ihres Monitors , damit Farbe und Kontrast vollständig genau angezeigt werden. Auf diese Weise wird Ihre Arbeit (als Designer oder sogar als Fotograf) von Website-Besuchern genau so angezeigt, wie Sie es beim Entwerfen beabsichtigt haben.
Der Hauptgrund, warum die Monitorkalibrierung beim Erstellen Ihrer Website-Typografie von entscheidender Bedeutung ist, besteht darin, dass sowohl die Schriftfarbe als auch der Kontrast zwischen Text und Hintergrund beeinflusst werden können. Das Letzte, was Sie möchten, ist, dass zwischen Ihrer Schriftfarbe und ihrem Hintergrund ein schlechter Kontrast besteht. Wenn das menschliche Auge in Bezug auf die Lesbarkeit Schwierigkeiten hat, zwischen dem Text und seinem Hintergrund zu unterscheiden, kann es sein, dass es das Lesen dieses Textes schnell aufgibt und daher Ihre Website und / oder seinen Inhalt viel früher aufgibt, als Sie es sich erhofft hätten .
Die Schlüsselelemente der Web-Typografie
Nachdem wir einige der Herausforderungen der Web-Typografie kennengelernt haben, besteht der nächste Schritt darin, die verschiedenen Konzepte und Definitionen zu untersuchen, die die Typografie als Thema mit sich bringt. Wenn wir diese Terminologie genauer verstehen, sind wir der Beherrschung typografischer Fähigkeiten und ihrer Anwendung auf unsere Entwurfsarbeit einen Schritt näher gekommen
Grundlegendes zu generischen Schriftfamilien
Als wir beginnen, die Bedeutung der Typografie im Webdesign zu erfassen, ist einer der ersten Designbegriffe, die zu verstehen und zu beherrschen sind: generische Schriftfamilien . Die Schriftarten und Schriftarten, aus denen wir jedes Mal auswählen, wenn wir den Text auf unseren Websites gestalten, können jeweils einem von zwei Hauptstilen zugeordnet werden: Serife, serifenlos oder kursiv. Lassen Sie uns nun diese Klassifizierung verstehen und wissen, wie Sie den Stil und die Schriftfamilie einer bestimmten Schriftart kennen.
Serif
Im technischsten Sinne haben Serifenschriftfamilien dekorative Striche oder Schwänze (manche nennen sie Füße oder Schwänze), die das Ende eines Buchstabenstiels abschließen. Diese Striche können unterschiedlich schwer sein, wodurch einige Bereiche eines Buchstabens dicker oder dünner als andere werden. Als kollektive Stilkategorie sind Serifenschriften allgemein als glatt, abgerundet und dekorativ bekannt – sie werden häufig für lange Textkörper wie Bücher, Zeitungen, viele Magazine usw. verwendet. Dies liegt hauptsächlich daran, dass Serifenschriften beim Schreiben leicht lesbar sind in kleinen Körperkopiengrößen.
Einige der bekanntesten Serif-Schriftfamilien sind:
- Times New Roman
- Georgia
- Palatino
- Garamond
Wie Sie vielleicht bereits bemerkt haben, verwenden Marken und professionelle Unternehmen häufig Serifen für ihr Logo (und ihre Website), wenn sie seriöser, etablierter, formeller usw. erscheinen möchten. Beispiele für diese Geschäftstypen können Rechtspraktiken, Medienpublikationen und Versicherungen sein Unternehmen, Arztpraxen und der Geschmack.
Serifenlos
Sans Serif-Schriften sind solche, die am Ende ihrer Striche keine erweiterten Funktionen (Serifen) haben. Diese Beschreibung stammt tatsächlich aus der französischen Sprache und bedeutet serifenlos. Diese Schriften haben in der Regel eine gleichmäßigere Dicke in den verschiedenen Teilen jedes Buchstabens und werden verwendet, um minimalistisches Design , Modernität und vor allem Einfachheit zu vermitteln.
Zurück zu unserer Diskussion der Unterschiede zwischen Bildschirmlesen und Drucklesen ist es wichtig zu beachten, dass Serifenschriftarten für Computerbildschirme – wie Websites, Blogs, Software usw. – beliebter sind. In diesen Anwendungsfällen sind serifenlose Schriftarten Wird für die Anzeige verwendet, z. B. für Überschriften, Untertitel, Schaltflächentexte usw., und nicht für Textkörper.
Einige der am häufigsten verwendeten serifenlosen Schriften sind:
- Avenir
- Roboto
- Öffnen Sie Sans
- Quelle Sans Pro
- Lato
- Montserrat
- Proxima Nova
Der Unterschied zwischen einer Schriftfamilie und einer Schrift
Der Begriff Schrift kann auch als Schriftfamilie bezeichnet werden: eine Reihe von Zeichen (Buchstaben des Alphabets) mit demselben Design – unterschiedlicher Größe und Gewicht. Schriften sollten nicht mit Schriften verwechselt werden, da eine Schrift eine grafische Darstellung des Textzeichens der Schrift ist. Im Wesentlichen ist eine Schrift eine Familie verwandter Schriftarten (daher der Begriff „Schriftfamilie“), während sich Schriftarten auf die Gewichte, Breiten und Stile beziehen, die jeweils eine Variation dieser Schrift sind.
Um es konkreter auszudrücken, hier ein Beispiel:
Roboto ist der Name einer Schriftfamilie, bei der es sich um eine Reihe von Schriftarten desselben Stils handelt. Jede dieser Variationen wird als einzelne Schriftart betrachtet. Basierend auf diesen Nuancen können wir jetzt verstehen, dass Roboto Thin und Roboto Bold tatsächlich nicht dieselbe Schriftart sind – es handelt sich um zwei separate Schriftarten, die jedoch Teil derselben (Roboto) Schriftfamilie sind.
Warum Textformatierung wichtig ist
Die meisten von uns kennen die klassischen Optionen zum Formatieren von Text, um wichtige Konzepte in einem Dokument hervorzuheben, wie z. B. kursiven Text, fetten Text, unterstrichenen Text usw. In der Typografie wird die Textformatierung zum Hervorheben bestimmter Wörter effektiv verwendet Diese Stiloptionen markieren die ausgewählten Wörter – relativ zu den anderen Wörtern im Textkörper. Durch die Textformatierung können Leser leicht zwischen Arten von Schwerpunkten unterscheiden, die sie auf ein bestimmtes Wort oder einen bestimmten Satz setzen möchten.
In der Praxis werden in einem Werk häufig unterstrichene und fett gedruckte Wörter oder Ausdrücke verwendet, um spezifisch definierte Begriffe, Abschnitte, Kapitelüberschriften, Unterüberschriften, Tabelleneinträge usw. hervorzuheben. Kursivschrift wird normalerweise verwendet, um die Titel kreativer Werke anzugeben – wie Bücher, Zeitschriftenartikel und Filme. Durch die Standardisierung dieser Verwendungen auf einer Website oder in Inhaltsrichtlinien wird die Seite klarer und sauberer.
Die Komponenten der Textlesbarkeit
„Eine solide Typografiestruktur, die den Benutzer anleitet und den Inhalt und die Hauptbotschaft optimal vermittelt.“
– Omri A, Elementor Typograf
Omris Weisheitswörter erklären genau, wo die Rollen von Textausrichtung, Abstand, Zeilenlänge und -höhe sowie semantischem HTML ins Spiel kommen. Aber sind diese Details wirklich so wichtig für ein gutes Typografie-Design? Die Antwort ist ja.
Textausrichtung
Die Art und Weise, wie Sie Ihren Text ausrichten (links, rechts, rechtsbündig oder zentriert), kann sich direkt auf die Lesbarkeit Ihres Inhalts und seine visuelle Hierarchie auswirken. Aus diesem Grund ist dies eine Designentscheidung, die einen sorgfältigen Denkprozess erfordert. Typografie im Design, wie sie im tubik-Blog in seiner Diskussion darüber beschrieben wurde, wie Sie Ihre Benutzeroberfläche lesbar machen können , ist „die Kunst, ästhetischen Text mit der Fähigkeit zu vereinbaren, ihn schnell zu lesen“. Die Tugend der Textausrichtung liegt in diesem Fall in der Lesbarkeit: Sie verankert die Leser so, dass sie wissen, wo jede Zeile beginnt, und dass es einfacher und schneller ist, Text zu lesen und Zeit auf der Seite und auf Ihrer Website im Allgemeinen zu verbringen.
Buchstaben-Abstand
Der Buchstabenabstand, auch als „Tracking“ bezeichnet, ist die Anpassung des horizontalen Leerraums zwischen Buchstaben in einem Wort oder in einem Textblock. Beim Anpassen des Buchstabenabstands beeinflussen wir die visuelle Dichte eines Wortes, einer Phrase oder eines Absatzes. Wählen Sie diese Option, um die Wörter kompakter erscheinen zu lassen (Reduzierung des Leerraums) oder um den Wörtern ein „luftigeres“ Erscheinungsbild zu verleihen (Erhöhung des Leerraums) ). Designer vergrößern häufig den Leerraum zwischen Buchstaben, um die Lesbarkeit des Textes zu verbessern.
Zeilenabstand
Zeilenabstand ist der Begriff, der verwendet wird, um den vertikalen Abstand zwischen zwei Textzeilen zu definieren. Ähnlich wie Textausrichtung und Zeichenabstand, Zeilenabstand kann eine starke Determinante sein , wie lesbar ein Text (oder nicht). Wenn der Zeilenabstand so eingestellt ist, dass ein Text lesbar ist, bedeutet dies im Wesentlichen, dass das Auge des Lesers leicht von einer Textzeile zur nächsten wechseln kann.
Als Faustregel gilt, dass der Zeilenabstand im Bereich von 130% bis 150% für die Lesbarkeit ideal ist, wobei 140% der „am häufigsten zitierte Sweet Spot“ sind. Alles unter 100% wird als unlesbar angesehen, da dieser Prozentsatz bedeutet, dass sich Buchstaben in benachbarten Zeilen berühren können. Die Entscheidung, wie groß oder klein der Zeilenabstand eines Textes sein soll, hängt logischerweise von mehreren Faktoren ab: Schriftart, Schriftgröße, Schriftstil usw.
Zeilenlänge
Bei der Zeilenlänge geht es darum, die „richtige“ Anzahl von Zeichen in jeder Zeile zu finden, damit Ihr Text so gut wie möglich lesbar ist – mit anderen Worten, Lesbarkeit. Wenn die Höhe einer Linie zu breit ist, kann es für den Leser schwierig sein, sich auf den Text zu konzentrieren, da es schwierig ist zu erkennen, wo die Linie beginnt und endet. Andererseits können zu kurze Linien den Rhythmus des Lesers brechen, was bedeutet, dass sein Auge zu oft hin und her wandern muss. Um eine Situation von „zu lang“ oder „zu kurz“ zu vermeiden, liegt die empfohlene Zeilenlänge zwischen 45 und 85 Zeichen pro Zeile.
So wählen Sie die perfekte Schriftart für Ihre Website aus
Die Entscheidung, welche Schriftarten für Ihre Website am besten geeignet sind, hängt von mehreren Faktoren ab und nicht nur von „Ich mag diese am besten“.
Als Web-Ersteller ist es für uns von entscheidender Bedeutung, die folgenden Faktoren bei der Auswahl der gewünschten Schriftart für Webinhalte und für Websites im Allgemeinen zu berücksichtigen :
Überlegen Sie, wie Sie Ihre Marke darstellen möchten
Die Typografie einer Marke ist tatsächlich einer der stärksten Informanten darüber, worum es bei der Marke geht – in Bezug auf Charakter, Differenzierung und so weiter. Letztendlich wird Ihre Markenstimme durch Kunst und Buchstaben verbalisiert und visualisiert. Im obigen Beispiel einer Personal Trainer-Website, der ausgewählten Schriftart, ist Racing Sans One eine stark gewichtete, serifenlose Schrift mit sehr geringem Kontrast in jedem Buchstaben. Der Text ist fett und dominant, was gut mit der Fitness und der intensiven Workout-Spezialität und Persönlichkeit eines Personal Trainers korreliert und ein Gefühl von Stärke, Kraft und Robustheit vermittelt.
Tipp
Denken Sie sorgfältig über Ihre Markenpersönlichkeit nach. An welche Art von Assoziationen, Werten und Adjektiven sollen die Leute denken, wenn sie Ihre Website und Ihre Markenwerte sehen?
Entscheiden Sie sich zwischen Serif oder Sans Serif
Die Wahl zwischen serifenlosen oder serifenlosen Schriftarten ist wie die Wahl zwischen Vanille und Schokolade – eine grundlegende Entscheidung, die sich auf Ihr gesamtes Typografie-Schema auswirkt. Dies ist der grundlegendste Auswahlprozess, den Sie für Ihre Website-Schriftarten vornehmen können. Wenn Sie erklären, wann Serifen verwendet werden sollen , gibt der Adobe-Blog an, dass Serifenschriftarten hauptsächlich mit „maßgeblichen, professionellen Marken… etwas älter“ assoziiert werden. Dies ist es, was Serifenschriften zu einer solchen Wahl für Websites wie Nachrichtenseiten, Buchhandlungen, Universitäten und dergleichen macht.
Sans Serifs hingegen sind als moderne Wahl bekannt, verbunden mit „modernstem Design, Handel und dem Versuch der Moderne, mit der Vergangenheit zu brechen“.
Tipp
Schauen Sie sich andere Websites in Ihrer Branche oder Branche an und finden Sie heraus, welche am häufigsten verwendet werden: Serife oder Sans? Dies kann Ihnen eine Vorstellung davon geben, was in Ihrer Nische am modischsten ist und welche Schrift für Ihre Beobachter am sinnvollsten wäre.
Überprüfen Sie, ob Ihre Schriftarten gut
zusammenpassen
Die Tugend einer guten Schriftpaarung besteht darin, dass reguläre Buchstaben zu einer Kreation von Kunstwerken erhoben werden können. Und es ist noch mehr als das: Das Kombinieren von zwei verschiedenen Schriftarten, jede mit ihrem eigenen Stil und ihrer eigenen Einzigartigkeit, kann die Markenbotschaft, die Sie vermitteln möchten, verstärken. Markenpersönlichkeiten sind vielfältig. Indem Sie also zwei unterschiedliche Schriftarten verwenden (und es gibt definitiv eine große Auswahl an Web-Schriftarten), die jeweils ihren eigenen Charakter und Stil haben, veranschaulichen Sie das einzigartige, dynamische Erlebnis, das Ihre Marke darstellt.
Tipp:
Testen Sie mehrere Schriftpaare, um festzustellen, welches Ihnen am besten gefällt. Es wird empfohlen, sich zuerst für eine primäre Schriftart zu entscheiden, dann die Optionen für eine sekundäre Schriftart zu prüfen und Ihr Lieblingspaar auszuwählen. Expertentipp: Versuchen Sie, nicht mehr als drei Schriftarten insgesamt zu überschreiten!
Achten Sie auf Schriftgröße, Schriftgewicht und Linienlänge
Sie können sich Lesbarkeit als den „Nordstern“ Ihrer typografischen Entscheidungsfindung vorstellen. Wie bereits erwähnt, wirken Details wie die Größe und das Gewicht einer Schriftart sowie die Zeilenlänge und der Zeilenabstand, die Sie in einem Textelement verwenden, als Balanceakt zusammen, um eine (was sollte) leicht scannbarer und lesbarer Textkörper.
Tipp:
Es ist bekannt, dass die „ideale“ Zeilenlänge für eine optimale Lesbarkeit in der Web-Typografie zwischen 45 und 85 Zeichen liegt.
Wenn Sie Schwierigkeiten haben, Ihren Text in diesem Bereich zu halten, untersuchen Sie verschiedene Kombinationen von Schriftgröße und Schriftgröße, um zu sehen, wie sie sich gegenseitig beeinflussen. Eine Schriftgröße von 18 Pixel kann 85 Zeichen in einer Zeile überschreiten. Wenn Sie der Schrift jedoch eine etwas kleinere Größe oder ein etwas geringeres Gewicht geben, können sich die Dinge zu Ihren Gunsten auswirken.
Respektieren Sie die Rolle der visuellen Hierarchie
Die typografische visuelle Hierarchie ist eigentlich ein uraltes Konzept, das dem Website-Design jahrzehntelang vorausgeht. Wir können sehen, wie wahr dies ist, wenn wir uns die Medienbranche ansehen – und insbesondere Zeitschriften.
Dieses Cover des TimeOut London Magazins richtet sich an Touristen, die London erkunden und entdecken möchten. Logischerweise besteht die grundlegendste Absicht des Magazins darin, dass die Leute es sehen, einen Blick darauf werfen und es mitnehmen. Alles, was zählt, ist, dass die Leser es nehmen, der Rest (die Geschichten, das Thema und ehrlich gesagt der gesamte Inhalt des Magazins) ist zweitrangig – die Verlage möchten nur, dass es in menschlichen Händen liegt.
In Bezug auf die Umsetzbarkeit ist die Aussage „Nimm mich, ich bin dein“ die wichtigste, daher ist es der größte und schwerste Text auf der Seite. Es ist riesig, zentriert, groß, schwer, serifenlos, ohne Schnickschnack … es will unbedingt bemerkt werden. Ganz zu schweigen davon, dass der Kontrast von Weiß zu leuchtendem Rot eine großartige Möglichkeit für einen Text ist, sich selbst als „zuerst gesehen“ zu deklarieren.
Tipp:
Steigen Sie in das Headset Ihrer Website-Besucher und -Leser ein – welche Wörter sollen sie zuerst oder sogar sofort bemerken? Und was ist das raffinierteste und visuell ansprechendste Format, um diese Wörter zu kommunizieren?
Investieren Sie in ein Designsystem
Bei Elementor definieren wir Designsysteme als „die einzige Quelle der Wahrheit, die die Basis bildet, auf der ein Team eine Website entwirft“. Durch die Verwendung eines Designsystems können Web-Ersteller (ob als Team oder als Solo-Web-Ersteller) neue und vorhandene Websites schnell und effizient entwerfen und bearbeiten. Dies verkürzt Ihren Workflow und letztendlich die Zeit, die Sie für die Erstellung Ihrer Website benötigen in Betrieb.
Durch Hinzufügen des Typografiesystems Ihrer Website oder Marke zu Ihrem Designsystem wird sichergestellt, dass jedes Textelement auf Ihrer Website mit den anderen übereinstimmt und eine professionelle, organisierte und umfassende Website-Oberfläche bietet.
Tipp:
Erleichtern Sie sich das Leben mit unserer neuen Funktion für globale Schriftarten , mit der Sie alle Einstellungen für die Site-Typografie global konfigurieren können – Schriftfamilie, Schriftgröße und -skalierung, Schriftgewicht, Schrifttransformation, Schriftstil, Schriftdekoration, Zeilenhöhe, Buchstabenabstand und Responsive Settings.
Lernen Sie CSS-Stylesheets kennen
Eine der am meisten empfohlenen Methoden zum Perfektionieren und Polieren Ihrer Website-Typografie ist die Verwendung von CSS-Stylesheets . Die zum Formatieren von Text verwendeten CSS-Eigenschaften sind Grundlagen der Web-Typografie: Schriftstile und Textlayoutstile. Es gibt zwar viele Möglichkeiten, Ihre Schriftstile und Textlayoutstile (neben anderen Stiloptionen) mit einfacheren Methoden festzulegen, aber CSS-Stylesheets haben tatsächlich einen Vorteil gegenüber diesen einfacheren Methoden – Stylesheets bieten eine bessere Kontrolle über den genauen visuellen Stil Ihrer Website-Typografie wie Überschriften, Absätze, Listen usw.
Wenn wir von besserer Kontrolle sprechen, bedeutet dies, dass CSS-Stylesheets die Wahrscheinlichkeit erhöhen, dass Ihr Design genau so angezeigt wird, wie Sie es beabsichtigt haben – und nicht von Einschränkungen wie Gerätekompatibilität und Bildschirmgröße, Browserkompatibilität und verfügbaren Schriftarten beeinflusst werden Gerät und ähnliche Faktoren. Letztendlich sparen Sie mit CSS-Stylesheets viel Arbeit, da sie das Layout mehrerer Webseiten gleichzeitig steuern. Dies bedeutet, dass Sie mit einem Stylesheet das Erscheinungsbild einer gesamten Website ändern können, indem Sie nur eine Datei ändern.
Wie ist das für die Zeiteffizienz?
Tipp:
Verwenden Sie die Registerkarte Benutzerdefiniertes CSS in den Widgets des Elementor-Editors. Dies kann eine einfache und unkomplizierte Möglichkeit sein, die Vorteile von CSS-Stylesheets zu nutzen, ohne Ihrem Workflow einen umfangreichen Codierungsprozess hinzuzufügen.
Bleiben Sie mit den Typografie-Nutzungsstandards auf dem Laufenden
Wie bereits erwähnt, sind Lesbarkeit, Lesbarkeit und das gesamte Leseerlebnis (denken Sie an das Benutzererlebnis) der „Nordstern“ bei der Auswahl der Typografie. Dies ist ein Grund, warum die Schriftgröße sowohl für das Webdesign als auch für die Benutzererfahrung eine große Rolle spielt. Darüber hinaus mögen die Leute, was sie gewohnt sind – wenn Leser es gewohnt sind, H1s und Body-Texte in einer gemeinsamen Größe zu lesen, erwarten sie dies auch auf Ihrer Website. Dies sind einige der vielen Gründe, warum wir empfehlen, herkömmliche Schriftgrößen für Ihre Website zu verwenden.
Natürlich gibt es Raum für Flexibilität (wenn auch nur in geringem Umfang), und die Website-Trends entwickeln sich ständig weiter. Es lohnt sich, im Auge zu behalten, wie sich die Konventionen für die Schriftgröße im Laufe der Zeit ändern.
Tipp:
Halten Sie sich an herkömmliche Schriftgrößen, wenn Sie entscheiden, wie groß oder klein Ihre Textelemente sein sollen.
So sehr Web-Entwickler von Kreativität leben, ist der Schritt bei der Auswahl der Schriftgrößen keine Zeit, das Rad neu zu erfinden.
Ready, Set, Type
Sie sind jetzt bereit, die Welt der Typografie anzunehmen. Die Auswahl an Schriftarten ist endlos, ebenso wie die Art und Weise, wie Sie damit arbeiten können. Hoffentlich erleichtern die von uns bereitgestellten Konzepte und Aktionselemente Ihren Entwurfsworkflow erheblich, wenn Sie sich hinsetzen, um Ihr Typografieschema zu erstellen.
Denken Sie daran, dass Lesbarkeit und Lesbarkeit vor allem anderen stehen. Vernachlässigen Sie jedoch nicht, wie wichtig es ist, dass Ihre Schriftart und ihre Nachrichten auf Ihre Marke und die Persönlichkeit abgestimmt sind, die Sie vermitteln möchten.
Wir freuen uns darauf zu sehen, was Sie sich einfallen lassen können!
Weitere Beiträge die Sie interessieren könnten
Die 10 häufigsten Fehler, die Anfänger mit Elementor begehen
November 21, 2020
Verwenden Sie Elementor richtig? Mit Elementor, das Millionen von Websites mit Strom versorgt, haben wir die häufigsten Fehler von Neulingen gesammelt. Lernen Sie, sie zu vermeiden, um Ihren Workflow sofort zu verbessern.
