Share
Lassen Sie uns die mobile Typografie ernst nehmen; Wir alle wissen, dass Mobile massiv ist, und wir können auch zustimmen, dass Typografie in einem Design überaus wichtig ist. Die Typografie ist ein grundlegendes Gestaltungselement. Ich persönlich ziehe es vor, mit jedem Entwurf zu beginnen, da er dazu beiträgt, eine gute Bühne für den Rest des Designs zu setzen. Sprechen wir also darüber, wie wir unsere mobile Typografie so gut wie möglich machen können.
Bei der Entwicklung von mobilen Geräten ist der größte Feind die physische Bildschirmgröße. Einige Smartphones sind sehr klein, wie das alte, aber immer noch weit verbreitete iPhone 4 / 4S. Nach Angaben der UNITY verwenden noch immer 15,9% der Menschen dieses veraltete Modell. In den USA sind es fast 24 Millionen Menschen. Ja, das sind viele Leute mit winzigen, winzigen Bildschirmen. Dann haben wir auch größere Bildschirme wie das neue iPhone 6 Plus, Galaxy Note 4 oder Nexus 6. Die Tatsache, dass die Bildschirmgröße so groß ist, ist an sich schon eine Einschränkung, denn was auf einem iPhone 4 gut aussieht, ist nicht immer so Auf dem iPhone 6 Plus gut aussehen.
Vielleicht möchten Sie Ihre Analysen betrachten und sehen, was das beliebteste Gerät Ihrer Website ist. Es ist jedoch allgemein anerkannt, dass ein geräteunabhängiger Ansatz auf lange Sicht besser ist.
Schauen Sie sich das Bild oben an, um zu sehen, wie gleichgroßer Text auf jedem Gerät dargestellt wird. Ich konnte noch nicht einmal „Heading 1“ auf das iPhone 5S passen, was zeigt, dass responsive Typografie mit der Bildschirmgröße beginnt.
Einige andere Hindernisse beim Entwerfen eines Smartphones umfassen die Beleuchtung in der Umgebung des Benutzers sowie die Nähe, mit der das Telefon an sein Gesicht gehalten wird.
Beginnen wir mit der Latte. Wenn wir unsere Telefone mit unseren Händen benutzen, neigen wir dazu, sie auf Armeslänge oder sogar näher an unser Gesicht zu halten. Dies bedeutet, dass der Typ eines Telefons kleiner sein kann, da der Abstand zwischen dem Bildschirm und unseren Augen geringer ist als derjenige eines Laptops oder eines Desktop-Monitors.
Die Möglichkeit, die Schriftgröße zu verringern, bedeutet auch, dass wir mehr Text in den gleichen Platz einfügen können, wodurch wir beruhigendere "Maßnahmen" erhalten. Dies verringert wiederum die kleinere Bildschirmgröße, jedoch nur geringfügig. Sie können dies in der Abbildung unten sehen.
Kleinerer Typ für kleinere BildschirmeDie Menschen benutzen ständig ihre Smartphones, überall. In der U-Bahn, im Park, auf den Sofas oder im Bett. Ihre App oder Website kann in verschiedenen Umgebungen mit unterschiedlichen Lichtverhältnissen verwendet werden, sodass Sie auch den Kontrast kennen müssen. Lesen im Park ist auch bei direktem Sonnenlicht möglich, wenn der Kontrast des Textes zum Hintergrund ausreichend ist. In diesem Szenario hilft auch ein größerer Text. Es ist weniger notwendig, sich auf den Kontrast zu konzentrieren, wenn das Lesen in einer U-Bahn erfolgt, in der die Beleuchtung nicht mehr so stark leuchtet, oder nachts im Bett.
Gizmodo veröffentlichte einen ausführlichen Artikel darüber, welches Mobilgerät (einschließlich Tablets und Smartphones) im Freien dominiert. Sie führten einen Vergleich ihrer Farben in Bezug auf verschiedene Sonnenlichtoptionen durch. Es stellt sich heraus, dass Samsung Galaxy S im indirekten Sonnenlicht das iPhone 4 übertroffen hat, was die schlechteste Beleuchtung im Freien ist. Lesen Sie den gesamten Artikel, wenn Sie weitere Informationen dazu suchen.
Mein Punkt ist einfach: Es gibt so viele bewegliche Teile, wenn es um die Lesbarkeit auf einem mobilen Gerät geht. Machen Sie sich mit Ihren Benutzern vertraut, damit Sie am besten bestimmen können, wie ihre Leseerfahrung aussehen soll, beginnen Sie mit ihren Telefontypen und enden Sie mit ihrer Umgebung.
Es gibt eine Vielzahl von Tutorials, mit deren Hilfe Sie bestimmen können, welche Pixel für Ihren Text goldene Verhältnisse haben sollen, oder einfach nur das, was gut aussieht. Eine gute typografische Skala für den Desktop herauszufinden, ist unkompliziert. Es ist eigentlich ziemlich einfach, dies auch für mobile Geräte zu tun. In Typecast finden Sie einen wunderbaren Artikel, der ausführlich beschreibt, wie Sie die Maße für Ihre mobile und Desktop-Typografie ermitteln können: Eine modernere Skala für die Web-Typografie. In dem Artikel wird klar erklärt, warum Typografie ansprechend sein muss. Aber ich möchte detaillierter werden, als einfach zu sagen: „Menschen lesen auf dem Handy anders“ - es ist viel mehr als das!
Sie sehen, Mobile ist am wenigsten Fest Medium, mit dem wir uns als Designer beschäftigen mussten. Wie ich bereits erwähnt habe, lesen die Leute überall auf ihrem Handy, in einer sich ständig verändernden Umgebung. Um ihre Leseerfahrung bestmöglich zu optimieren, müssen wir die Psychologie dessen verstehen, was tatsächlich zu einer guten Leseerfahrung führt.
Ich würde gerne glauben, dass die Gestaltung des besten Leseerlebnisses für Handys mit dem perfekten Körpertext beginnt. Für welche Schriftart Sie sich auch entscheiden, Sie müssen sicherstellen, dass sie flexibel genug ist, um verschiedenen Bildschirmgrößen in der gleichen Schriftgröße standzuhalten und trotzdem gut auszusehen. Wenn Sie sich für Helvetica Neue für Ihre Schriftfamilie entscheiden, sollten Sie sicherstellen, dass sie auf einem iPhone 4s in 16px sowie auf einem Nokia- und einem Galaxy-Telefon gut aussieht.
Berücksichtigen Sie bei der Auswahl einer Schrift auch die Schriftstärke, da bei einigen Telefonen normale, fette oder helle Texte anders angezeigt werden als andere.
Richtig, die Überschriften sind genauso wichtig! Mit Überschriften haben Sie mehr Gestaltungsfreiheit, da sie die Lesbarkeit der Auswirkungen beeinträchtigen können. Berücksichtigen Sie jedoch auch deren Skalierung. Eine Überschrift, die im ersten Bild mit mobilen Bildschirmgrößen gezeigt wurde, ist viel eher unlesbar, weil sie auf einem kleinen Bildschirm zu groß ist. Eine große Überschrift ist auch Platzverschwendung, da Sie verhindern könnten, dass Benutzer auf das Fleisch des Inhalts zugreifen.
Eine andere Sache, die Sie bei der Perfektionierung Ihres Körpertextes beachten sollten, ist der vertikale Rhythmus. Vertikaler Rhythmus bezieht sich auf den vertikalen Abstand und die Ausrichtung von Typografie und anderen Elementen auf der Seite. Der Begriff Rhythmus bezeichnet ein sich wiederholendes Muster. Ein guter vertikaler Rhythmus gewährleistet, dass das Leseerlebnis einfach ist, da es ein ausgeglichenes Layout ermöglicht, das die Augen des Lesers leicht leitet.
Genommen von http://modulargrid.orgUnabhängig davon, ob die Basislinie locker oder eng ist, ist ihre Konsistenz das Wichtigste. Es ist jedoch wichtig zu wissen, dass die Basislinie auf mobilen Geräten die geringe Bildschirmgröße widerspiegeln kann. Scheuen Sie sich nicht, die Dinge zu straffen, vor allem, wenn Sie die Schriftgröße reduziert haben, sondern ermitteln Sie einen bequemen vertikalen Rhythmus, um sicherzustellen, dass das Lesen für Ihren Leser reibungslos verläuft.
Wenn Sie Hilfe benötigen, um die besten Messungen für Ihren vertikalen Rhythmus zu finden, hat Andre Morton einen vertikalen Rhythmusgenerator in seinem Blog.
Es gibt einige Daumenregeln, die ich gerne mit Ihnen teilen möchte, wenn es um das Erstellen von Typografie im Allgemeinen geht, die jedoch besonders für responsive und mobile Typografie gelten.
Sie sollten das Kerning niemals für Websites oder Apps jeglicher Art anpassen müssen. Dies ist ein schwieriger Prozess und für das Web äußerst unzuverlässig! Bei hochwertigen Schriftarten ist das Kerning gut durchdacht, und wenn die von Ihnen gewählte Schriftart kein gutes Kerning aufweist, geben Sie sie ab.
Wenn rechts oder links von Ihrem Text kein klarer Lappen vorhanden ist, kann dies genauso gut gerechtfertigt sein (und Text sollte niemals im Web gerechtfertigt sein). Ein schlechter Lappen verursacht Löcher und klaffende Brüche im Leerraum; Es ist einfacher, Text zu lesen und zu scannen, wenn ein klarer Lappen vorhanden ist. Wie unterbricht Ihr Text bei verschiedenen Bildschirmgrößen? Ein Fix kann eine sehr einfache Anpassung sein, die entweder ein paar Pixel von dem enthaltenden Element Ihres Textes entfernt oder ein wenig dazu hinzufügt.
Es gibt nichts Trügerisches, als zu versuchen, einen kleinen Bereich eines Telefons zu berühren, und nicht in der Lage zu sein, weil es zu klein ist - oder noch schlimmer, stattdessen auf etwas anderes zu tippen. Vielleicht ist der beste Rat hier, so wenige wie möglich zu haben! Wenn es nur einen Inline-Link gibt, ist es einfacher, darauf zu tippen, da sonst nichts versehentlich geöffnet werden kann. Vergewissern Sie sich anschließend, dass die Verknüpfung frei ist. Dies kann auf verschiedene Arten erfolgen, z. B. um die Links fett zu machen oder sich an das Standard-Unterstreichungsmuster zu lehnen. Manchmal reicht es nicht aus, nur die Farbe zu ändern, wenn der Kontrast zu gering ist (denken Sie daran, wie wir über Bildschirmfarben und Beleuchtungsprobleme gesprochen haben?)
Vergewissern Sie sich schließlich, dass Inline-Links mehr Berührungsbereiche haben, als wahrgenommen werden. Dies kann durch Anwenden erreicht werden Anzeige: Inline-Block; Elemente zu verankern, aber stellen Sie sicher, Polsterung oder extra Zeilenhöhe Sie bewerben den Haupttext nicht.
Beim Entwerfen von Typografie für Mobilgeräte müssen Sie viele bewegliche Teile beachten. Ich hoffe, dass dieser Beitrag Ihnen einen Einblick in die Verbesserung Ihrer Designs für mobile Geräte gegeben hat. Teilen Sie uns in den Kommentaren Ihre eigenen Tipps und Tricks mit!
Accentsconagua