Typografie für Social-Media-Beiträge: der praktische Leitfaden

Nutzen Sie eine saubere Serifenlose, eine Headline zwischen 72 und 110 px auf einem 1080-px-Format, Fließtext mit 40 bis 48 px und nichts unter etwa 32 px. Diese Zahlen sind unsere Empfehlung, abgeleitet aus Apples Minimum von 11 pt für iOS-Text und aus der Art, wie ein 1080-px-Bild auf einen Smartphone-Bildschirm verkleinert wird.

Unserer Ansicht nach werden die meisten Social-Media-Beiträge im Daumen-Scroll gelesen, auf Armlänge, in ein bis zwei Sekunden. Typografie hat dabei eine einzige Aufgabe: sofort erkannt zu werden. Dieser Leitfaden ist die Hub-Seite unseres Typografie-Clusters. Er gibt Ihnen eine Schriftskala zum Kopieren, die Rechnung dahinter und einen Test, was mit einer Headline in echter Smartphone-Größe passiert.

Wie groß sind 1080 px auf einem Smartphone?

Ein iPhone 16 hat ein Display mit 2556 mal 1179 Pixeln. Ein 1080 px breiter Beitrag, der die Bildschirmbreite ausfüllt, wird daher mit ungefähr so vielen Pixeln dargestellt, wie der Bildschirm breit ist; ein Canvas-Pixel entspricht also etwa einem Gerätepixel. Apples Richtlinien sind jedoch in Punkten geschrieben, nicht in Pixeln. Teilt man die Breite von 1179 px durch 3 (unsere Arbeitsannahme für das 3x-Display), ergibt sich ein Bildschirm von etwa 393 pt Breite. Kurz: 1 pt = 3 Geräte-px, also entspricht 1 Canvas-px etwa 1 Geräte-px und 2,75 Canvas-px entsprechen etwa 1 pt.

Die Umrechnung, die wir verwenden: 1080 / 393 = etwa 2,75 Canvas-px pro Punkt. Das gilt, wenn der Beitrag den Bildschirm von Rand zu Rand ausfüllt. Feeds fügen Ränder hinzu, und manche Oberflächen zeigen das Bild kleiner. Betrachten Sie 2,75 also als Bestfall und rechnen Sie eine Sicherheitsreserve ein.

Apple-iOS-Wert	Punkte	Canvas-px bei 1080 Breite (x 2,75)
Minimale Textgröße	11	etwa 30
Caption 1	12	etwa 33
Footnote	13	etwa 36
Default body	17	etwa 47
Title 2	22	etwa 61
Large Title	34	etwa 94

Alle Punktwerte stammen aus Apples iOS-Textstilen; die Pixelspalte ist unsere eigene Rechnung. Auch Apples eigene Design-Tipps nennen 11 pt als kleinsten lesbaren Text.

Welche Schriftgrößen funktionieren auf einem 1080-px-Beitrag?

Hier ist die Skala, die wir für 1080 px breite Formate empfehlen. Sie ist unsere Empfehlung, keine Plattformregel. Kein soziales Netzwerk veröffentlicht eine Mindestschriftgröße für Bilder.

Rolle	Größe bei 1080 px	Etwa auf dem Smartphone	Schnitt	Zeilenhöhe
Headline	72 bis 110 px (Untergrenze 72)	26 bis 40 pt	700 bis 800	1,0 bis 1,15
Subheadline	48 bis 60 px	17 bis 22 pt	600	1,2
Fließtext	40 bis 48 px	15 bis 17,5 pt	400 bis 500	1,3 bis 1,5
Eyebrow oder Label (Versalien)	32 bis 36 px	12 bis 13 pt	600, weit gesperrt	1,2
Kleingedrucktes (nie wesentlich)	mindestens 32 px	12 pt	500	1,3

Drei Regeln stehen hinter der Tabelle. Alles, was der Leser verstehen muss, bleibt bei 40 px oder darüber. Alles unter 32 px ist Dekoration, Rechtstext oder ein Handle. Halten Sie die Headline mindestens das 1,5-Fache des Fließtexts: 72 px über 48 px ist das engste Paar in unserer Tabelle, und bei 110 px über 40 px erreicht der Abstand etwa das 2,75-Fache, sodass die Hierarchie auf einen Blick erhalten bleibt. Zum Layout rund um diese Größen lesen Sie unsere Pillar-Seite zu den Layout-Prinzipien. Die Rechnung hinter den Untergrenzen von 40 und 32 px und wie sie sich bei Formaten mit 1200 und 1500 px ändern, steht in unserem Leitfaden zur Mindestschriftgröße für Social-Media-Grafiken.

Welche Schriften sind bei kleinen Größen am leichtesten zu lesen?

Wählen Sie zuerst nach Legibility. Die Nielsen Norman Group trennt Legibility von Readability: Legibility bedeutet, ob Menschen die Zeichen physisch erkennen können, und hängt von Größe, Kontrast und Klarheit der Schrift ab. Ein Social-Media-Beitrag stellt die Legibility härter auf die Probe als fast jedes andere Medium.

Unsere Empfehlungen:

• Eine Arbeitspferd-Serifenlose mit großzügiger x-Höhe (der Höhe der Kleinbuchstaben) und offenen Buchstabenformen. Inter, Roboto und System-Sans-Familien passen alle.
• Höchstens drei Schnitte: Regular für Fließtext, Semibold für Labels, Bold für Headlines.
• Meiden Sie leichte Schnitte. Apples Richtlinien sagen, dass Ultralight, Thin und Light bei kleinen Größen schwer zu lesen sind.
• Reservieren Sie eine Serifen- oder Display-Schrift für Zitate und redaktionelle Headlines, und testen Sie sie bei 390 px Breite, bevor Sie sich festlegen.
• Halten Sie die Laufweite bei großem Text eng und bei Kapitälchen weit. Headlines ab 90 px verlangen meist eine leicht negative Laufweite, ein 32-px-Eyebrow eine leicht positive.

Die Schriftwahl ist auch eine Markenentscheidung, halten Sie die Kombination daher einmal schriftlich fest. Unser Leitfaden zu Markenrichtlinien für kleine Teams zeigt, wie.

Was passiert, wenn die Headline zu lang ist?

Hier zeigt ein festes Format seine Grenzen. Hier ist eine Vorlage, gerendert aus unserer Demo-Marke AURORA, mit einer Headline von 92 px in einem Feld von 888 mal 440 px. Zuerst eine Headline mit zwei Wörtern.

Nun dieselbe Vorlage mit einer Headline aus 99 Zeichen.

Die Engine hat die Schrift ein Stück verkleinert (laut unserer Messung von 92 px auf etwa 80 px), damit sie passt, statt überzulaufen. In Chikaboom legt der Designer eine Idealgröße und eine Untergrenze fest (diese Headline beginnt bei 92 px mit einer Untergrenze von 56 px und erlaubt 5 Zeilen); passt der Text auch an der Untergrenze nicht, endet er mit einer Ellipse. Niemand im Team kann den Text über das Feld hinaus oder unter die Untergrenze schieben. Das ist das praktische Argument für gesperrte Vorlagen: Typografie-Entscheidungen trifft einmal die Person, die sie versteht.

Ist die lange Headline in Smartphone-Größe noch lesbar?

Unten sehen Sie dieselbe Vorlage mit demselben Text, nativ gerendert mit 393 mal 393 px, nahe der Breite eines Smartphone-Bildschirms. Es ist ein frisches Rendering und keine verkleinerte Kopie des 1080-Bildes, daher unterscheiden sich die Zeilenumbrüche.

Unsere Beobachtung: Die Headline bleibt lesbar. Beachten Sie, dass die Untergrenze von 56 px dieser Demo-Vorlage unter unserer eigenen Empfehlung von 72 px für Headlines liegt: Sie entspricht etwa 20 pt in einer Smartphone-Ansicht über die volle Breite (56 / 2,75), in Ordnung für eine lange Headline, aber ein Gegenbeispiel für eine kurze. Legen Sie in Ihren eigenen Vorlagen die Untergrenze für Headlines bei 72 px oder mehr fest. Die kleinen Labels sind die schwächsten Elemente: In dieser Vorlage liegen sie nahe an der von uns empfohlenen Untergrenze von 32 px und sind bei 393 px kaum lesbar, behandeln Sie sie also als Dekoration. Führen Sie diese Prüfung für jede Vorlage durch, die Sie ausliefern: Rendern Sie sie mit 393 px und lesen Sie sie auf Armlänge. Sie können es in der Live-Demo selbst ausprobieren.

Wie gelten die WCAG-Regeln für Text in Bildern?

Unserer Ansicht nach zählt der Kontrast mehr als jede Größenregel. Die WCAG sind für Webinhalte geschrieben, und ihr Kontrastkriterium umfasst auch Bilder von Text; die Anwendung ihrer Verhältnisse auf Social-Media-Bilder ist unsere Empfehlung, keine Plattformvorgabe. Verlangt werden 4,5:1 für normalen Text und 3:1 für großen Text; groß bedeutet dabei 18 pt oder mehr, oder 14 pt fett oder mehr (in CSS-Begriffen etwa 24 px und 19 px). Beachten Sie, dass die WCAG keine Mindestschriftgröße festlegen, sondern nur größenabhängige Kontrastschwellen, und davor warnen, dass Bilder von Text nicht so gut skalieren wie echter Text. Für einen tieferen Blick auf Farbpaare lesen Sie unseren Leitfaden zum Farbkontrast.

Beim Abstand liegt der Fall anders. Das Kriterium 1.4.12 nennt eine Zeilenhöhe vom 1,5-Fachen der Schriftgröße, einen Absatzabstand vom 2-Fachen, eine Laufweite von 0,12 em und einen Wortabstand von 0,16 em, verlangt aber, dass der Inhalt erhalten bleibt, wenn Nutzer diese Werte anwenden, nicht dass Designs sie verwenden. Es kann nicht auf ein abgeflachtes PNG angewendet werden, nutzen Sie die Zahlen also nur als Referenz. Unsere Empfehlungen zur Zeilenhöhe in der Tabelle sind für Headlines absichtlich enger.

Da Nutzer Text in einem Bild nicht vergrößern können, setzen Sie die eigentliche Botschaft auch in die Bildunterschrift und den Alt-Text.

Eine Typografie-Checkliste vor der Veröffentlichung

• Headline mit 72 px oder größer, alles Wesentliche mit 40 px oder größer, nichts unter 32 px.
• Eine Serifenlose, höchstens drei Schnitte, keine dünnen oder leichten Schnitte.
• Headline mindestens das 1,5-Fache des Fließtexts (72 px über 48 px im engsten Fall).
• Kontrast von 4,5:1 für kleinen Text, 3:1 für Text ab 24 px (18 pt) im Sinne der WCAG. Denken Sie daran, dass das 1080-px-Format verkleinert wird, prüfen Sie also die tatsächliche Größe.
• Headline in ihrer längsten erlaubten Länge und bei 393 px Breite getestet.
• Untergrenze für jedes Textfeld festgelegt, damit längerer Text schrumpft und mit einer Ellipse endet, statt überzulaufen.
• Laufweite für Display-Größen enger, für Kapitälchen weiter.
• Text innerhalb der Safe Zones der Plattform. Siehe die vollständige Größenübersicht und den Leitfaden zu Story- und Reel-Safe-Zones.