Website Style Guide

General Guidelines

Keep it simple

SAI recommends a tenth-grade reading level for the web. That means generally favoring shorter, simpler sentences and opting for clear, understandable language (go with “use” instead of “utilize,” or “help” instead of “facilitate”). There is a tool within the site builder that can tell you the reading level for your page. It’s not a perfect guideline for our site—when you’re explaining policies or health benefits details you can only simplify it so much—but it can give you an idea of the reading level of your writing.

Keep it brief

People don’t have as much tolerance for lengthy reading on the web. Use bullets, tabs, or expand/collapse, or jump to another page to break up text.

Avoid jargon

There are terms that are very familiar to HR staff but might not have meaning for everyone else, so be on the watch for those and avoid them.

Avoid passive voice

Instead of “benefits are provided to faculty and staff” say “JHU provides benefits to faculty and staff.”

Avoid being overly formal

In general, the About HR section is a little more formal and business-focused than the rest of the site because it has a more limited audience (mostly HR people and/or the management team). For the rest of the site, though, we’re looking for an approachable style that’s not too formal while still being professional. So, contractions are OK. These pages should sound like you’re sitting down in front of an HR professional who is explaining your benefits to you rather than like you’re reading a page from a policy manual.

Keep it upbeat and helpful

Our messaging on all the About HR pages and the home pages is that HR is “here for you” and that HR is on a mission to find, recruit, and retain the most talented and dedicated workforce. Always keep that messaging in mind.

Keep it consistent

Check this style guide and also the editorial guidelines created by JHU’s Office of Communications if you are unsure about the spelling of certain words, capitalization, use of bold and italics, etc. There are lots of JHU-specific rules that you wouldn’t necessarily know without reading these resources. You can find the editorial guidelines here: https://brand.jhu.edu/assets/uploads/sites/5/2016/08/JHU_Comm_style_guide_082916.pdf. You can also find information about JHU branding, name use, licensing and a helpful factobook, at the main Office of Communications page: https://universitycommunications.jhu.edu.

Specific Style Recommendations
  • Benefits & Worklife: Lowercase l in Worklife, ampersand instead of spelling out the word and.
  • Boldfaced kickers or lead-in phrases in copy: Capitalize the first letter of the first word only. For example, on an icon row, “Looking for more?” would be in bold and have the first letter of the first word capitalized.
  • Bullets: Use a period at the end of each bulleted item when it’s a complete sentence.
  • Button text: Capitalize first letter of each word.
  • Campus: Lowercase, except in the instance of Montgomery County Campus. So, it’s Homewood campus, East Baltimore campus, Mount Washington campus, East Baltimore campus (DO NOT use medical campus). Don’t use campus for Mount Vernon, Mount Washington, and Mt. Washington Conference Center.
  • Capitalization: For guidance on capitalizing job titles, departments, school names, etc., check the editorial guidelines provided by JHU’s Office of Communications (https://brand.jhu.edu/assets/uploads/sites/5/2016/08/JHU_Comm_style_guide_082916.pdf).
  • Card Rows: Capitalize the first letter of each word.
  • Commas: Use serial commas (example: apples, bananas, and oranges).
  • Expand/Collapse Component: Use the H2 headline style above the component to introduce it. Capitalize the first letter of each word in the expandable heading. The exception is when using expand/collapse for an FAQ. In that case, capitalize only the first letter of the first word.
  • External Links: Always select “open link in a new tab” when adding a link that goes to a page that is not on the HR website. This includes other JHU pages, such as the JHU Policy & Document Library. It is also true for all pdfs.
  • FAQ: Always use FAQ, not FAQs. You also can spell it out as Frequently Asked Questions.
  • JHU Policy & Document Library: Spell it out and use ampersand when using it in the main body text of a page but shorten to University Policies for Quick Links. Link directly to the University Policy & Document page (https://policies.jhu.edu) rather than to the HR website page. As with other links to non-HR website pages, it should open in a new window browser.
  • Headlines: H2 headlines have the first letter of each word capitalized. If you select H3, the page builder tool will put it into all caps for you.
  • Home page style: Use all caps for the eyebrows (example: SUCCESS STORIES). For the links in the secondary boxes, capitalize first word only.
  • Learn & Grow: Always use an ampersand and capitalize it when referring to the department. Use lowercase and spell out and when using it in a generic sense (example: we want to help you learn and grow).
  • Link with arrow: Capitalize first letter of each word (example: Learn More)
  • Login, Log in: One word when used as a noun (example: your login is your first and last name); two words when used as a verb (example: log in to your account).
  • Noncredit: One word, no hyphen
  • PDFs: Always select “open link in a new tab” when adding a pdf to a page, even if the PDF is an HR PDF.
  • Phone numbers: Use hyphens. Example: 410-555-1212. Do not include 1 before phone numbers. Example: 800-555-1212
  • School names: There are specific guidelines for these. Check the editorial guidelines provided by JHU’s Office of Communications (https://brand.jhu.edu/assets/uploads/sites/5/2016/08/JHU_Comm_style_guide_082916.pdf).
  • Tabs: Capitalize the first letter of each word
  • Times: 9 a.m., not 9:00 a.m.
  • Titles: JHU Retiree Handbook, “What Happens When … Retirement”
  • Universitywide: One word, no hyphen
  • Well-being: Two words, with a hyphen