Anvil Typography guidelines
Read Anvil’s in-depth typography guidance
- Headline
- Body text or subtitle
- Axis label
- Legend label
- Hover state tooltip
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.- Direct labeling - Background/default at 80% with 4px padding all around
- Above labeling - Recommend Eyebrow/small text
- Hover-based labeling - Utilize Anvil’s popover or tooltip component
How to Use:
Dokeep text labels short in charts to improve readability and maintain a
clean, uncluttered layout.
Don'tuse rotated text. Keep all text horizontal for
better readability. If labels overlap, try adjusting the chart type or intervals
instead of rotating—this helps maintain clarity and accessibility.
Douse compact number formats for large values (e.g., write 7B instead of
7,000,000,000) to keep charts clean and easy to read. Use $, %, km to show
meaning, and add units or timeframes near the data for clarity.
Don'tdisplay long numbers in full like 7,000,000,000.
Doadjust the layout to fit the text—use horizontal labels or a stacked bar chart when it improves readability. Clear, full labels make the chart easier to understand.
Don'tforce long labels in layouts that make the text difficult to
read.
Questions? Challenges?
Contact the Visual Design team on the #ask-vizd channel