Typography Guide
Typography is where readability and polish come from. This guide matches your current typography xprofile fields.
Helpful resources
Loading matched recommendations...
Core fields: Profile Font Family, Font Size, Font Weight, Text Transform, and Profile Spacing.
Typography Fields (Current Stack)
- Profile Font Family: base text font across profile areas.
- Profile Font Size:
Small (12px), Medium (14px), Large (16px), X-Large (18px). - Profile Font Weight:
Normal, Bold, Light. - Profile Text Transform:
None, Uppercase, Lowercase, Capitalize. - Profile Spacing:
5px, 10px, 15px, 20px, 30px(default is10px).
Typography section controls in your settings page.
Note: text color may appear in your adjacent controls/workflow, but core typography behavior is driven by the five fields above.
Typography Workflow
- Font Family: start with a clean readable font (Roboto/Open Sans/Lato are safe).
- Font Size: begin at Medium (14px), then bump to Large if text-heavy profile.
- Weight: keep Normal unless the chosen font looks too thin.
- Transform: keep None for body readability; use uppercase sparingly.
- Spacing: raise to 15px-20px if profile feels cramped.
Starter Recipes
Clean Modern
- Font Family: Roboto / Open Sans / Lato
- Size: Medium (14px) or Large (16px)
- Weight: Normal
- Transform: None
- Spacing: 10px-15px
Bold Header Feel
- Font Family: keep readable, avoid novelty body fonts
- Size: Medium or Large
- Weight: Bold (only if readability stays good)
- Transform: Capitalize or None
- Spacing: 15px-20px for calmer layout rhythm
Common Fixes
- Feels cramped: increase Profile Spacing and/or Font Size one step.
- Hard to read on mobile: keep weight at Normal, increase size to 16px.
- Looks shouty: disable all-caps transform and drop font weight.
- Looks plain: improve spacing first, then tune links/buttons in their own sections.
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
Helpful resources
Loading matched recommendations...
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
Loading account tools...
Helpful resources
Loading matched recommendations...
