So wählen Sie die richtigen Schriftarten für kleine Bildschirme aus

Attraktive und effektive Typografie ist eine Schlüsselkomponente für ein erfolgreiches Website-Design. Dies gilt insbesondere für mobile Geräte, bei denen die Fehlerquote so gering ist wie die Bildschirme, auf denen diese Websites angezeigt werden.

Wie setze ich meine Fotos auf Facebook auf privat?

Wenn Ihre Schriftarten für den Desktop gut funktionieren, können Sie davon ausgehen, dass sie für Mobilgeräte geeignet sind? Viele typografische Stile und Praktiken, die für größere Bildschirme durchaus akzeptabel sind, fallen aus und verursachen Probleme auf kleineren, mobilen Bildschirmen.

Dies bedeutet, dass wir, um mobilen Besuchern das bestmögliche Erlebnis zu bieten, die mobile Typografie einer Website berücksichtigen und sicherstellen müssen, dass sie unabhängig von der Art des Geräts, mit dem Benutzer unsere Website besuchen, ein attraktives Design erhalten, das einfach zu bedienen und unterhaltsam ist lesen.



Kurz gesagt, Typografie muss als wichtiges Element im Zusammenhang mit der Reaktionsfähigkeit einer Website betrachtet werden. Um dies zu erreichen, sollten wir besser verstehen, wie Menschen auf Mobilgeräten lesen, wenn wir uns an die Best Practices in der mobilen Typografie halten.

Wie Benutzer auf Mobilgeräten lesen

Finger tippen auf Laptop und Handy

Menschen haben eine viel engere Beziehung zu ihren Mobilgeräten als zu ihrem Büro- oder Heimcomputer

Gehen Sie zu Ihrem örtlichen Café oder Restaurant oder zu einem Ort, an dem eine Vielzahl von Menschen mobile Geräte und Laptops verwenden. Beobachten Sie sie in Aktion. Sie werden einen signifikanten Unterschied in der Entfernung zwischen Benutzer und Gerät zwischen den beiden Typen feststellen.

Wenn Sie etwas genauer hinschauen, werden Sie bei der Beobachtung mobiler Lesegeräte als erstes feststellen, dass sie sich in der Nähe des Bildschirms befinden. Menschen haben eine viel engere Beziehung zu ihren Mobilgeräten als zu ihrem Büro- oder Heimcomputer - eine Beziehung, die bei stattfindet 12,6 Zoll eher, als 20 bis 23 Zoll von ihrem Bildschirm .

Da der Bildschirm eines Mobilgeräts kleiner ist, muss er näher gehalten werden, um die Wörter auf diesem Bildschirm effektiv lesen zu können. Dies bedeutet, dass mobile Benutzer ihrem Gerät und Ihrem Website-Design physisch näher kommen. Der Schlüssel zur mobilen Typografie ist die Lesbarkeit. Wenn der Benutzer sie nicht lesen kann, funktioniert Ihr Design nicht.

Beleuchtung und Bewegung

Ein weiterer Faktor, den Sie beim Lesen von Personen auf dem Handy beachten sollten, sind die äußeren Bedingungen, unter denen sie dies tun. Beleuchtung, Bewegung und Internetverbindung sind alles Variablen. Insbesondere die Beleuchtung ist eine schwer zu knackende Variable und hängt direkt davon ab, wie leicht ein Betrachter den Bildschirm lesen kann.

Denken Sie in Bezug auf Bewegung daran, auf der Autobahn zu fahren und an Werbetafeln vorbei zu fahren. A Obwohl Sie sich bewegen und die Typografie immer noch ist, ist das Konzept dasselbe: Fangen Sie die Aufmerksamkeit des Lesers auf sich.

Interessanter ist es, physikalische Barrieren in die Gleichung einzubeziehen, mit denen Menschen bei der Verwendung mobiler Geräte zu kämpfen haben, nämlich ihre Hände und die Ränder des Bildschirms. Wenn Benutzer einen Desktop-Computer zum Lesen von Online-Inhalten verwenden, navigieren sie mit einer Maus oder einem Bildlauffeld. Auf mobilen Touchscreens fungiert ein Finger als Navigation, die notwendigerweise einen Teil des Bildschirms blockiert.

Versteckt

Abgesehen von der Navigation hat selbst die Art und Weise, wie Benutzer das Gerät halten, die Neigung, erstklassige Immobilien aus ihrer Sicht abzudecken. Apropos Bildschirmansicht: Da dieser Bildschirm so klein ist, kann er nur so viel Inhalt gleichzeitig anzeigen.

Dies bedeutet, dass große Inhaltsblöcke, die auf größeren Bildschirmgeräten leicht angezeigt werden können, auf Mobilgeräten abgeschnitten werden und über die Grenzen des Gerätebildschirms hinaus angezeigt werden.

Wenn es um das Lesen auf Mobilgeräten geht, gibt es keinen Mangel an Problemen, mit denen sich die Leser auseinandersetzen müssen. Die Berücksichtigung dieser Herausforderungen in unserer Entwurfsarbeit ist der erste Schritt zu einer besseren mobilen Typografie.

Die Grundlagen der reaktionsschnellen Web-Typografie

Site auf Monitor und mobilen Geräten

Sie können eine Site so einstellen, dass ein Satz typografischer Stile für größere Bildschirme verwendet wird, und diese Stile dann für kleinere Bildschirme entsprechend anpassen

Die Typografie der Website muss dank der Praktiken von keine einheitliche Situation sein sich anpassendes Webdesign . Bei einer reaktionsschnellen Website können CSS-Medienabfragen verwendet werden, um die visuellen Stile einer Webseite basierend auf der Bildschirmgröße eines Besuchers zu ändern. Dies bedeutet, dass Sie eine Site so einstellen können, dass ein Satz typografischer Stile für größere Bildschirme verwendet wird, und diese Stile dann entsprechend für kleinere Bildschirme anpassen können.

Im Gegensatz zu Schriftarten für Druck oder Desktops wird die mobile und reaktionsschnelle Typografie nicht mit einem Punktesystem gemessen, sondern mit Pixeln, Ems oder Rems. Warum? Weil diese Einheiten mit ihrer prozentualen Struktur flexibler und anpassungsfähiger für die Verwendung auf mehreren Geräten sind. Ziel ist es hier nicht, über alle Bildschirmgrößen hinweg ein einheitliches Erscheinungsbild zu erzielen, sondern unabhängig von der Bildschirmgröße ein durchweg positives Leseerlebnis zu erzielen.

Bei der Entwicklung einer reaktionsschnellen Web-Typografie müssen einige wichtige Bereiche berücksichtigt werden, um die Lesbarkeit zu gewährleisten:

  • Schrift
  • CSS-Stile (Ausrichtung, Größe, Linienlänge usw.)
  • Ladezeit

Bevorzugte mobile Schriften

Die Schriftarten, die Sie in Ihrem Design verwenden, spielen eine wichtige Rolle in wie einfach diese Site auf Mobilgeräten zu lesen sein wird .

Zu komplizierte und dünne Briefformen sind nicht nur schwer zu lesen, insbesondere für Personen mit Legasthenie oder Sehbehinderung, sondern brechen auch bei kleineren Größen zusammen. Dies bedeutet, dass bei der Skalierung von Schriftarten für mobile Bildschirme Lesbarkeitsprobleme auftreten, insbesondere bei Geräten ohne Retina-Bildschirme.

Um dieses Problem zu vermeiden, haben sich viele Designer für die Verwendung serifenloser Schriftarten für mobile Websites und Anwendungen entschieden. Die einfachen, unkomplizierten Buchstabenformen ohne Serifen Skalieren Sie tendenziell besser und sorgen Sie für eine besser lesbare Präsentation in einem größeren Bereich von Bildschirmgrößen und Auflösungen.

Unterschiedliche Schriftarten für unterschiedliche Bildschirme?

Überlegen Sie bei der Auswahl der auf Ihrer Site zu verwendenden Schriftarten, ob Ihre Site über alle Bildschirmgrößen hinweg dieselben Schriftarten verwenden soll oder ob Sie die Schriftart für verschiedene Bildschirme problemlos ändern können.

Wenn Sie mit denselben Schriftarten arbeiten möchten, sollten Sie nach solchen suchen, die sowohl groß als auch klein skalieren.

Wenn Sie bereit sind, die Schriftartenauswahl nach Bedarf anzupassen, können Sie Serifen oder komplexere Schriftarten für größere Anzeigen verwenden und diese dann in kleinere Schriftarten für kleinere Bildschirme ändern (testen Sie Ihre Auswahl immer mit echten Benutzern).

Typografische Stile

Buchstabe a auf Monitor und Mobilgeräten

Zwei der wichtigsten Überlegungen zur Schriftart sind Größe und Platz

Mit ein paar Zeilen CSS können Sie das allgemeine Erscheinungsbild des Textinhalts einer Site drastisch ändern, einschließlich Größe, Zeilenhöhe, Zeilenlänge und mehr. Alle diese Stile spielen eine Rolle für die Lesbarkeit einer Site und sind für mobile Bildschirme wichtig.

Abgesehen davon sind Größe und Platz zwei der wichtigsten Überlegungen bei der Auswahl der richtigen mobilen Schrift.

Größe

Da verschiedene Schriftarten in unterschiedlichen Größen gerendert werden, gibt es jedoch keine Standardschriftgröße, die für mobile Bildschirme verwendet werden muss Alles, was kleiner als 16 Pixel ist, ist für jeden Bildschirm schwierig zu lesen Ganz zu schweigen von der Verwirrung darüber, wo sich der Anfang und das Ende von Textzeilen befinden.

Auf der anderen Seite führt zu großer Text zu unangenehmen Unterbrechungen (dasselbe gilt für Bindestriche, die wir Webdesigner selten verwenden). Bei mobilen Layouts werden normalerweise Schriftgrößen festgelegt EMs statt Pixel Damit die Schriftgröße relativ ist, können Sie auf verschiedene Bildschirmparameter reagieren

Raum

Bei kleineren Bildschirmen - insbesondere bei vertikalen Geräten - ist der Platzbedarf äußerst wichtig. Denken Sie an die in der Einführung genannten Bedingungen, mit denen Benutzer zu kämpfen haben: Beleuchtung, Bildschirmverdeckung durch Finger oder Hüllen usw. Das Hinzufügen von zusätzlichem Abstand zwischen und um Text ist von entscheidender Bedeutung.

Die kleinen Bildschirme mobiler Geräte erschweren bereits das Lesen zu enger Textzeilen. Tatsächlich ist eine Zeilenhöhe, die für Desktop-Bildschirme geeignet ist, für Mobilgeräte möglicherweise viel schwieriger zu lesen.

Ein guter Ausgangspunkt könnte im Bereich von 10 bis 20 Prozent liegen, aber so etwas ist sehr dynamisch, da unterschiedliche Schriftarten unterschiedliche Einstellungen erfordern. Eine Zeilenhöhe von mindestens 1,5 ist ein guter Ausgangspunkt, da der Leser die Wahrnehmung von luftigem und dennoch lesbarem Text erhält

Layout

Nicht nur Größe und Platz, sondern auch das Layout können einen großen Einfluss auf das gesamte Leseerlebnis auf Mobilgeräten haben. Die Herausforderung bei Mobilgeräten in Bezug auf die Leitungslänge sind zu kurze Leitungen. Text mit sehr kleinen Zeilenlängen beeinträchtigt den normalen Lesefluss.

Im Idealfall, Die Zeilenlängen für größere Bildschirme sollten ungefähr 65 Wörter betragen . Bei Geräten mit kleinem Bildschirm sollte diese Anzahl viel kleiner sein. Zeitungen streben seit langem nach Zeilenlängen von etwa 39 Wörtern für enge Inhaltsspalten. Dies ist eine gute Anleitung für enge Website-Spalten auf Mobilgeräten.

Ausrichtung

Lorem ipsum auf Monitor und Mobilgeräten

Bei mobilen Bildschirmen ist diese linksbündige Standardeinstellung häufig die beste Wahl

Standardmäßig wird der Webseitentext linksbündig ausgerichtet. Viele Designer möchten diese Ausrichtung für bestimmte Teile ihrer Entwürfe entweder auf die Mitte oder sogar vollständig ausrichten. In einigen Fällen funktionieren diese Stile möglicherweise sehr gut, aber auf Mobilgeräten funktionieren sie häufig nicht.

Bei mobilen Bildschirmen ist diese linksbündige Standardeinstellung häufig die beste Wahl. Linksbündiger Text - abgesehen von der allgemeinen Richtung, in die die Leute lesen - erleichtert das Verfolgen, da die linke Seite des Textes immer konsistent und leicht zu verfolgen ist.

Begründeter Text ist auch keine gute Option. Die linke Seite mag konsistent sein, aber aufgrund der geringen Breite der meisten Textspalten auf Mobilgeräten kann vollständig gerechtfertigter Text ungewöhnliche Lücken oder Flüsse im Inhalt erzeugen, da die Seite Schwierigkeiten hat, lange Wörter in Textzeilen einzufügen.

Selbst wenn Sie in Ihrem Design für größere Displays unterschiedliche Begründungen verwenden, möchten Sie möglicherweise für mobile Bildschirme wieder nach links ausgerichtet sein, um die Lesbarkeit zu verbessern.

Leistung und Funktionalität

Ein letzter Faktor, der bei der mobilen Typografie Ihrer Website berücksichtigt werden muss, ist die Gesamtleistung und -funktionalität dieser Website Wie schnell wird es für Besucher geladen und wie funktioniert es tatsächlich? .

In Bezug auf die Leistung haben mobile Benutzer in Netzwerken mit unzuverlässigen Verbindungen langsamere Ladezeiten als jemand, der zu Hause mit einer dedizierten Internetverbindung mit hoher Bandbreite sitzt. Wenn Ihre Site viele Web-Schriftarten mit @ font-face verwendet, sind Sie dies möglicherweise die Download-Leistung dieser Site negativ beeinflussen .

Unabhängig davon, ob Sie Schriftdateien zusammen mit Ihren anderen Site-Dateien einfügen oder einen Web-Schriftartendienst eines Drittanbieters verwenden, ist das Ergebnis dasselbe. Schriftarten müssen heruntergeladen werden, um auf der Website verwendet zu werden.

Web-sichere Schriftarten

Vergleichen Sie dies mit 'web-sicheren Schriftarten', die direkt vom Gerät eines Benutzers geladen werden und sofort geladen werden.

Web-sichere Schriftarten sind möglicherweise nicht so sexy wie viele der heute verfügbaren Web-Schriftarten, aber die Leistungsverbesserungen, die diese Schriftarten uns bieten können, sollten nicht außer Acht gelassen werden, insbesondere für mobile Websites.

Denken Sie unter Berücksichtigung der Funktionalität an alle Funktionen, die Text auf einem mobilen Gerät ausführen kann und die auf einem Desktop nicht verfügbar sind: Anrufen, Verknüpfen, Kaufen, Text usw. Es ist wichtig, besondere Überlegungen zu berücksichtigen, z. B. das Vergrößern oder Trennen von Text, wenn Entwerfen von Wörtern zur Ausführung bestimmter Funktionen.

Imbiss: Design zum Anfassen

Viele der Prinzipien guter Typografie, die für alle Designmedien gelten, gelten auch für die mobile Typografie. Die Verwendung von Schriftarten, die mit angemessenem Abstand und klaren Buchstabenformen leicht zu lesen sind, ist ein Muss für jeden Bildschirm. Bei mobilen Websites müssen Sie jedoch auch die einzigartigen Eigenschaften dieser Geräte, die Interaktion der Benutzer mit ihnen und die unterschiedlichen Umgebungen, in denen sie verwendet werden, berücksichtigen.

So wählen Sie einen Pfad in Photoshop aus

Beachten Sie bei der Betrachtung der Typografie auf Mobilgeräten, dass Benutzer diesen Text mit den Fingern berühren, anstatt sich nur einen Arm von ihren Bildschirmen entfernt zu befinden. Ein weiterer umsetzbarer Tipp wäre, Ihre Entwürfe aus Photoshop zu entfernen und zu sehen, wie Ihre Typografie mehreren Ansichten standhält.

Darüber hinaus sind die meisten Webplattformen für Designer, wie z Webydo oder Abobe Muse Geben Sie ihren Benutzern die Möglichkeit, auf Haltepunkte und entsprechende Vorschauen zu reagieren, damit Sie sicherstellen können, dass die Typografie ein tatsächliches Gerät enthält. Letztendlich gibt es keinen wirklichen Ersatz dafür, Ihr Design auf einer Reihe von Mobilgeräten anzuzeigen, um zu lesen und zu sehen, wie es unter realen Bedingungen auf einen kleineren Bildschirm reagiert. Daher ist der altmodische Begriff des Erscheinungsbilds möglicherweise das beste Maß für eine erfolgreiche mobile Typografie.

Wörter: Nurit Bahat

Nurit Bahat ist eine Designerin mit über 10 Jahren Erfahrung im Bereich Webdesign. Wie Webydo Nurit, der Art Director, entwarf die UI / UX der Plattform. Sie ist die Essenz von Webydos visueller Wirkung und immer auf der Suche nach Inspiration, um der Webydo-Community erstaunliche neue Themen zu bieten.

Mochte dies? Probiere diese...