H1
Use this for page titles only (vital for SEO), preferably with basic descriptive info, around 5-6 words
H2
This can optionally be used for calling out a big-though-brief idea at the top of a page (under the header image) or occasionally lower in the page.
It utilizes our secondary house font, Poynter OS Display.
H3
Use this for section headers to break-up page content. Keep these short-and-sweet, and capitalize all non-preposition/conjuntions. Do not end with punctuation unless necessary to convey a point. Turn this to house teal (#00BAB3) or green (#6CC24A) if on a dark background.
H4
Use this for creating sub-sections within major sections of a page. Apply it sparingly — though if it’s paired with icons, ensure they are the same color.
H5
This is for creating pull-quotes. Be sure to use the “quote block” function within the text editor!
Quoted Person (paragraph font)
Title/Company
H6
This is the default font for creating captions under images or other similar text. Keep these short and sweet, if possible, but always write them in complete sentences.
P (Paragraph)
This is the default style for all body text on pages, blog posts, and more.
This text is written in H6, which we’ve been using for captions. FYI, the Spacer/Gap between the image and this textbox is 10 for desktop and 5 for all tablet/mobile.
Primary Section Titles — Like This One — are Generally Quite Brief and Utilize H3 Formatting
The “Spacer/Gap” space between the subhead and this is 30 desktop and 15 for tablets/mobile. A great rule of thumb when using the SUPER HELPFUL “Spacer/Gap” widget is to pick a size for “Desktop” that looks good on your computer, then begin your mobile testing by setting the others to half that size, then adjusting up or down from there.
How To Use Buttons
Always check the buttons you create on mobile to ensure they look as good on cell phones as they do on your computer screen. Often, the button gets pushed off the edge on mobile, so short titles are key.
- Use the Advanced Button widget.
- Button titles are in ALL CAPS.
- Size: “Normal,” though “Small” is an OK second option if space is limited or the title is long.
- “Typography” tab in the widget to make the button text bold.
- Button title, both before and during hover, is white (#ffffff).
- Using the alpha channel (transparency) in WordPress doesn’t help on white backgrounds, so we’ve manually identified the 70% opacity equivalent of each starting color for its hover counterpart.
This is our primary button color; always try to start here. Use for download/”take it with you”/learn more/read more/view all/subscribe
Standard: #003d4c | Hover: #4c7780
Green is best when a contrast is needed for a dark/navy background or when a pop of color is needed
Standard: #6cc24a | Hover: #99d480
Use teal specifically for Contact/Reach Out functions
Standard: #00bab3 | Hover: #4ccfca
Purple buttons are not currently in use, but the information is here for later discussion
Standard: #a8317c | Hover: #c26ea2
Dual Button for use exclusively floating on top of page header graphics.
Choose Style 1. Font size is 12, line size is 10, and button width is 200. Center alignment.
- Button 1 (teal): Standard: #00bab3 | Hover: #4ccfca
- Button 2 (green): Standard: #6cc24a | Hover: #99d480
- Divider: Set to “Text” but leave field empty (will auto-fill with “or” on front end of site). Text: white | Background: #003d4c
- Typography: bold / white / white for both buttons (scroll down)