Typografie ist wohl der wichtigste Teil einer Website-Gestaltung. Ein riesiger Header auf einer leeren weißen Seite könnte wie ein Traum eines Minimalisten aussehen, aber was passiert, wenn wir anfangen, unsere Seite für kleinere und kleinere Geräte zu verkleinern?

Hnnggghh !!! Alles bricht und sieht schrecklich aus.

Deshalb brauchen wir responsive Typografie. Wir brauchen Typografie, die sich an Haltepunkten verkleinert. Aber niemand, der bei Verstand ist, möchte sich die Mühe machen, alle Grundlinienstile für jedes typografische Element auf seiner Seite zurückzusetzen.

Zum Glück können wir die Größe des ändern html Selector, damit alle Nachkommen eine relativ kleinere Größe erben.

Zum Beispiel

Beginnen wir mit einem Beispiel für ein Küchenspülen-Markup:

Kopfzeile 1
 
Header 2
 
Header 3
 
Kopfzeile 4
 
Kopfzeile 5
 
Kopfzeile 6
 
 Lorem ipsum dolor sitzt amet, eine elitäre Frau. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel korrupi labore minima, mit Ausnahme von Aburi, Fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Listenelement 1
 
Listenelement 2
 
Listenelement 3
 
 
 
Listenelement 1
 
Listenelement 2
 
Listenelement 3
 

Schieben Sie es ein wenig von den Wänden, indem Sie unser Polster auffüllen html Selector und wir setzen die zurück Rand obenbei all unseren typografischen Elementen, denn es ist wirklich ärgerlich, wenn Sie ganz oben stehen h1 Das Tag befindet sich etwa einen Zoll unter einem Bild, neben dem es sitzen soll. Alles andere bleibt vorerst auf der Standardeinstellung des Browsers.

Wir verwenden Stylus hier, weil, wie Sie wahrscheinlich wissen, ich ein großer Fan der knappen Syntax von Stylus bin:

html-Auffüllen: 2 rem h1, h2, h3, h4, h5, h6, p, ul, ol-Rand oben: 0

Ein guter Anfang, aber riesiger Text für riesige Texte und leichte Schriftarten ist im Moment ein wirklich schöner Trend, also lassen Sie uns das hinzufügen. Wir werden auch einige einwerfen Zeilenhöhe um sicherzustellen, dass unsere Absätze gut aussehen.

html padding: 2rem font-size: 24px font-weight: 100 Zeilenhöhe: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol Margin-top: 0

Zeilenhöhe Fix

Aber jetzt haben unsere Elemente ein riesiges Rand unten auf sie und unsere Header haben einen riesigenZeilenhöhe auch. Zum Glück ist dies eine schnelle Lösung:

html padding: 2rem font-size: 24px font-weight: 100 Zeilenhöhe: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol rand oben: 0 rand unten: 1 rem h1, h2, h3, h4, h5, h6 Rand unten: .5rem Zeilenhöhe: 1.1

Dort! Unsere faule Typografie ist komplett. Wir haben einige typografische Elemente (Blockquotes, Definitionslisten usw.) vermisst, aber Sie können diese gerne der Boilerplate hinzufügen, wenn Sie auf sie treffen.

Kleinere Viewport Weh

Was passiert nun, wenn wir unser Ansichtsfenster zusammenziehen? Unsere Typografie sieht schrecklich aus. Es ist schwer zu lesen und erfordert, dass der Benutzer mehrmals streicht, um nur einen Absatz zu lesen.

Beheben Sie das Problem, indem Sie einige Medienabfragen hinzufügen und unsere ändern html Selektor Schriftgröße an jedem Haltepunkt:

html padding: 2rem font-size: 24px font-weight: 100 Zeilenhöhe: 1.5 @media (max-width: 900px) font-size: 20px @media (max-width: 500px) font-size: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol Rand oben: 0 Rand unten: 1 rem h1, h2, h3, h4, h5, h6 Rand unten: .5rem Zeilenhöhe: 1.1

Voila! 

Dort haben Sie es, eine reagierende Typografie-Kochplatte in fünf Minuten. Alle typografischen Elemente werden in Bezug auf die Größe angepasst html Element, also durch ein kleineres html Schriftgröße auf kleineren Bildschirmen reduzieren wir alles proportional.

Vollbild-Demo zu CodePen.

Lesen Sie weiter

Wenn Sie besonders interessiert sind Ja wirklich Wenn Sie diese Boilerplate detaillierter anpassen möchten, empfehle ich Ihnen A Modern Scale for Web Typography von Jason Pamental.