Typography Guide
Typography is where readability and polish come from. This guide matches your current typography xprofile fields.
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.
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.
