Typography for Social Media

Social media typography is display typography at mobile scale. Users scroll fast, view on small screens, and encounter your text through platform UI overlays — profile icons, like buttons, story reply bars, and caption truncation. A headline that works in Figma at 100% zoom may disappear in a crowded feed thumbnail.

This chapter covers platform dimensions, safe zones, font sizing, and placement rules for major social networks.

Platform dimensions

Design at native export resolution, not scaled-down previews.

Platform	Format	Dimensions	Aspect ratio
Instagram	Feed post	1080 × 1080 px	1:1
Instagram	Story / Reel cover	1080 × 1920 px	9:16
Instagram	Carousel slide	1080 × 1080 px	1:1
LinkedIn	Feed post	1200 × 627 px	~1.91:1
Twitter / X	Post image	1600 × 900 px	16:9
Facebook	Feed post	1200 × 630 px	~1.91:1
Facebook	Cover photo	820 × 312 px	~2.63:1

When in doubt, design square (1080×1080) for Instagram and 16:9 (1280×720 or 1600×900) for link-preview cards — these scale across platforms with minimal cropping.

Font sizing at mobile scale

Sizes below are for a 1080px-wide canvas — scale proportionally for other widths.

Role	Size range	Ideal	Notes
Headline	48–96 px	64 px	Must parse in under 2 seconds
Subhead	24–40 px	32 px	Clear step down from headline
Caption / CTA	14–22 px	18 px	Minimum for legibility on mobile

Safe zones and UI overlays

Platform chrome covers edges of your graphics. Keep essential text out of these zones:

Instagram Stories and Reels (9:16)

• Top 12% — profile icon, time, platform UI
• Bottom 20% — reply bar, swipe-up hint, like/share buttons
• Safe text area — middle 60%, biased toward top third

Instagram feed posts (1:1)

• Centre-weight headlines — feed crops inconsistently across devices
• Avoid edge-critical text — 5% margin on all sides minimum
• Carousel consistency — same headline size and position on every slide

LinkedIn and Facebook link cards

• Left third may be cropped in some preview contexts
• Keep logo and headline out of the bottom-right (timestamp overlay on some clients)

Legible fonts for social graphics

Social feeds demand bold, high-contrast type that survives compression and small sizes.

Recommended

• Inter Bold / Black, Montserrat Bold — clean, modern, legible
• Bebas Neue, Archivo Black, Anton — impact headlines, all-caps
• Playfair Display, Instrument Serif — editorial and luxury; use 48px+ only

Avoid

• Thin/light weights (100–300) — disappear in feed compression
• Hairline serifs — break up in JPEG export
• More than 8 words in a headline — feed scanning doesn't allow it
• Low-contrast text on photos — always add a scrim

For display hierarchy principles, see Typography Posters.

Text placement strategies

Feed posts (1:1)

• Centre stack — headline + subhead centred for announcement graphics
• Left-aligned column — editorial and quote cards; 60–70% canvas width
• Contrast scrim — 40–60% dark overlay when text sits on photography

Stories and Reels (9:16)

• Top third — primary message in the "thumb zone" where eyes land first
• Large centre text — hooks for Reels ("Wait for it…", "3 tips")
• Bottom zone — decorative elements only, never essential copy

Carousels

• Slide 1 — hook headline; must work as standalone feed thumbnail
• Consistent type scale across all slides — same title size, same position
• Slide numbers or progress — small, bottom corner, 14–16px

Color and contrast

Social platforms compress images aggressively. Subtle gray-on-gray fails after JPEG export.

• White on dark scrim or dark on light solid — highest reliability
• Test with the WCAG Contrast Checker
• Avoid pure red/green differentiation — accessibility and compression both suffer

Common mistakes

Mistake	Fix
24px headline on 1080 canvas	Minimum 48px for feed headlines
Text in story bottom 20%	Move to top 60%
Light weight on busy photo	Bold weight + dark scrim
Different sizes per carousel slide	Document a fixed type scale
Designing at 500px preview	Design at 1080px native export

Try it: Social playground

Switch to Instagram story in the playground to test safe zones and bottom UI overlap.

Use the Medium Typography Playground for Instagram post and story presets with validation.

Production checklist

• Designed at native platform resolution (1080×1080 or 1080×1920)
• Headline at 48px minimum on 1080 canvas
• Story/Reel text in top 60% only
• Bold weight (600+) for headlines
• Contrast scrim on text-over-photo layouts
• Carousel slides use consistent type scale
• Zoomed to 33% — headline still readable
• Exported as PNG for text-heavy graphics (JPEG for photos only)

Related chapters and tools

• Typography Posters — display hierarchy at scale
• Typography for Branding — social templates in brand systems
• Typography for YouTube & Video — thumbnails and on-screen text
• Medium Typography Playground — validate social sizes
• WCAG Contrast Checker — test text/background pairs

Social typography is fought in the feed, not in the artboard. Design at native size, respect platform safe zones, and make every headline survive the scroll.