• Typography
    • Color
    • Space
    • Illustrations
    • Icons
    • Animation
    • Delight
    • Responsive design
    • Web layout
    • Email layout
    • Print layout
    • Accordians
    • Buttons
    • Dropdowns
    • Lists
    • Selectors
    • Text fields
    • Overview
    • Tips for effective writing
    • Our voice
    • Content style guide
    • Common words and phrases

This is Cuyahoga County's Digital Style Guide

A style guide is a document that provides guidelines for the way your brand should be presented from both a graphic and language perspective. The purpose of a style guide is to make sure that multiple contributors create in a clear and cohesive way that reflects the corporate style and ensures brand consistency with everything from design to writing.



General Principles

Our Font Choice

The Arial typeface is used for all body copy. It is a strong but neutral typeface that lends personality to the page without overpowering the content. 

Let the Lines Breathe

Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself. Ideal line-heights for standard copy have a ratio of 1.5. The exception to this rule are headlines. They need less spacing and therefore have a smaller line-height ratio. 

1.25 x font size for headlines
1.5 x font size for all other copy

Be Aware of the Line Length

Line-length, traditionally known as measure, is the number of characters in a single line. It also directly contributes to the readability and pacing of copy. Lines that are too long degrade eye tracking from line to line, making it difficult to gauge which line to read next. In contrast, lines that are too short make it difficult for a reader to maintain a steady reading rhythm. Short lines often create disproportionate ragged edges that negatively affect the design.

52 - 87 characters per line

Left-align Text Areas

Left aligned text is easier to read than centered text for paragraphs. When you center your text, the starting place of each line changes. This forces the user to work harder to find where each line begins to continue reading. Without a straight left edge, there is no consistent place where users can move their eyes to when they complete each line. Center-aligned text can be used for some labels or small amounts of text.

Specific Definitions


Lorem ipsum dolor sit amet. Proin gravida euismod mullis.


Mark up headings semantically using the appropriate <h#> level HTML element and use a heading class to apply the styling. Style headings consistently to create a clear visual hierarchy throughout your screen.
If your screen has lots of long form content, use the corresponding size class. For example an <h1> should use heading-xl, an <h2> should use heading-l and so on.
If your screen has lots of question pages, short form content or pages with long headings, start with heading-l for an <h1>. But change it if your pages feel unbalanced – semantic and visual hierarchy do not always need to be the same.

Write all headings in title case.