...
Headings define content sections. Headings should be clear and concise.
H1
- Only one H1 per page, it is also known as the page title
- As few words as possible, 1 or 2 words ideally. (Can be more if there’s a long name, such as “Finance, Investment, and Banking Department”.)
- Should make it clear what the page is about (user might be thinking "Am I on the right page?"– H1 should confirm that immediately)
- H1 should match the browser title and navigation link (there may be exceptions, but this is a great default).
- H1s are consistent across sections of the website, so the H1 is usually pre-decided.
- For example: Each program has an Admissions page, a Careers page, and a Curriculum page. And the H1s are all Admissions, Careers, and Curriculum.
...
- If more than 6 words, use sentence case for readability
H3, H4,
...
H5, H6
- Headings go in order (H2, H3, H4) to make content readable and accessible for all users. In other words, new sections start with H2s, a heading underneath an H2 is an H3, and so on.
...
- 30 characters max
- Keep it short since it is often in all-caps
- Often used right above another heading. Example: small text above page title in the AI Hub for Business page hero
- Not available on all components
Introductory copy
- 175 160 characters max (two lines)
- A sentence or phrase that appears right below a heading (usually an H2)
- Use sparingly since users often skim over it. An H2 is usually sufficient without it.
...
- Keep the copy short. Web users are often skimming headings and jumping around the page to find content they care about. If a section looks like a lot of text (also referred to as a "wall of text"), users may skip it because another section is more visually interesting/easy to digest.
- Use short, action-oriented (start with a verb) phrases instead of sentences.
- If your sentence has lots of commas and connecting phrases, it probably needs to be re-written. Break out the phrases.
- Consider using a bulleted list.
- Special cases:
- Storytelling often involves more text and text in several forms (headings, paragraphs, quotes, etc). Use a component like the card modal: a short heading is used to grab attention, and the user can choose to engage more by opening up the modal with the lengthier copy.
- Like-content / multiple related sections: Consider a show/hide component like an accordion, dropdown, or tabbed content so the user only sees one section at a time.
Buttons/links
- Use short, action-oriented phrases
- Link text should be specific and make sense to the user out of context
- Bad: "Click here", "View more", "Register here"
- Good: "Register for the webinar", "Read more about our dean", "View more about the curriculum"
Capitalization
Headings
- H1s: Title-caseTitle case
- H2s: Title -case, unless it contains more than case for 1-6 words, then ; use sentence - case with headings longer than 6 words for better readability
- H3s-H5s: Sentence - case
CTAs
- Sentence case
Buttons/links
- Sentence -
- case
For SEO
Meta-title
- 50-60 characters
- Should mirror content in the H1/page title. (can match exactly or just contain the most important key words)
- The meta title “wins the click,” while the H1 “keeps the reader” by confirming the topic once they land on the page.
- Meta titles appear in SERPs and should be concise, keyword‑focused, and compelling.
- These also appear as the browser tab titles for users.
- Our typical pattern for these is "Page title | Program/Dept. | Wisconsin School of Business"
- We can break this pattern for a good reason (i.e. to include a keyword or help differentiate the page in browser tabs)
...