...
- 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-case
- H2s: Title-case, unless it contains more than 6 words, then use sentence-case 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)
...