Although digital communications have been getting most of the attention lately, print is as important and full of possibilities when it comes to connecting users with a brand and increasing business.
Our print layouts are designed to:
- Read like a story with bold headers that lead the user where we want them to go.
- Provide instant insight by highlighting the most important data points.
- Lead to action with attention-grabbing CTAs and easy-to-follow tips.
Print page layout
Every print report consists of a few required modules and a mix of interchangable modules.
- Mail header (Required)
- Each print communication features a standard mail header, which contains the utility’s branding and the customer’s mailing information.
HER elements
Our home energy report consist of a few regular modules that you'll hear about often.
- Data modules
- You’ll find this front and center on our standard reports.
- Tips
- Efficiency tips pulled from our tips library, typically paired with an estimated dollar savings amount.
- Marketing module
- A utility can choose to promote marketing initiatives here, or include an extra-large efficiency tip.
- Footer
- Contains the utility’s branding as well as additional content such as FAQ.
Print grid
Opattern’s print material follows a 12-column grid layout. The page has a top and bottom margin of 27pt. Standard data and marketing modules on the HER are 192pt in height.
12 columns
Basic grid
Print typography
Display
18pt bold .display
![]()
Only use at the top of the page (top module). Using in the middle mucks up the hierarchy.
![]()
In general, write as a full sentence.
![]()
Don’t use for page or section headings (use hierarchical type instead).
Only use at the top of the page (top module). Using in the middle mucks up the hierarchy.
Don’t use for page or section headings (use hierarchical type instead).
Section heading 1
14pt bold .heading-section
![]()
Keep it short—3-5 words.
![]()
Use sentence case.
![]()
Don’t use punctuation. Exception: OK to use a question mark if needed
Section heading 2
12pt bold .heading-section-subheading
![]()
Keep it short—3-5 words.
![]()
Use sentence case.
![]()
Use keywords that help describe the content below. Ex: Ways to save
An intepretation of a graph or an insight
12pt bold .interpretation-text
![]()
Don’t use too much bold, and avoid using all caps for emphasis.
A paragraph
10pt .paragraph
![]()
Don’t use too much bold, and avoid using all caps for emphasis.
Front side report details text
8pt .details-text
![]()
Use title case. Ex: Efficient Neighbors.
Legal text
6pt .legal-text
![]()
Include the utility’s contact information.
![]()
Links should only have an underline.
