Referenzhandbuch zur Typografie im mobile Webdesign 2022

Da Mobile den ersten Platz in der Suche einnimmt, ist es wichtig, dass Websites so gestaltet sind, dass die bestmögliche Erfahrung für ihre Nutzer priorisiert wird. Während Google auf Faktoren wie Pop-ups  geachtet hat, die das mobile Erlebnis stören können, was ist mit etwas so Einfachem wie Typografie-Entscheidungen?

Die Antwort auf die Frage nach der Typografie scheint einfach: Was auf dem Desktop funktioniert, funktioniert auf dem Handy, solange es gut skaliert. Rechts?

Während das es für Webdesigner sicherlich viel einfacher machen würde, muss es nicht so sein. Das Problem bei dieser entscheidenden Aussage ist, dass in den letzten Jahren nicht viel zum Thema mobile Typografie geforscht wurde. Was ich heute vorhabe, ist, eine kurze Zusammenfassung dessen zu geben, was wir über Typografie im Webdesign wissen, und dann zu sehen, was UX-Experten und Tester über die Verwendung von Typografie für mobile Geräte enthüllen konnten.

Die Grundlagen der Typografie im modernen Webdesign verstehen

Schauen Sie, ich weiß, dass Typografie nicht das sexieste Thema ist. Und als Webdesigner ist es vielleicht nicht etwas, worüber Sie zu viel Zeit verbringen, um nachzudenken, besonders wenn der Kunde Ihnen seinen eigenen Styleguide mitbringt, bevor er ein Projekt beginnt.

Das heißt, da Mobile jetzt hier bevorzugt wird, muss die Typografie weiter berücksichtigt werden.

Sie können sich auf die Schriftarten beziehen unter: Kostenlose Schriftarten Für Instagram – Schriftarten123

Typografie-Terminologie

Beginnen wir mit den Grundlagen: Terminologie, die Sie kennen müssen, bevor Sie Best Practices für die mobile Typografie erlernen.

Typografie: Dieser Begriff bezieht sich auf die Technik,  die zum Formatieren, Formatieren und Anordnen von „gedrucktem“ Text (im Gegensatz zur Handschrift) verwendet wird.

Dies ist das Klassifizierungssystem, das verwendet wird, um eine Familie von Zeichen zu kennzeichnen. Das wäre also so etwas wie Arial, Times New Roman, Calibri, Comic Sans, etc.

Fonts: Dies geht tiefer in die Typografie der Website. Die Schriftart enthält Details zur Schriftfamilie, zur Punktgröße und zu allen angewendeten speziellen Stilisierungen. Zum Beispiel sind Arial 11 Punkte fett gedruckt.

Größe: Es gibt zwei Möglichkeiten, die Größe (oder Höhe) einer Schriftart anzugeben: Textverarbeitungsgröße in Punkten oder Webdesigngröße in Pixeln. Um über mobiles Webdesign zu sprechen, verwenden wir Pixel.

Gewicht: Dies ist der andere Teil der Definition einer Schriftart als Schriftart. Gewicht bezieht sich auf jeden speziellen Stil, der auf das Gesicht aufgetragen wird, um das Gesicht schwerer oder leichter aussehen zu lassen. Im Webdesign kommt die Gewichtung in Header-Schriftarten ins Spiel, die den oft schwerelosen Inhaltstext ergänzen.

Kerning: Das hat mit dem Abstand zwischen zwei Buchstaben zu tun. Es kann angepasst werden, um ästhetischere Ergebnisse zu erzielen und gleichzeitig die Lesbarkeit zu verbessern. Sie benötigen eine Designsoftware wie Photoshop, um diese Art von Anpassungen vorzunehmen.

Nachverfolgung: Tracking oder Abstand zwischen Buchstaben wird oft mit Kerning verwechselt, da es auch das Hinzufügen von Abständen zwischen Buchstaben beinhaltet. Während das Kerning jedoch den Abstand zwischen zwei Buchstaben anpasst, um das Erscheinungsbild zu verbessern, wird das Tracking verwendet, um den Abstand auf einer Linie anzupassen. Dies wird eher zum Beheben von Dichteproblemen beim Lesen verwendet.

Oben: Der obere Abstand oder Zeilenabstand ist der Abstand zwischen den Grundzeilen des Textes (der unteren Zeile, auf der sich die Schriftart befindet). Wie das Tracking kann dies angepasst werden, um Dichteprobleme zu beheben.

Wenn Sie seit einiger Zeit Textverarbeitungssoftware verwenden, sind Sie es gewohnt zu führen. Text mit einfachem Zeilenabstand. Der Text ist mit doppeltem Abstand versehen. Text mit gleichmäßigem Abstand 1.5. Das ist erstklassig.

Die Rolle der Typografie im modernen Webdesign

Warum wir uns für Typografie und jedes ihrer definierenden Merkmale im modernen Webdesign interessieren, dafür gibt es einen guten Grund. Es wäre zwar großartig, wenn ein gut geschriebener Blogbeitrag oder ein super überzeugender Verkaufsjargon auf der Zielseite ausreichen würde, um die Besucher glücklich zu machen, aber das ist nicht immer der Fall. Die Entscheidungen, die Sie über Typografie treffen, können einen großen Unterschied darin haben, ob die Leute Ihre Website-Kopie lesen oder nicht.

Hier sind einige Möglichkeiten, wie sich Typografie auf Ihre Endbenutzer auswirkt:

Die Stärkung
der Branding-Typografie ist eine weitere Möglichkeit, einen bestimmten Stil für Ihr Webdesign zu erstellen. Wenn alle Bilder klare Linien und ernste Gesichter haben, sollten Sie eine gleichmäßig geknöpfte Schrift verwenden.

Legen Sie die Stimmung
fest Es hilft, die Stimmung oder Emotionen zu etablieren. Zum Beispiel signalisiert eine angemessenere und leichtere Schrift den Benutzern, dass die Marke Spaß macht, jugendlich ist und sich selbst nicht zu ernst nimmt.

Gib ihm eine Stimme
Es vermittelt ein Gefühl von Charakter und Stimme. Während die eigentliche Nachricht in der Kopie in der Lage sein sollte, dies gut zu identifizieren, ist die Verwendung einer tonverstärkenden Schriftart eine effektive Option.

Ermutigen Sie zum Lesen Wie Sie sehen können,
gibt es mehrere Möglichkeiten, wie Sie anpassen können, wie der Typ auf dem Bildschirm angezeigt wird. Wenn Sie ihm ein schnelles und einfaches Gefühl geben können, können Sie mehr Benutzer ermutigen, es durchzulesen.

Das Zulassen
von Scans oder Blicken (über die ich in Kürze sprechen werde) wird immer häufiger, da Menschen auf ihren intelligenten Geräten mit dem Internet interagieren. Daher benötigen wir Möglichkeiten, Text zu formatieren, um die Scanfähigkeit zu verbessern, und dies beinhaltet oft viele Überschriften, Anführungszeichen und Inline-Listen (Aufzählungszeichen, Nummerierung usw.).

Verbesserung der Barrierefreiheit
Es gibt noch viel zu tun, um die Barrierefreiheit zu gestalten. Ihre Schriftwahl spielt dabei eine wichtige Rolle, insbesondere wenn das mobile Erlebnis weniger von großen, kräftigen Designs und Farbmustern abhängt und mehr davon, wie schnell und gut Sie Besucher für Ihre Nachricht gewinnen können.

Da Typografie eine vielfältige Rolle in der Benutzererfahrung spielt, ist dies ein Problem, das bei der Strategieentwicklung für neue Designs ernst genommen werden muss. Mal sehen, was die Experten und Tester über den Umgang mit mobilen Geräten zu sagen haben.

Typografie für mobiles Webdesign: Was Sie wissen müssen

Zu klein, zu blass, zu pingelig, zu nah beieinander… Sie können viele Probleme haben, wenn Sie nicht die perfekte Balance mit Ihrer Wahl der Typografie in Ihrem Design finden. Auf dem Handy ist es jedoch eine andere Geschichte.

Ich möchte nicht sagen, dass es der richtige Weg ist, auf Nummer sicher zu gehen und das Standardsystem von Google oder Apple zu verwenden. Schließlich arbeiten Sie sehr hart daran, einzigartige, kreative und auffällige Designs für Ihre Benutzer zu entwickeln. Warum geben Sie an diesem Punkt auf und schlagen Roboto einfach über Ihre mobile Website?

Wir wissen, was die Schlüsselelemente bei der Definition und Gestaltung einer Schrift sind, und wir wissen auch, wie leistungsfähig Schriftarten im Kontext einer Website sind. Lassen Sie uns also eintauchen und genau sehen, was Sie tun müssen, damit Ihre Typografie mit mobilen Geräten gut funktioniert :

1. Dimension

Generell gilt als Faustregel, dass die Schriftgröße bei mobilen Webseiten 16 Pixel betragen muss. Alles, was kleiner ist, kann die Lesbarkeit von sehbehinderten Lesern beeinträchtigen. Alles, was viel größer ist, kann das Lesen erschweren. Sie möchten die perfekte Goldlöckchen-Formel finden und immer wieder geht sie auf 16 Pixel zurück.

Alles in allem ist diese Regel eine sichere Regel, wenn es um den Hauptinhalt Ihrer mobilen Website geht. Was genau dürfen Sie jedoch mit dem Titeltext tun? Schließlich müssen Sie in der Lage sein, Ihre Hauptüberschriften vom Rest des Textes zu unterscheiden. zielt nicht nur darauf ab, die Aufmerksamkeit auf größere Nachrichten zu lenken, sondern zielt auch darauf ab, die Scanfähigkeit einer mobilen Website zu erhöhen.

Das Nielsen Norman-Team berichtete über eine Studie des MIT, die sich genau mit dieser Frage befasste. Was können Sie mit Text tun, auf den Benutzer nur einen Blick werfen? Mit anderen Worten, welche Art von Größe können Sie für kurze Titeltextzeichenfolgen verwenden?

Hier ist, was sie gefunden haben:

Kurze, gut sichtbare Textzeichenfolgen führen zu einer schnelleren Lesbarkeit und einem besseren Verständnis, wenn:

• Sie sind größer (nämlich 4 mm gegenüber 3 mm).
• Sie sind alle großgeschrieben.
• Die Textbreite ist gleichmäßig (und nicht dicht).

Nachdem ich mir das jetzt ein paar Mal angesehen habe, denke ich, dass die Wahl einer kleineren Schriftgröße für den All-Cap-Header eine seltsame Wahl ist. Meine Augen wurden sofort von dem größeren, dunkleren Text unter der Hauptüberschrift angezogen. Also denke ich, dass es etwas gibt, das MIT-Forschung braucht.

Es besteht überhaupt kein Zweifel daran, woher die Aufmerksamkeit des Besuchers kommt: an die auffällige Schlagzeile. Es ist vollständig großgeschrieben, es ist größer als der gesamte andere Text auf der Seite und trotz der extrem einfachen Schriftart sieht seine Übertragung mit benutzerdefinierter Handschrift hier wirklich interessant aus. Ich denke, das einzige, was ich hier beheben werde, ist der Kontrast zwischen den weißen und gelben Schriftarten und dem blauen Hintergrund.

Denken Sie daran: Dies gilt nur für die Größe (und das Styling) des Titeltextes. Wenn Sie einen Großteil des Textes lesbar halten möchten, befolgen Sie die oben genannten Best Practices für die Größenanpassung.

2. Farbe und Kontrast

Farbe ist im Allgemeinen ein wichtiges Element im Webdesign. Sie können Ihren Besuchern viel vermitteln, indem Sie die richtige Farbpalette für Ihr Design, Ihre Bilder und, ja, Ihren Text auswählen. Aber es ist nicht nur die Grundfarbe der Schriftart, die zählt, es ist auch der Kontrast zwischen ihr und dem Hintergrund, auf dem sie sich befindet (wie meine Anmerkung oben über Flywheel Sports zeigt).

Für einige Benutzer kann die weiße Schriftart über einem geschäftigen Foto oder einem helleren Hintergrund nicht zu viele Probleme verursachen. Aber „zu viel“ ist im Webdesign nicht wirklich akzeptabel. Es sollte keine Probleme geben, die Benutzer haben, wenn sie Text auf einer Website lesen, insbesondere aus einer bereits kompromittierten Sicht auf mobilen Geräten.

Aus diesem Grund sind Farbe und Kontrast die wichtigsten Überlegungen, die Sie bei der Erstellung mobiler Typografie berücksichtigen müssen.

Es gibt mehrere Ausnahmen von der Regel:

• Text in der Größe mit 18 Punkten oder 14 fett gedruckten Punkten benötigt nur einen Kontrast von 3 zu 1.
• Text, der nicht im aktiven Teil Ihrer Website angezeigt wird, muss dieser Regel nicht entsprechen.
• Der Kontrast des Textes im Logo kann nach Ermessen des Designers eingestellt werden.

Eine Sache, die Sie jedoch beachten sollten, ist, dass die Verwendung von Deckkraft oder anderen Farbeinstellungen die von Ihnen gewählte Farbe beeinträchtigen kann. Während der HEX-Farbcode im Tool gut getestet wird, ist er möglicherweise keine genaue Darstellung dessen, wie Farben tatsächlich auf mobilen Geräten (oder auf jedem Bildschirm) angezeigt werden.

Um dieses Problem zu lösen und sicherzustellen, dass Sie einen ausreichend hohen Kontrast für Ihre Schriftarten haben, verwenden Sie ein in Ihren Browser integriertes Farb-Eyeliner-Tool wie das für Firefox oder Chrome. Bewegen Sie einfach den Mauszeiger über die Hintergrundfarbe (oder Schriftart) auf Ihrer Website und lassen Sie sich sagen, was der tatsächliche aktuelle Farbcode ist.

Die Lektion hier ist, dass Sie sich wirklich einen Moment Zeit nehmen sollten, um darüber nachzudenken, wie die Farbe und der Kontrast der Schrift zum Wohle des Lesers wirken werden. Ohne diese zusätzlichen Schritte können Sie versehentlich verhindern, dass Besucher auf Ihrer Website fortfahren.

3. Spur

Üblich und einfach: Es ist notwendig, Tracking im mobilen Webdesign zu verwenden, um die Dichte zu kontrollieren. Die Standardempfehlung lautet, nicht mehr als 30 bis 40 Zeichen pro Zeile zu haben. Alles, was mehr oder weniger ist, kann die Lesbarkeit beeinträchtigen.

Während es so aussieht, als würde Dove die Grenzen dieser 40-Zeichen-Grenze überschreiten, denke ich, dass dies wunderbar gemacht wird.

Die Schriftart ist einfach und sauber und die Tracks sind gleichmäßig verteilt. Möglicherweise stellen Sie fest, dass durch die Reduzierung der Anzahl der Wörter in einer Zeile auf das empfohlene Limit diesem Segment der Seite ein leicht lesbares Erscheinungsbild verliehen wird. Und genau das möchten Sie, dass Ihre Typografie-Entscheidungen tun: Begrüßen Sie die Besucher, um für einen Moment innezuhalten, die nicht bedrohliche Textmenge zu lesen und dann ihre Reise fortzusetzen (hoffentlich konvertieren).

Mein Vorschlag

Und das bringt mich jetzt zu meinen eigenen Empfehlungen, was Sie in Bezug auf den Typ für mobile Websites verwenden sollten. Hier ist das Urteil:

• Haben Sie keine Angst, mit der Standardschriftart des Systems zu beginnen. Sie werden Ihre sicherste Option sein, bis Sie verstehen, wie gut Sie die Grenzen der mobilen Typografie überschreiten können.
• Verwenden Sie nur serifenlose oder serifenlose Schriftarten. Wenn Ihre Desktop-Website eine dekorative Schriftart oder eine handgeschriebene Schriftart verwendet, entfernen Sie diese Schriftart für etwas Traditionelleres auf Mobilgeräten.

Das heißt, Sie müssen dekorative Schriften nicht ganz ignorieren. In Beispielen von Hill Holliday oder Flywheel Sports (wie oben gezeigt) können Sie sehen, wie kleine Akzente des benutzerdefinierten, nicht-traditionellen Typs ein wenig Geschmack hinzufügen können.

• Verwenden Sie niemals mehr als zwei mobile Schriftarten. Es gibt nicht genug Platz für Besucher, um viele dieser Optionen visuell zu handhaben.

Stellen Sie sicher, dass sich Ihre beiden Schriftarten ergänzen. Suchen Sie insbesondere nach Gesichtern, die ähnliche Zeichenbreiten verwenden. Das Design jeder Seite kann einzigartig sein und sich gut von der anderen abheben, aber es muss immer noch eine gewisse Einheitlichkeit in dem geben, was Sie vor den Augen des mobilen Besuchers präsentieren.

• Wenn Sie mit mobiler Typografie vertraut sind und ein wenig mehr entwickeln möchten. Sie werden hier sehen, dass die meisten Entscheidungen Ihre grundlegenden Serifen- und Sans-Serifen-Stile sind. Es ist sicherlich nichts Aufregendes oder Schreckliches, aber es wird Ihnen einige Variationen geben, mit denen Sie spielen können, wenn Sie Ihrem mobilen Typ ein wenig Geschmack verleihen möchten.

Beenden

Ich weiß. Mobile Typografie ist nichts Interessantes. Aber Webdesign schafft nicht immer etwas Interessantes und Innovatives. Manchmal ist es das, was Ihnen die ultimative beste Benutzererfahrung garantiert, wenn Sie sich an realistische und sichere Entscheidungen halten. Und das ist es, was wir sehen, wenn es um mobile Typografie geht.

Die reduzierte Menge an Immobilien und die kürzere Zeit vor Ort ermöglichen es Ihnen nicht, experimentelle Typografie (oder Designoptionen im Allgemeinen) zu wählen, die Sie auf dem Desktop verwenden können. In Zukunft muss sich Ihr Ansatz also mehr darauf konzentrieren, zu lernen, wie man ihn dominiert und gleichzeitig eine starke und konsistente Schnittstelle für Ihre Website schafft.