Enforcing Typography and Spacing Standards for Better AI Generated Frontend Aesthetics
This skill teaches you to write and apply portable SKILL.md instruction files that govern font sizing, line height, letter spacing, whitespace, and visual density so AI coding agents stop producing generic-looking layouts and start generating typographically intentional interfaces.
Write explicit SKILL.md rules that specify your type scale ratios, line height per font size, letter spacing values, minimum whitespace between sections, and maximum content density per viewport. Feed these rules to your AI coding agent so every generated component respects your typographic standards instead of falling back to framework defaults that produce generic, visually flat layouts.
Outcome: You produce a portable SKILL.md file containing precise typography and spacing rules that, when loaded into any supported AI coding agent, causes the agent to generate UI with intentional type hierarchies, consistent vertical rhythm, controlled density, and professional-grade whitespace instead of default framework slop.
Prerequisites
- Basic understanding of CSS typography properties (font-size, line-height, letter-spacing, margin, padding)
- Familiarity with at least one AI coding agent (Cursor, Claude Code, Codex, v0, or similar)
- A working project with a frontend framework (React, Vue, Svelte, or plain HTML/CSS)
- Completion or understanding of the Installing SKILL.md Files in AI Coding Agents skill
Overview
AI coding agents are remarkably good at producing functional interfaces. They wire up state, handle routing, and scaffold components in seconds. But the typography they produce is almost always generic. You get Tailwind's default text sizes applied without hierarchy. Line heights land at browser defaults. Letter spacing is never touched. Spacing between sections follows whatever the framework's utility classes suggest rather than any intentional rhythm. The result is layouts that look like every other AI-generated project: technically correct but visually indistinct, flat, and forgettable. This is the core problem that ai generated frontend aesthetics improvements need to address, and typography is the highest-leverage place to start because type decisions cascade across every component, page, and screen in the application.
This skill sits within the Taste Skill Frontend Design Framework as one of its most foundational layers. While sibling skills like configuring layout and visual density constraints handle macro-level spatial decisions and adding motion and interaction taste rules handles temporal polish, typography and spacing standards are what users perceive first. Before any animation plays or any grid snaps into place, a visitor reads text. If your heading sizes don't create clear hierarchy, if your body text line height makes paragraphs feel cramped or airy, if your section spacing is inconsistent, no amount of motion design will rescue the perception of quality. Typography rules are the load-bearing wall of frontend aesthetics.
The concrete artifact you produce is a section within a SKILL.md file (or a standalone typography SKILL.md) containing structured rules that an AI coding agent can parse and follow. These rules specify your type scale and ratios, line height values per font size range, letter spacing adjustments for uppercase and small text, minimum and maximum spacing between content sections, and density constraints that prevent the agent from cramming too much content into a viewport. Once applied, every component the agent generates, from a simple card to a complex dashboard, will inherit these standards automatically. The output is not a design token file or a CSS stylesheet. It is a set of natural-language instructions with enough precision that an LLM can translate them into correct code in any framework, which is what makes SKILL.md files portable across tools and stacks.
Success looks like this: you prompt your AI agent to build a pricing page, a settings panel, or a blog layout, and the generated code uses your exact type scale, applies the correct line height for each text size, adds letter spacing to uppercase labels, and spaces sections with your defined rhythm. You stop manually fixing font sizes and padding after every generation. The agent's first output looks like it came from a designer who understood your system, not from a template library.
How It Works
The core mental model is constraint propagation. An AI coding agent, left unconstrained, draws from the statistical average of all the code it trained on. That average is overwhelmingly Tailwind defaults, Material UI defaults, and Bootstrap defaults. The agent is not choosing bad typography. It is choosing the most probable typography, which happens to be the least distinctive. When you provide explicit rules in a SKILL.md file, you shift the agent's probability distribution. Instead of reaching for text-lg because that is the most common class for a subheading in its training data, the agent reaches for whatever your rules specify, because the instruction context overrides the prior.
This works because modern AI agents treat SKILL.md files as high-priority system instructions. The rules you write function like constraints in a constraint satisfaction problem. The agent must produce code that satisfies the functional prompt (build a pricing page) AND satisfies your typographic constraints (headings use a 1.25 ratio scale, line height is 1.3 for text above 24px). When constraints are well-specified, the agent's output space narrows dramatically, and the remaining valid outputs all look intentional rather than generic. When constraints are vague ("use good typography"), the agent falls back to statistical defaults because it cannot differentiate "good" from "average" without specifics.
The rules themselves encode a small number of interconnected typographic decisions. A type scale defines the mathematical relationship between font sizes. A line height map pairs each font size range to an appropriate leading value. Letter spacing rules handle the optical corrections that AI agents almost never apply on their own, like adding tracking to uppercase text or tightening large display headings. Vertical spacing rules define the whitespace rhythm between sections, between headings and body text, and between components. Density constraints set boundaries on how much content can appear in a viewport before the layout degrades. Together, these five categories of rules cover roughly 90% of the typographic decisions an AI agent makes when generating frontend code.
The reason these rules are written in natural language rather than as CSS variables or design tokens is portability. A SKILL.md file written in Markdown with clear, declarative instructions works in Cursor, Claude Code, Codex, Gemini CLI, v0, and any future agent that reads context files. CSS variables only work if the agent uses that exact CSS architecture. Tailwind config only works if the project uses Tailwind. Natural-language rules with specific values ("Body text at 16px uses a line height of 1.6") can be translated by any agent into any framework's syntax, which is the core insight of the Taste Skill Frontend Design Framework. You are not configuring a build tool. You are teaching an agent a design sensibility.
One subtlety that trips people up: these rules are not just aesthetic preferences. They encode optical corrections that human designers learn through experience. For example, geometric sans-serif fonts need slightly more line height than humanist sans-serifs at the same pixel size, because their uniform stroke widths create denser texture. Large display text (above 36px) needs tighter letter spacing because the default tracking, designed for body sizes, creates visible gaps at display scale. These are the kinds of corrections that separate polished ai generated frontend aesthetics from default output, and they are precisely the kinds of corrections AI agents will never apply unless explicitly instructed.
Step-by-Step
Step 1: Audit your current AI-generated typography baseline
Before writing any rules, you need to see what your AI agent produces without guidance. Open your project, prompt your agent to generate three different types of pages: a marketing landing page, a settings or form page, and a content-heavy page like a blog post or documentation. Do not provide any typographic instructions. Just describe the functionality you want.
Once the three pages are generated, screenshot each one and note the font sizes used for headings, subheadings, body text, captions, and labels. Record the line heights, either by inspecting the computed styles in browser dev tools or reading the generated code. Note any letter spacing values (there likely are none). Measure the spacing between major sections, between headings and their following content, and between list items.
This audit gives you a concrete baseline to improve against and helps you identify which typographic issues are most severe in your specific agent and framework combination.
Tip: Use your browser's computed styles panel rather than reading the source code directly. Agents often apply spacing through utility classes that compose in non-obvious ways, and the computed value is what the user actually sees.
Step 2: Define your type scale with a specific ratio
Choose a modular scale ratio and a base font size. 333 (perfect fourth, dramatic hierarchy for editorial or portfolio sites). Start with your base body text size, typically 16px or 18px for web. Multiply by the ratio to get each step up, and divide to get each step down.
25 ratio, your scale would be approximately: 10px (caption/small), 13px (small body/label), 16px (body), 20px (large body/subheading), 25px (heading 3), 31px (heading 2), 39px (heading 1), 49px (display). md as a named scale with semantic labels. Include the ratio so the agent can interpolate if it needs a size between defined steps.
Tip: Pick the ratio based on content density. Data-heavy dashboards need a tighter ratio (1.125 or 1.2) so the hierarchy fits in smaller viewports. Marketing pages can use 1.25 or 1.333 because they have fewer text elements and more breathing room.
Step 3: Map line heights to each font size range
Line height (leading) is the single most impactful spacing property in typography, and AI agents almost always get it wrong by applying a single value universally. The correct approach is to define different line heights for different font size ranges. 6 line height for comfortable reading. 45.
-
0, because large text at loose leading looks disconnected. md. 55.
-
Tip: Test your line height values with multi-line text at each size. Single-line headings hide bad leading. Paste a two-line or three-line heading into your design and check that the lines feel connected as a unit rather than floating apart or crashing together.
-
Step 4: Specify letter spacing rules for special cases
Letter spacing (tracking) is the property AI agents are least likely to set on their own, which is why it is one of the most visible signals of AI-generated versus human-designed UI. Define rules for at least four cases. 08em of tracking so the letters do not feel cramped. 03em to compensate for the optical gaps that appear at large sizes.
02em to improve legibility. Fourth, body text at standard sizes: set letter spacing to 'normal' or 0, because body text in most well-designed fonts already has correct metrics. md. Include the 'why' briefly so the agent understands the optical principle and can generalize.
Tip: If your project uses a geometric sans-serif like Inter, Geist, or SF Pro, lean toward the higher end of the uppercase tracking range (0.05-0.08em). If you use a humanist sans-serif like Source Sans or Lato, use the lower end (0.03-0.05em), because the letter width variation in humanist faces already provides some visual rhythm.
Step 5: Define vertical spacing rhythm between content blocks
Vertical spacing is where ai generated frontend aesthetics most visibly break down. AI agents either use the same padding everywhere (creating monotony) or use inconsistent values (creating visual chaos). Define a spacing scale based on a base unit. An 8px base unit is the most common and works well with most type sizes: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px.
Then assign specific spacing values to specific relationships. The gap between a heading and its following body text should be smaller than the gap above the heading, because the heading belongs to the content below it, not the content above. A good default: 8px between heading and body, 32px above a new section heading. The gap between major page sections (hero to features, features to pricing) should be 64-128px depending on visual density goals.
Write these as relationship rules: 'Space between a section heading and the first paragraph below it: 8px. Space above a section heading from the previous section's last element: 48px. ' This heading proximity principle is the single highest-leverage spacing rule you can give an AI agent.
Tip: The heading proximity rule (heading is closer to the content it introduces than to the content above it) is violated by AI agents in roughly 70% of generated layouts. Making this rule explicit and repeating it in your SKILL.md is one of the fastest ways to improve perceived quality.
Step 6: Set density constraints per viewport
Visual density describes how much content occupies a given area. Without explicit constraints, AI agents tend to fill available space, producing layouts that feel cluttered on desktop and cramped on mobile. md as maximum and minimum constraints. For example: 'On desktop viewports (1024px+), no more than 3 distinct content blocks should be visible without scrolling in a standard page section.
Body text line length must not exceed 72 characters (roughly 680px at 16px). Cards in a grid use a minimum of 24px gap. ' These constraints prevent the agent from producing technically valid but visually overwhelming layouts. Also specify minimum whitespace around primary CTAs (at least 32px on all sides) because AI agents frequently pack buttons too close to surrounding content, which reduces both visual impact and click-through rates.
Tip: Line length is the density constraint people most often forget. Unrestricted line length is the most common readability failure in AI-generated layouts. If you specify nothing else, specify a max-width on body text containers. 65-75 characters per line is the optimal range for sustained reading.
Step 7: Write the SKILL.md file with all rules in declarative format
md. Use declarative, specific language. Each rule should state exactly what to do, under what conditions, with specific values. ' After each rule, add a one-sentence rationale so the agent understands the intent and can make reasonable decisions for edge cases you have not explicitly covered.
End the file with a '## Validation Checklist' section that lists the observable properties the agent should verify after generating any component: heading sizes follow the scale, line heights match the map, uppercase text has tracking, heading proximity is correct, line length is constrained. This checklist acts as a self-review prompt for the agent.
Tip: Keep the total file under 400 lines. AI agents have context limits, and a SKILL.md file that is too long risks having its later rules truncated or deprioritized. If you need more detail, split into two files: one for typography, one for spacing, and reference them both in your agent's configuration.
Step 8: Test the rules by regenerating your baseline pages
Return to the three pages you generated in Step 1 (marketing, form/settings, content-heavy). md now loaded into your agent, prompt the agent to regenerate each page using the same functional descriptions you used before. Compare the output against your baseline screenshots. Check each rule category: are heading sizes following your scale?
Are line heights differentiated by size? Is letter spacing applied to uppercase labels? Is the heading closer to its body text than to the preceding section? Is line length constrained?
Is section spacing consistent and rhythmic? For each violation, determine whether the rule was ambiguous (rewrite it with more precision) or whether the agent ignored a clear rule (move the rule higher in the file, because agents weight earlier instructions more heavily). Iterate until all three pages pass your validation checklist on first generation.
Tip: When an agent violates a rule you know it received, try rephrasing the rule as a negative constraint ('NEVER set line-height below 1.4 for text between 14-18px') in addition to the positive instruction. Some agents respond more reliably to prohibitions than to prescriptions.
Step 9: Extend rules for responsive breakpoints and dark mode
Typography rules that work at desktop sizes need adjustment for smaller viewports. md. Specify how your type scale shifts at each breakpoint. A common pattern: reduce display and H1 sizes by one scale step at tablet (below 1024px) and two steps at mobile (below 640px), while keeping body text at the same size or increasing it by 1px for thumb-distance reading.
Line heights can tighten slightly on mobile because the shorter line lengths reduce the eye's return sweep distance. Section spacing typically reduces by 25-40% on mobile. For dark mode, add rules about adjusting font weight: dark backgrounds make text appear optically heavier, so body text that uses font-weight 400 in light mode should use 350 or 300 in dark mode if the font supports variable weights. If not, specify that dark mode body text should use a slightly lighter shade than pure white (rgb(230,230,230) or similar) to reduce perceived weight.
These adjustments are the details that separate polished ai generated frontend aesthetics from merely functional output.
Tip: Do not simply scale all sizes down proportionally for mobile. Body text should stay 16px or larger on mobile for accessibility and readability. Only headings and display text should scale down, and usually by a smaller factor than you expect. Test on an actual phone, not just a resized browser window.
Examples
Example: SaaS Marketing Site for a Small Team
A three-person startup uses Cursor with Claude to generate their marketing site. The site has a hero section, features grid, pricing table, testimonials, and footer. The team uses Tailwind CSS and has no existing design system. They want the site to look polished enough that visitors do not immediately recognize it as AI-generated. Timeline is one afternoon.
The team starts by prompting Cursor to generate a landing page without any typography rules. The output uses Tailwind defaults: text-4xl for the hero heading, text-lg for body, and uniform py-12 on every section. Everything looks technically fine but visually indistinct. 25 ratio scale based on 16px body text, producing sizes at 13px, 16px, 20px, 25px, 31px, 39px, and 49px.
1 for 39-49px display. 02em for display headings. Vertical spacing rules specify 96px between major sections, 12px between headings and body, 48px above section headings. Density constraint: body text max-width of 660px.
md in Cursor and regenerate the same page. The hero heading is now 49px with tight leading and negative tracking. 25 line height. Body text is contained in a readable measure.
The pricing table has consistent 8px-based padding. The result passes their validation checklist on the second attempt after tightening one ambiguous rule about card internal padding.
Example: Enterprise Dashboard with Dense Data
A B2B SaaS team building an analytics dashboard in React uses Claude Code. The dashboard has data tables, chart legends, filter panels, metric cards, and a sidebar navigation. Content density is high and the audience expects information-dense screens. The team uses a custom design system with Radix UI primitives.
5 line height regardless of function, table headers and body text are the same size, metric card numbers use the same weight as labels, and spacing between dashboard sections is uniformly 16px. 125 ratio scale based on 14px: 11px (captions), 12px (small labels), 14px (body/table cells), 16px (subheadings/metric labels), 18px (section headings), 20px (page titles). 2 for 20px+. 4 line height, and row padding is 10px vertical.
05em tracking. Vertical spacing between dashboard sections is 32px, between filter bar and content is 24px, and sidebar nav items have 6px vertical padding. The density constraint specifies minimum 12px gap between cards and maximum 4 metric cards per row on desktop. After loading these rules, Claude Code generates a dashboard where the information hierarchy is immediately legible: large metric numbers draw the eye first, section headings orient navigation, table headers are clearly distinguished from data, and the overall density feels professional rather than cluttered.
Example: Content-Heavy Blog for a B2C Brand
A direct-to-consumer brand uses v0 to generate blog post templates. Posts are 1500-3000 words with embedded images, pull quotes, bulleted lists, and related article cards at the bottom. The brand uses a serif font for body text and a sans-serif for headings. The audience reads on mobile 65% of the time.
5 line height globally, and 24px margins between all elements. Blog posts look like documentation rather than editorial content. 25 ratio for sans-serif headings: 20px (H4), 25px (H3), 31px (H2), 39px (H1/title). 45 at 22px lead.
2 for all sizes. 04em on uppercase sans-serif labels. 4 line height and 48px left margin. Vertical spacing: 96px between article sections, 16px between heading and first paragraph, 56px above H2 headings, 32px above H3 headings.
The responsive section specifies: mobile body stays at 18px (readability on small screens), H1 drops to 28px, section spacing reduces to 64px, pull quote left margin reduces to 24px. The density constraint limits body text width to 640px (approximately 65 characters in their serif font). After applying these rules, v0 generates blog post layouts that feel like a well-designed editorial publication: clear hierarchy, comfortable reading rhythm, proper serif typesetting, and content that breathes without feeling sparse.
Example: Design System Migration for a Large Team
A 20-person engineering team is migrating from a legacy design system to a new one. They use Codex to help generate component variants. The new design system has defined tokens for typography, but the AI agent keeps falling back to the old system's values or Tailwind defaults when generating new components. The team needs SKILL.md rules that enforce the new system's decisions across all agent-generated code.
2 ratio type scale with named tokens: text-xs (12px), text-sm (14px), text-base (16px), text-md (19px), text-lg (23px), text-xl (28px), text-2xl (33px), text-3xl (40px). Each token has a paired line-height token. md file they write does not specify raw pixel values. Instead, it maps semantic roles to token names: 'Body text always uses $text-base with $leading-base.
Section headings use $text-xl with $leading-tight. ' They add a critical rule: 'NEVER use raw pixel values, rem values, or Tailwind utility classes for font-size, line-height, or letter-spacing. ALWAYS use the design system tokens listed above. ' They map spacing tokens similarly: $space-xs (4px), $space-sm (8px), $space-md (16px), $space-lg (24px), $space-xl (32px), $space-2xl (48px), $space-3xl (64px).
Vertical rhythm rules use token names: 'Space between heading and body: $space-sm. ' The density constraints reference component-specific tokens. md across the team's Codex configurations, generated components consistently use the new design system tokens. The team reduces manual token-replacement fixes from an average of 12 per component to 1-2 per component, cutting component review time by roughly 60%.
Best Practices
Use specific numeric values in every rule, not relative terms. Write 'line-height: 1.55 for body text at 16px' instead of 'use generous line height for body text.' AI agents interpret 'generous' as whatever their training data average is, which is usually 1.5 or the framework default. Specific numbers eliminate guesswork and produce consistent results across regeneration attempts and different agents.
Test your rules with the ugliest prompt first. Ask the agent to build a page with a long form, a data table, a testimonial carousel, and a footer, all on one page. If your typography rules hold up under that density and variety, they will hold up everywhere. Testing only with clean hero sections gives false confidence because those layouts have so little text that almost any type treatment looks acceptable.
Include the optical reasoning behind each rule, not just the value. When you write 'Display text above 36px uses letter-spacing: -0.02em because large type creates visible gaps between letters that need tightening,' the agent can generalize this principle to 48px, 64px, and other sizes you did not explicitly list. Without the reasoning, the agent applies the rule as a brittle lookup table and uses default tracking for any size not in your list.
Version your SKILL.md file and track which rules produce the most improvement. After your first round of testing, rank rules by impact: which ones caused the most visible improvement in generated output? Move high-impact rules to the top of the file. AI agents weight earlier context more heavily, so the order of your rules affects how reliably they are followed when the context window gets tight.
Separate your MUST rules from your SHOULD rules with explicit priority labels. Write 'MUST: Body text line length never exceeds 75 characters' and 'SHOULD: Prefer 64-character line length when layout allows.' This gives the agent a hierarchy for resolving conflicts. Without priority labels, the agent may drop important constraints when trying to satisfy all rules simultaneously in a complex layout.
Review generated code for hardcoded values that should use your scale. AI agents sometimes follow your rules by hardcoding the exact pixel values you specified rather than using your design system's tokens or variables. Add a rule: 'When a design token or CSS variable exists for a value in these rules, always use the token. Only hardcode values if no token exists.' This ensures your typography rules integrate with your existing system rather than creating a parallel, unmaintainable layer.
Re-audit quarterly and after any major model update. AI agent models change their behavior with updates, and a SKILL.md file that worked perfectly with one model version may need adjustments for the next. After any major update to your AI coding agent, regenerate your three baseline pages and verify compliance. This takes 15 minutes and prevents silent quality regression.
Common Mistakes
Writing rules that are too vague for an AI agent to act on
Correction
Rules like 'use good typography' or 'make the spacing feel balanced' are meaningless to an LLM because they do not constrain the output space. The agent will interpret these as permission to use whatever defaults it was going to use anyway. You can spot this by regenerating the same page with and without the rule. If the output is identical, your rule is too vague.
' Measurable rules produce measurable change.
Applying a single line-height value to all text sizes
Correction
This is the most common typographic error in AI-generated code and in many SKILL.md files that try to fix it. A rule like 'all text uses line-height: 1.5' makes body text acceptable but makes headings look detached and airy, with visible gaps between lines that break the visual cohesion of the heading as a unit. You can spot this by looking at any multi-line heading: if the lines feel like separate elements rather than a single block of text, your line height is too loose for that size. Define separate line heights for at least three size ranges: body (1.5-1.6), subheading (1.3-1.4), and heading/display (1.05-1.25).
Ignoring the heading proximity principle in spacing rules
Correction
, '32px between all elements') without distinguishing the relationship between a heading and its content versus a heading and the preceding section. The result is headings that float equidistant between two sections, making it unclear which content they belong to. Users unconsciously parse this as disorganized. Watch for headings where the space above and below is identical.
The fix is to always make the space above a heading at least 2x the space below it. 'margin-top: 48px, margin-bottom: 12px' on section headings is a reliable starting point.
Not accounting for the difference between em-based and px-based spacing in agent output
Correction
When you write rules in em units, the AI agent must know which element's font-size those ems are relative to. Agents frequently misapply em-based spacing by calculating against the wrong parent element, resulting in spacing that is too large or too small depending on the nesting context. You can spot this by inspecting computed styles and finding spacing values that do not match what your rules specify. Unless your design system specifically requires em-based spacing, write spacing rules in px or rem with a defined root size.
Px values are unambiguous. md.
Overloading the SKILL.md with edge cases before nailing the basics
Correction
Some practitioners write 50+ rules covering every possible scenario before testing whether the core five categories (type scale, line height, letter spacing, vertical spacing, density) produce good results. The long file pushes core rules out of the agent's attention window, and the edge-case rules often conflict with each other in ways that produce unpredictable output. Start with 15-20 rules covering the five core categories. Test and verify.
Only then add edge-case rules for specific components or contexts. If your file exceeds 300 lines before your core rules are validated, you have overloaded it.
Defining typography rules without testing on real content
Correction
md file sometimes fail with real content. A type scale that works beautifully with short English headings may break with German compound words that are three times longer. Line height that feels perfect with two-line paragraphs may feel too tight in a five-line paragraph. You can catch this by testing with worst-case content: long headings, dense paragraphs, short labels, and mixed-language text.
If you only test with placeholder text like 'Welcome to Our Platform,' your rules will only be verified for that specific content shape.
Other Skills in This Method
Adding Motion and Interaction Taste Rules
How to specify animation timing, easing curves, hover states, and transition guidelines in SKILL.md files so AI-generated interfaces feel polished and intentional.
Writing Anti-Slop Design Review Rules
How to author SKILL.md checklist rules that catch common AI-generated UI anti-patterns such as oversized padding, default border-radius, and bland color choices before code ships.
Configuring Layout and Visual Density Constraints for AI Agents
Teaches how to define grid, container, and density rules inside skill files so AI agents produce tighter, more intentional page compositions instead of loosely spaced defaults.
Auditing AI-Generated Frontends for Design Quality
A structured review workflow for evaluating AI-produced React and Next.js interfaces against Taste Skill criteria covering hierarchy, contrast, alignment, and component consistency.
Installing SKILL.md Files in AI Coding Agents
How to set up and configure Taste Skill instruction files in tools like Cursor, Claude Code, Codex, Gemini CLI, and v0 so your agent follows design-quality rules.
Authoring Portable SKILL.md Files for Design Systems
Teaches how to create reusable, framework-agnostic SKILL.md instruction files that encode your team's design-system tokens, component conventions, and aesthetic judgment for any AI agent.
Frequently Asked Questions
How do I choose between a 1.2, 1.25, and 1.333 type scale ratio for my SKILL.md?
Match the ratio to your content density and purpose. 2 for data-dense interfaces like dashboards and admin panels where you need many distinct sizes within a small range. 25 for general-purpose applications and marketing sites where you want clear hierarchy without dramatic size jumps. 333 for editorial, portfolio, or storytelling sites where dramatic size contrast between headings and body creates visual impact. 2. It is the most versatile ratio and works well for most projects. You can always adjust after testing.
Should I enforce typography rules before or after configuring layout and visual density constraints?
Typography first, then layout. Type decisions cascade into layout because font sizes, line heights, and spacing values determine how much content fits in a given area. , 'maximum 3 columns'), the AI agent may choose type sizes that technically fit but feel cramped or lost in the available space. When typography rules are established first, your layout constraints can reference the typographic rhythm. For example, column gutters should be a multiple of your spacing base unit, and section heights should accommodate your heading-to-body spacing rules. Refer to the [configuring layout and visual density constraints](/skills/configuring-layout-and-visual-density-constraints) skill after completing this one.
How long should it take to write a complete typography and spacing SKILL.md section?
Plan for 45-90 minutes for the first version, including the baseline audit, rule writing, and initial testing. The audit takes 15-20 minutes if you generate three pages and inspect them systematically. Writing the rules takes 20-30 minutes once you have decided on your scale, line heights, and spacing values. Testing and iterating takes another 15-30 minutes. Subsequent revisions, after model updates or project changes, take 15-20 minutes because you are tweaking existing rules rather than writing from scratch.
Why does my AI agent keep ignoring my line-height rules for headings?
This usually happens for one of three reasons. First, your rule may be ambiguous about which elements it applies to. ' Second, a framework-level style may be overriding your rule. Tailwind's prose plugin and CSS resets apply their own line heights, and the agent may be generating code that applies your value AND the framework value, with the framework winning the cascade. md file. Move critical line-height rules to the top of the file, within the first 50 lines.
Can I use the same typography SKILL.md across multiple projects with different fonts?
Yes, with one important caveat: different typefaces have different optical properties that affect ideal line height and letter spacing. md written for Inter (a geometric sans-serif with tall x-height) will specify slightly different values than one optimized for Georgia (a serif with moderate x-height). The type scale ratios and vertical spacing rules are portable across fonts. The line heights and letter spacing values may need adjustment. A practical approach is to write your portable rules for scale, spacing, and density, then add a 'Font-Specific Adjustments' section at the bottom that you swap per project. Keep 80% of the file stable and customize the 20% that is font-dependent.
How do I handle typography rules for components that mix multiple text sizes, like a card with a title, description, and metadata?
Define component-level typography patterns in addition to your global rules. A card pattern might specify: 'Card title uses text-lg (23px) with line-height 1.25 and font-weight 600. Card description uses text-base (16px) with line-height 1.55 and a maximum of 3 lines with text truncation. Card metadata (date, author, category) uses text-sm (14px) with line-height 1.4 and a muted color.' Include the internal spacing: '8px between title and description, 12px between description and metadata, 16px padding on all sides of the card.' These component patterns teach the agent the relationship between text elements within a container, which is harder for agents to derive from global rules alone.
What is the most impactful single rule I can add to immediately improve ai generated frontend aesthetics?
Constrain body text line length to a maximum of 70 characters (approximately 640-680px at 16px). This single rule eliminates the most common readability failure in AI-generated layouts: text that stretches edge-to-edge across wide viewports. Every AI coding agent, when unconstrained, will allow body text to fill the available container width, which on a 1440px monitor produces lines of 120+ characters that are physically painful to read. Adding 'max-width: 680px on body text containers' in your SKILL.md takes 10 seconds to write and immediately makes every generated page more readable and more visually polished.