Typography Guide: Make your profile feel “premium”
Colors get attention. Typography gets read.
This section controls your main font, size, weight, and spacing so your profile feels clean instead of “default theme with hopes and prayers.”
📸 What you’ll see in Typography
This matches the Typography section exactly.
The on-screen tip is perfect:
Change one text setting at a time so you can compare results. Save → look → then change the next thing.
Change one text setting at a time so you can compare results. Save → look → then change the next thing.
✅ What Typography controls (based on your screen)
- Profile Text Color — main text color across your profile.
- Profile Font Family — the main font used across profile text.
- Profile Font Size — overall body text size.
- Profile Font Weight — how thick text looks (Normal/Bold, etc.).
- Profile Text Transform — optional text transforms (like uppercase).
- Profile Spacing — space/padding around profile blocks (breathing room).
🧠 The simple typography mental model
You’re tuning two things:
readability (can people read this fast?) and feel (does it match your vibe?).
Good typography doesn’t scream. It quietly makes everything look “finished.”
🚀 The “premium” setup (safe defaults)
- Font Family: pick a clean font first (Roboto is a great default).
- Font Size: Medium (14px) is fine for short profiles; go bigger if you write a lot.
- Font Weight: Normal is easiest to read; use heavier weight only if your font is too thin.
- Text Color: off-white on dark blocks / dark gray on light blocks.
- Spacing: keep a comfortable padding (15px is a solid middle ground).
Most common “why does this feel weird?” issue:
Font size is too small or spacing is too tight. If the profile feels cramped, increase size or spacing slightly.
Font size is too small or spacing is too tight. If the profile feels cramped, increase size or spacing slightly.
🎛 Field-by-field tips (quick + practical)
-
Profile Text Color
If your blocks are dark, avoid pure white. Use a softer off-white (e.g.,#E8F0FF).
If your blocks are light, avoid pure black; use dark gray (e.g.,#23212B). -
Profile Font Family
Clean fonts look best everywhere. Stylized fonts can be awesome… but keep them readable if you write long bios. -
Profile Font Size
If you have a long bio or lots of posts, bump size up one step. Your future readers will thank you. -
Profile Font Weight
Normal is safest. If your font feels thin, go a step heavier—don’t jump straight to “brick wall bold.” -
Profile Text Transform
Keep this on None unless you want a specific style. All-caps everywhere can reduce readability fast. -
Profile Spacing
This is “breathing room.” More spacing feels premium and calm. Less spacing feels compact and busy.
✨ Two easy typography recipes
✅ Recipe A: Clean + modern (works with any theme)
- Font Family: Roboto / Open Sans / Inter
- Font Size: Medium or one step up if text-heavy
- Font Weight: Normal
- Text Color: soft off-white on dark blocks
- Spacing: 15px (your screenshot default)
🧊 Recipe B: Bold headings vibe (still readable)
- Font Family: keep it clean
- Font Weight: slightly heavier (not max)
- Text Transform: keep body text on None
- Text Color: neutral (let accents live elsewhere)
- Spacing: add a little more if it feels cramped
🛠 Common problems (quick fixes)
- Feels cramped: increase Profile Spacing or bump Font Size one step.
- Hard to read on mobile: increase Font Size and keep Font Weight Normal.
- Looks “childish”: switch to a clean font family and keep Text Transform on None.
- Text looks harsh: use off-white/dark-gray instead of pure white/black.
Typography works best after Colors:
Set your Block Background Color first, then set Text Color so contrast is perfect.
Set your Block Background Color first, then set Text Color so contrast is perfect.
