The utility line is a key aspect of our brand, and can be used in a variety of contexts to bring structure, separation, and color into a composition. Reference the examples below to see appropriate applications of the utility line.
-
Line Length
The length of the utility line will change depending on context. When used to divide a title from its content, the line should span 1-3 letters of the headline. Otherwise, use your best judgement, taking into consideration the line’s purpose and placement.
Stroke Width
Follow the values below for the proper width of the utility line in various media.
Medium Stroke Width PowerPoint 2pt Web 3px Letter-sized Paper 2pt -
Utility Line Usage Examples
-
The most common use of the utility line is to separate a title from its content. The gap below the line can be larger than the gap above, but at a minimum it should be equivalent.
-
This is an instance in which the utility line is unneccessary, as it is neither functioning to separate vertical content or to direct attention towards something.
-
In a stack of content types, a small utility line can be used to separate the elements into groups. Here it is being used to separate Starr's name and title from her bio.
-
A longer utility line can function as a structural element, here, for instance, where it is used to signify the end of the article and provide a division before the share links below.
-
The utility line can be used to direct the reader's eye, here, for instance, where it is being used to draw the eye towards the content from the title above.
-
Be careful not to overdo it! Too many utility lines can start to clutter the layout and make it difficult for a reader to navigate.
-