Nuxt UI: How to Link Typography & Spacing Scales?
Using Nuxt UI Figma kit + building design system.
Problem: Typography and spacing scales aren't linked, so spacing looks off when font sizes change.
Example:
- Button with text-base (12px) + px-4 padding = looks good ✓
- Button with text-lg (14px) + px-4 padding = too much space ✗
Nuxt UI has:
- Typography variables:
text-xs through text-9xl
- Spacing scale: Independent from typography
Question: How do I use specific Typography styles in that case? The components look off when I do so.
thanks for your time.2 Replies
Hi @Sagar Kapoor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There’s nothing in the provided sources that documents Nuxt UI’s internal spacing/typography relationship or a built‑in way to “link” those scales.
From the sources, we only have:
- General Tailwind font setup and overriding the default
fontFamily in a Nuxt 3 + Tailwind project, by defining fonts in a global CSS file and then extending Tailwind’s theme.[change font-family]
- A DevTools UI Kit that uses UnoCSS and a custom n attribute for sizing (e.g. sm, md, lg, xl), but this is for DevTools integration, not Nuxt UI components.[UI Kit]
Neither of these mentions:
- Nuxt UI’s design tokens / internal mapping between text-* sizes and padding.
- Any recommended design‑system technique in Nuxt UI specifically to keep spacing visually consistent when font size changes.
Given that, I can’t reliably tell you “use X variable” or “enable Y option in Nuxt UI” to auto‑link typography and spacing; the knowledge sources simply do not cover this.
What you can do in general Tailwind/Nuxt terms (not Nuxt‑UI‑specific) is:
- Define your own size presets (e.g. a .btn-lg or a component prop) that pair a text-* class with corresponding px-* / py-*.
- Or, if Nuxt UI exposes size props similar to the DevTools UI Kit (sm, md, lg, xl), standardize those to use a fixed combination of type + padding in your theme config – but this behavior is not documented in the sources, so it’s only a general pattern, not confirmed Nuxt UI behavior.
Because the documentation for Nuxt UI’s design tokens and sizing behavior is not present in the given material, I can’t provide a Nuxt‑UI‑specific, API‑level solution.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@565461230060306432> Kapa.ai is still learning and improving, please let me know how I did by reacting below.