General text guidelines
Headline capitalization
Use sentence case for headlines.
- Good example: Headline capitalization
- Bad example: Headline Capitalization
One exception is in the page header. Use title case for page headers.
- Good example: Component Guidelines and Examples
Headline paragraph format
- Nest headline paragraph format (h2, h3, h4)
- You can use the same paragraph format more than once for headlines of the same importance
- When a headline/copy content nests inside of the previous headline, use the next highest h#
- Do not skip headline #s going up, but you can skip coming back down.
- Example:
- h2: all pages already start with an h2 (the h1 is in built into the code, so you never have to worry about h1s)
- h2: if the next headline is equally important, also use h2
- h3: if the next one is a sub-topic, use and h3
- h4: We don't typically use h4s
- h3: if the next one is a sub-topic, use and h3
- h2: you can jump back up to an h2 for your next item, if it's equal to the last h2 in importance
- h2: and so on...
Headline style
- Regularly use the serif headline style
- Occasionally use the the serif underline headline style (mainly for visual appeal or differentiation)
- Rarely use the default headline style (only for interior pages with multiple nests of headlines already)
Buttons
Writing button text
- Use a verb whenever possible to suggest the user take an action
- Define what the user will learn, and/or where they will go when clicking the button
- Create a sense of urgency for key CTAs (like "apply now" or "sign up today") where appropriate and where there's room. NOTE: it's OK to leave off "now" or "today" when there's multiple buttons like our degree CTAs, to avoid redundancy. UX always comes first.
- Use "Learn more" sparingly, and only if it's clear in the context of the page what the user is going to be learning more of, and can deduce the value of clicking the button to learn more
- Do not use phrases like "click here" or "next" or "more"
- If the button is leading to a download or resource, it's OK to use the name of the download on the button (see example) and not use a verb. It's also good practice for accessibility to indicate the file type.
- When in doubt, ask!
Choosing a button color style
- Degree pages: main CTA on degree pages are gold, so generally, button styles should be black, white, or outline
- Non-degree pages: any color button can be used throughout the site based on these guidelines
To determine the color:
- Consider the makeup of the page (are there lots of the same colors, too much variety in color, existing buttons from the template, etc.)
- Consider the importance of the action. If the action is something driving toward a main CTA, consider using bolder colors (black or gold). If it's taking you offsite or to something of less importance than the main CTA, consider using a more subtle style (outline or white, depending the background).