So verbessern Sie Ihre digitale Typografie

Beispiele für Zego-Typografie

Beim Übergang von Print zu Digital gibt es einen offensichtlichen und wichtigen Unterschied, der bei der Typografie zu berücksichtigen ist. Anders als beim Drucken bleibt Ihr Typ beim digitalen Design nicht statisch.

'Der gedruckte Typ kann streng kontrolliert werden, wobei das Ergebnis genau dem entspricht, den der Designer beabsichtigt hat', sagt Jack Statham, mittelschwerer Designer bei Ragged Edge. 'Die Typografie auf dem Bildschirm kann jedoch je nach Gerät für verschiedene Benutzer mit unterschiedlichen Detaillierungsgraden gerendert werden.'

Das bedeutet jedoch nicht, dass Typografie an Bedeutung verliert. im Gegenteil. 'In den letzten Jahren hat sich das Web- und App-Design von überflüssiger Dekoration befreit und bietet nun mehr Platz für Inhalte und damit für Text', erklärt Massimiliano Frangi, Senior Design Director bei CBA Italien. 'Die Wahl einer großartigen Schriftart ist jetzt ein Schlüsselelement für den Erfolg eines Webprojekts.'



In den letzten Jahren hat sich das Web- und App-Design von überflüssiger Dekoration befreit

Jack Statham

Heutzutage Spezialist Web-Schriftarten sind so optimiert, dass sie auf mehreren Geräten und Bildschirmauflösungen so sauber und konsistent wie möglich angezeigt werden. 'Schriftarten, die für den Druck entwickelt wurden, haben häufig Tintenfallen und einen hohen Kontrast in der Strichbreite', sagt Statham. 'Für das Web entwickelte Schriften weisen normalerweise gleichmäßigere Strichgewichte, höhere x-Höhen und offenere Schalen und Zähler auf.'

All dies bedeutet, dass es wichtig ist, die richtige Schriftart sorgfältig auszuwählen und korrekt anzuzeigen, wenn Ihr Design funktionieren, gut aussehen und auf mehreren Geräten, Bildschirmgrößen und Ausrichtungen lesbar sein soll.

Lesbarkeit ist der Schlüssel

'Nur weil eine Schrift schön ist, heißt das nicht, dass sie in allen Größen lesbar ist', sagt Martha Lisboa, Digitaldesignerin bei CBA Paris. Vermeiden Sie also verrückte Schriften, komprimierte Stile und Buchstabenformen mit dünnen Strichen. Beachten Sie außerdem, dass Texteffekte wie Schatten oder Abschrägungen bei größeren Größen zwar gut aussehen, auf kleinen Bildschirmen jedoch nicht funktionieren.

'Kurz gesagt, wählen Sie etwas Einfaches und Standardgewicht, um die Lesbarkeit auf allen Geräten zu gewährleisten, insbesondere bei langen Textabschnitten.'

Wenn es um den Satz geht, ist Hierarchie immer wichtig, aber besonders dann, wenn Menschen Ihr interaktives Design verwenden, um ein Ziel zu erreichen, sagt Statham.

'Sie haben einen begrenzten Bereich, in dem Sie den Typ festlegen und die Navigations- und Wegfindungselemente reduzieren können', betont er. 'Eine klare Typhierarchie hilft dem Benutzer also, sich schnell auf dem Bildschirm zurechtzufinden, und dient dem Benutzer als Abkürzung, um die Informationen auf dem Bildschirm zu verarbeiten.'

wie man auf einem Samsung Tablet zeichnet

Beispiele für fünfzehn Typografien

Das Website-Design von Fifteen's Nottingham Hospitals bietet eine freundliche, handschriftliche Schriftart

Alexandra Lofthouse, leitende UX-Designerin bei Fifteen, stimmt dem zu und erinnert uns daran, dass Menschen im Allgemeinen keine Apps verwenden, um massive Textabschnitte zu lesen. 'Text sollte also leicht zu lesen und zu verdauen sein', betont sie. 'Dies hängt vom Tonfall ab, der in der gesamten Kopie verwendet wird, und vom typografischen Stil, der auf interessante und ansprechende Weise miteinander verschmilzt.'

Und natürlich ist die Lesbarkeit im digitalen Bereich von enormer Bedeutung. 'Insbesondere bei langen Textpassagen besteht das Ziel darin, die Typografie' unsichtbar 'zu machen, indem der Benutzer einen Absatz schnell übergehen kann, ohne sich zu sehr auf jede Buchstabenform konzentrieren zu müssen', sagt Statham.

Er rät Ihnen, auf die Absatzmaßnahme zu achten. Halten Sie sie auf 45-75 Zeichen. Sorgen Sie für einen großzügigen Abstand zwischen den Zeilen: Streben Sie eine Mindestzeilenhöhe von 1,5 für die Textkopie an. Streben Sie eine leichte Erhöhung der Verfolgung an, um dem Typ Raum zum Atmen zu geben. Und wählen Sie eine angemessene Punktgröße: Die tatsächliche Zeichengröße variiert zwischen den Schriftarten, aber 16 Pixel sind ein gutes Minimum. '

Zugängliche Typografie

Farbe ist auch ein wichtiger Gesichtspunkt, wenn es um Lesbarkeit geht, bemerkt er. 'Hintergrundbeleuchtete Bildschirme können den Kontrast zwischen reinem Schwarz und Weiß erhöhen, was für die Augen anstrengend sein kann. Wenn Sie also ein weicheres Schwarz für Text oder einen hellgrauen Hintergrund verwenden, kann der Text besser lesbar werden. Es gibt auch ein paar Apps wie Kontrast , mit denen wir häufig sicherstellen, dass Farbkombinationen in einem Textkörper den aktuellen Barrierefreiheitsstandards entsprechen. '

Lee Carroll, Interaktionsdesigner bei Seymourpowell, bietet ähnliche Ratschläge. 'Achten Sie auf mangelnden Kontrast zwischen Text- und Hintergrundfarben', sagt er. 'Verwenden Sie die Snook.ca Farbkontrastprüfer um sicherzustellen, dass das Verhältnis hoch genug für einen Doppel-A- oder Dreifach-A-Standard für die Zugänglichkeit ist. “ Er schlägt außerdem vor, sich daran zu erinnern, dass möglicherweise nicht nur die Farbe geändert werden muss, um einige dieser Probleme zu lösen. Manchmal ist ein dickeres Gewicht oder ein größerer Text erforderlich, um den Kontrast zu erhöhen.

Beispiele für De Nigris-Typografie

Massimiliano Frangis Neugestaltung für De Nigris zielte darauf ab, die Zuschauer durch seine Erzählung zu fesseln

Und das alles nur für den Anfang: 2018 entwickelt sich das Feld rasant weiter. 'Die Technologie, mit der wir den Typ anzeigen, ändert sich ständig, und daher ändern sich auch die Anforderungen an den Typ auf dem Bildschirm', sagt Statham. ' Prototyp Zum Beispiel hat einige unglaubliche Funktionen in seinen Schriften, die es Ihnen ermöglichen, eine Schriftartdatei für mehrere Instanzen zu verwenden. Sie haben möglicherweise feinere Serifen in Ihren Überschriften als in Ihren Untertiteln, beispielsweise bei kleineren Größen, oder verringern die Zeichenbreite in engeren Ansichtsfenstern. Die Browserunterstützung nimmt ständig zu, daher hoffen wir, dies bald nutzen zu können. '

Und dieser Kurve immer einen Schritt voraus zu sein, bedeutet auch, mit Ihren technisch versierten Kollegen in guten Beziehungen zu sein, sagt Dan Bradshaw, Design Director bei TH_NK.

'Einer der Hauptunterschiede zwischen digitaler Typografie und Druck besteht darin, dass sie nach dem Entwurf erstellt werden muss', betont er. 'Machen Sie sich also mit einem Entwickler vertraut, wenn Sie mit der Codeseite der Dinge nicht allzu vertraut sind, um sicherzustellen, dass Ihre Designs so zum Leben erweckt werden können, wie Sie sie angelegt haben.'

Dieser Artikel wurde ursprünglich in Computer Arts, dem weltweit meistverkauften Designmagazin, veröffentlicht. Kaufen Sie hier die Ausgabe 277 oder Abonnieren Sie hier Computer Arts .

Touchscreen-Monitore für Mac Mini

Zum Thema passende Artikel: