Ein einfacher Leitfaden für Responsive Typografie
Die überwiegende Mehrheit der Artikel, die sich mit Responsive Design befassen, konzentriert sich auf zwei Hauptbereiche: ein flüssiges, flexibles Raster und flüssige, flexible Bilder. Worüber viele nicht sprechen, ist die Typografie.
Und doch ist der Text, der Inhalt , für die Mehrheit der Webseiten das wichtigste Element.
Zugegeben, für Websites, auf denen Bilder oder Videos der primäre Inhalt sind, ist der Responsive-Typ etwas weniger wichtig, sollte aber dennoch nicht übersehen werden.
Die gute Nachricht ist, dass reaktionsfähige Typografie nicht besonders schwer zu erreichen ist. Wir brauchen nur etwas Zeit, um darüber nachzudenken, wie unser Typ auf Änderungen der Bildschirmgröße reagieren sollte, und diese Änderungen dann umzusetzen.
Prinzipien des reagierenden Typs
Es gibt zwei Hauptprinzipien für die Erstellung einer effektiven reaktionsfähigen Typografie. Der erste ist in der Größe veränderbar. Das bedeutet, dass der Typ nicht nur auf der Größe des Bildschirms basiert, sondern auch vom Benutzer in der Größe geändert werden kann.
Die zweite ist optimierte Zeilenlängen, die die Lesbarkeit erhalten. Das bedeutet, dass bei einigen Bildschirmen der Inhaltsbereich kleiner und die Zeilenlängen kürzer sind, obwohl der Inhalt theoretisch breiter sein könnte.
Resizable-Typ mit rems
Die meisten Designer verwenden entweder Pixel oder ems, um ihren Typ zu bestimmen. Ems sind eine bessere Option, da sie Benutzern ermöglichen, die Größe in ihrem Browser zu ändern. Ems sind jedoch relativ zum übergeordneten Element, was bedeutet, dass sie komplizierter zu verwenden sind als Pixel, was nur in responsiven Designs kombiniert wird, in denen mehr Größen und Beziehungen zu verfolgen sind.
Rems bieten eine bessere Alternative zu ems. Sie funktionieren in fast identischer Weise, abgesehen von einem Hauptunterschied: rem Einheiten sind relativ zur html Element, nicht einzelne Elternelemente. Dies macht die korrekte Dimensionierung Ihres Typs wesentlich einfacher.
Rem-Einheiten werden jetzt in allen gängigen modernen Browsern unterstützt, einschließlich Opera ab Version 11.6 und IE9. Auch wenn Sie für frühere Browser Fallbacks verwenden möchten, gibt es genügend Unterstützung für Rems, um sie jetzt zu verwenden.
Da Sie Rem-Einheiten für die Größe verwenden, stellen Sie sicher, dass Sie das Zurücksetzen auf Ihre verwenden html Element und nicht dein body Element. Also sollte es so aussehen:
html { font-size:100%; }
Jetzt werden Ihre Rem-Einheiten auf die Standardschriftgröße für das Gerät angewendet.
Als Nächstes müssen Sie die Schriftgröße für jede Anzeigegröße festlegen. Ich empfehle, mit tatsächlichen Schriftgrößen auf verschiedenen Geräten zu experimentieren, um zu sehen, was am besten aussieht. Es ist weitgehend abhängig von den Schriften, die Sie ausgewählt haben, sowie Ihr Gesamtdesign.
Wahrscheinlich möchten Sie mehrere Schriftgrößen auf der Grundlage verschiedener Bildschirmgrößen angeben, was ziemlich einfach ist. Ihr CSS könnte beispielsweise so aussehen:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Zugegeben, dies ist ein vereinfachter Code für diesen Artikel, aber gibt Ihnen einen Ausgangspunkt. Sie werden feststellen, dass für die kleinsten Bildschirme eine etwas größere Schriftgröße angegeben wird. Dies liegt daran, dass größere Schriftgrößen in der Regel auf kleinen Bildschirmen leichter zu lesen sind.
Natürlich möchten Sie zusätzliche Spezifikationen für Dinge wie Ihre machen h1 Elemente und dergleichen. Ich empfehle ein Werkzeug wie Web-Schriftmuster um zu sehen, wie dein Typ tatsächlich aussieht.
Aufrechterhaltung optimaler Linienlängen
Obwohl der Typ der Größe veränderbar ist, ist das ein ziemlich einfaches Konzept, und die Einhaltung der richtigen Leitungslängen über mehrere Geräte hinweg wird ein bisschen trickreich. Es hat eine ganze Reihe von Debatten darüber gegeben, was die optimale Zeilenlänge für die Lesbarkeit ist, aber laut Baymard Institut Der Konsens scheint zwischen 50 und 75 Zeichen pro Zeile zu liegen.
Sie empfehlen auch, einen Container mit fester Breite für Ihre Inhalte zu verwenden, was aber den Zweck eines Responsive-Designs nicht erfüllt. Daher müssen wir die Dinge etwas anders angehen, wenn wir mit optimierten Zeilenlängen reagieren wollen.
Sehen Sie sich zunächst die verschiedenen Bildschirmgrößen an, für die Sie arbeiten, und überlegen Sie, welche Schriftgröße Sie verwenden sollten, um ungefähr 50 Zeichen in einer Zeile zu erhalten. Bei sehr kleinen Bildschirmen müssen Sie unter 50 Zeichen pro Zeile gehen, um eine lesbare Schriftgröße beizubehalten, aber 50 sollte das Ziel sein. Dies gibt uns einen guten Ausgangspunkt für unsere Schriftgröße.
Wir sollten auch maximale Breiten (oder Knickpunkte) für Textinhaltsbereiche festlegen. Sehen Sie sich die Größe des für eine bestimmte Bildschirmgröße verwendeten Typs an und bestimmen Sie dann die Breite des Inhaltscontainers, wenn Sie ungefähr 75 Zeichen pro Zeile haben. Dies wird nicht genau sein, es sei denn, Sie verwenden eine Monospace-Schriftart, aber Sie sollten in der Lage sein, einen Durchschnitt ziemlich leicht zu kommen. Das wird unsere maximale Behälterbreite.
Nehmen wir an, die Standardschriftgröße für ein bestimmtes Gerät ist 16px, und Sie möchten, dass Ihre Schriftgröße 20px beträgt (nehmen wir an, wir verwenden eine Serifenschrift wie Droid Serif für dieses Beispiel). Das heißt, Sie geben den Typ als 1.25rem an. Bei dieser Größe benötigen Sie eine Containerbreite von ca. 675 Pixel. Dies gibt uns in den 60er Jahren einen Charakter, der genau in unserer Zielbreite liegt.
Verwenden Sie diesen Code, um die Containerbreite anzugeben:
@media (min-width: 950px) { .container {width:675px;} }
Sie können diese maximalen Linienbreiten für jede Anzeigegröße oder nur für bestimmte festlegen. Bei kleineren Bildschirmen sollten Sie die Behälterbreite auslassen und den Typ über die gesamte Breite des Bildschirms verteilen lassen.
Nun, mit viel größeren Bildschirmen, möchten Sie vielleicht Ihren Inhalt in mehrere Spalten aufteilen. Angenommen, Sie arbeiten mit einem iPad im Querformat. Ihre Bildschirmbreite beträgt 2048 Pixel. Wenn Sie Ihre Linien ausdehnen, um den Bildschirm auszufüllen, ist das Lesen schwierig. Wenn Sie jedoch Ihren Inhalt zentrieren und die Zeilenlängen kürzer halten, wird der Zweck der Anzeige von Inhalten im Querformat möglicherweise zunichte gemacht.
Setzen Sie Ihren Typ stattdessen in zwei Spalten (oder sogar drei, abhängig von Ihrer Schriftgröße). CSS3's mehrspaltige Spezifikation macht es sehr einfach, Ihren Text in mehrere Spalten aufzuteilen, ohne dass Sie Ihr gesamtes Layout ändern müssen. Kombinieren Sie dies mit Medienabfragen, und Sie haben jetzt ein Inhaltslayout, das sich in zwei oder drei Spalten für größere Bildschirme aufteilt, wobei sowohl eine gut lesbare Schriftgröße als auch eine gut lesbare Zeilenlänge beibehalten wird.
Auch hier ist der Code dafür ziemlich einfach:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Auf Bildschirmen, die größer als 1140 Pixel sind, können Sie Ihren Inhalt in zwei Spalten aufteilen, wodurch Ihre Zeilenlängen besser lesbar sind.
Verwenden alternativer Schriften
Eine Sache, die oft übersehen wird, wenn es um reaktionsfreudige Typografie geht, ist die Idee, dass verschiedene Schriftarten bei verschiedenen Größen nicht gut funktionieren. Dies gilt insbesondere für Bildschirmschriften.
Bedeutet das, dass Sie diese Schriftarten in Ihren Responsive Designs vermeiden sollten? Natürlich nicht. Geben Sie stattdessen unterschiedliche Schriftarten für verschiedene Elemente in Ihren größeren oder kleineren Layouts an.
Bei einem Design für Desktop-Computer möchten Sie beispielsweise eine ähnliche Schriftart verwenden Ligaskript für Ihre Header. Aber auf einem kleineren Display, wie einem iPhone, müssen Sie es entweder so groß machen, dass es den Inhalt dominiert, oder es wird sehr schwer zu lesen sein.
Was wir hier tun können, ist die Verwendung von Ligascript für die größeren Displays (iPad, Desktop usw.), während für kleinere Displays (wie das iPhone oder andere Smartphones) auf eine größere Version der Body-Schriftart umgeschaltet wird.
Um dies zu tun, würden Sie einfach etwas wie folgt angeben:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Natürlich kann dies für mehr als nur Ihre Überschriften getan werden.
Fazit
Während Responsive Design sich weitgehend auf Bilder und das Layout konzentriert hat, ist Typografie genauso wichtig wie beides. Der beste Teil ist, dass es nicht besonders schwierig ist, Ihre Typografie für ein responsives Design anzupassen und zu optimieren.
Es ist wichtig, dass Sie die gleiche Zeit und Mühe investieren, die Sie in andere Elemente Ihres Designs stecken. Die Lesbarkeit Ihrer Textinhalte ist eine wichtige Komponente, um eine optimale Benutzererfahrung für Ihre Besucher zu schaffen.
Setzen Sie bei Ihren Entwürfen so viel Wert auf reaktionsfähige Typografie wie auf reaktive Raster und Bilder? Warum oder warum nicht?