> ## Documentation Index > Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt > Use this file to discover all available pages before exploring further. # Typography > Clear and consistent typography plays a key role in making data easy to scan, compare, and understand. This section outlines the font styles, sizes, and spacing rules used across different layouts, ensuring visual hierarchy, legibility, and alignment with the overall design system. All text should use be Anvil Typography tokens and reflect the hierarchy of the overall page. export const DoDont = ({text, type, children}) => { return <> {type === "do" &&
{children &&
{children}
}

Do {text && {text}}

} {type === "dont" &&
{children &&
{children}
}

Don't {text && {text}}

} {type === "caution" &&
{children &&
{children}
}

Caution {text && {text}}

} ; }; Read Anvil's in-depth typography guidance ## 1. Headline Guidelines **Keep it concise:** Titles should summarize the main insight or takeaway from the visualization. General text recommendation: * Headline - Medium or Small depending on page hierarchy * Foreground/default ## 2. Subtitle Subtitles should be visually secondary to the headline. General text recommendation: * Body text - default * Foreground/subdued ### 3. Axis Label Text Axis label is the descriptive text next to a chart’s x- or y-axis that explains what the axis represents, such as units, categories, or metrics. It helps users interpret the data accurately and should be clear, concise, and consistently styled. General text recommendation: * Eyebrow text - small or medium depending on page hierarchy * Foreground/subdued ### 4. Legend Label Text Legend label is the text used within a chart’s legend to identify what each color, shape, or line represents. It maps visual elements to data categories, helping users quickly understand and differentiate between series or groups in the visualization. General text recommendation: * Eyebrow text - small * Foreground/subdued ### 5. Direct Labeling There are three primary approaches for applying direct labeling in charts, each offering varying levels of visibility and user interaction depending on the complexity of the data. 1. Direct labeling - Background/default at 80% with 4px padding all around 2. Above labeling - Recommend Eyebrow/small text 3. Hover-based labeling - Utilize Anvil’s popover or tooltip component A bar chart with direct labeling (#1) A bar chart with above labeling (#2) ### How to Use: bar chart with short labels bar chart with long labels that are rotated bar chart with abbreviated number values, e.g., '6B' for '6 billion' bar chart with large number values spelled out in full bar chart with long labels, turned on its side bar chart with long labels that are rotated Contact the Visual Design team on the #ask-vizd channel