The PDS uses a type system to maximize readability, accessibility, and page layout for a multitude of devices. The PDS base font is Montserrat, which you can freely incorporate from Google Fonts. The base body copy text size is 18px, which forms our new REM. See the Typography section for more information on typography guidelines.
<address>
Pennsylvania State Capitol Building <br>
501 N. 3rd St. <br>
Harrisburg, PA 17120 <br>
USA
</address>
Addresses are used to list physical locations.
When to Use
When Not to Use
Usability
Accessibility
<address>
element instead of a stylized <p>
element.“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie.” First Last
<blockquote>
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie.”
<cite>First Last</cite>
</blockquote>
A verbatim statement described differently from other content.
When to Use
When Not to Use
Usability
Accessibility
<blockquote>
element. When citing an entity or using a quote from another location, add cite=”add url”
in the <blockquote>
.<div class="f-color-chips">
<div class="f-color-chip">
<div class="f-color-chip__name">White</div>
<div class="f-color-chip__color">#FFFFFF</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Off White</div>
<div class="f-color-chip__color">#FAFAFA</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Light Grey</div>
<div class="f-color-chip__color">#EBEBEB</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Dark Grey</div>
<div class="f-color-chip__color">#464646</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Black</div>
<div class="f-color-chip__color">#000000</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip">
<div class="f-color-chip__name">PA Blue</div>
<div class="f-color-chip__color">#002469</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">PA Gold</div>
<div class="f-color-chip__color">#BF940D</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">PA Green</div>
<div class="f-color-chip__color">#007336</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">PA Red</div>
<div class="f-color-chip__color">#AD2624</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">PA Light Blue</div>
<div class="f-color-chip__color">#6699C2</div>
</div>
</div>
<div class="f-color-chips">
<div class="f-color-chip">
<div class="f-color-chip__name">Alert Gold</div>
<div class="f-color-chip__color">#E0AB06</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Alert Green</div>
<div class="f-color-chip__color">#029949</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Alert Red</div>
<div class="f-color-chip__color">#D71A17</div>
</div>
<div class="f-color-chip">
<div class="f-color-chip__name">Link Blue Focus</div>
<div class="f-color-chip__color">#23A0F6</div>
</div>
</div>
When to Use
When Not to Use
Usability
.base-offwhite
is for backgrounds with dark text (.base-darkgray)
..base-darkgray
is for backgrounds with light text (.base-offwhite)
..alert-green
and .alert-red
must use .base-white
for text..alert-gold
must use .base-black
for text..alert color
is only used for alerts..link-focus
is the color used for focus states..base-lightgray
is used in navigation with .brand-blue
being the color of links in the navbar. .brand-blue
is also the hover state color of the nav links with the link text turning to .base-white
.Accessibility
WCAG 2.1 AA and AAA Color Combinations.
Background Color | Foreground Text Color | Example | Contrast Ratio | WCAG AA | WCAG AAA |
---|---|---|---|---|---|
.base-white-bg | .base-darkgray | Aa | 9:44:01 | Yes | Yes |
.base-white-bg | .base-black | Aa | 21:01 | Yes | Yes |
.base-offwhite-bg | .base-darkgray | Aa | 9.04:1 | Yes | Yes |
.base-offwhite-bg | .base-black | Aa | 20.21:1 | Yes | Yes |
.base-lightgray-bg | .base-darkgray | Aa | 7.92:1 | Yes | Yes |
.base-lightgray-bg | .base-black | Aa | 17.62:1 | Yes | Yes |
.base-darkgray-bg | .base-white | Aa | 9.44:1 | Yes | Yes |
.base-darkgray-bg | .base-offwhite | Aa | 9.04:1 | Yes | Yes |
.base-darkgray-bg | .base-lightgray | Aa | 7.92:1 | Yes | Yes |
.base-black-bg | .base-white | Aa | 21:01 | Yes | Yes |
.base-black-bg | .base-offwhite | Aa | 20.12:1 | Yes | Yes |
.base-black-bg | .base-lightgray | Aa | 17.62:1 | Yes | Yes |
.base-white-bg | .brand-blue | Aa | 14.42:1 | Yes | Yes |
.base-white-bg | .brand-green | Aa | 5.99:1 | Yes | No |
.base-white-bg | .brand-red | Aa | 6.82:1 | Yes | No |
.base-white-bg | .alert-red | Aa | 5.19:1 | Yes | No |
.base-offwhite-bg | .brand-blue | Aa | 13.82:1 | Yes | Yes |
.base-offwhite-bg | .brand-green | Aa | 5.74:1 | Yes | No |
.base-offwhite-bg | .brand-red | Aa | 6.53:1 | Yes | No |
.base-offwhite-bg | .alert-red | Aa | 4.97:1 | Yes | No |
.base-lightgray-bg | .brand-blue | Aa | 12.1:1 | Yes | Yes |
.base-lightgray-bg | .brand-green | Aa | 5.02:1 | Yes | No |
.base-lightgray-bg | .brand-red | Aa | 5.72:1 | Yes | No |
.base-black-bg | .brand-lightblue | Aa | 6.9:1 | Yes | No |
.base-black-bg | .brand-gold | Aa | 7.46:1 | Yes | Yes |
.base-black-bg | .alert-gold | Aa | 10:01 | Yes | Yes |
.base-black-bg | .alert-green | Aa | 5.66:1 | Yes | No |
.brand-blue-bg | .brand-lightblue | Aa | 4.74:1 | Yes | No |
.brand-blue-bg | .brand-gold | Aa | 5.12:1 | Yes | No |
.brand-blue-bg | .alert-gold | Aa | 6.86:1 | Yes | No |
.brand-lightblue-bg | .brand-blue | Aa | 4.74:1 | Yes | No |
.brand-gold-bg | .brand-blue | Aa | 5.12:1 | Yes | No |
.alert-gold-bg | .brand-blue | Aa | 6.86:1 | Yes | No |
.brand-green-bg | .base-white | Aa | 5.99:1 | Yes | No |
.brand-green-bg | .base-offwhite | Aa | 5.74:1 | Yes | No |
.brand-green-bg | .base-lightgray | Aa | 5.02:1 | Yes | No |
.alert-green-bg | .base-black | Aa | 5.66:1 | Yes | No |
.brand-blue-bg | .base-white | Aa | 14.42:1 | Yes | Yes |
.brand-blue-bg | .base-offwhite | Aa | 13.82:1 | Yes | Yes |
.brand-blue-bg | .base-lightgray | Aa | 12.1:1 | Yes | Yes |
.brand-lightblue-bg | .base-black | Aa | 6.9:1 | Yes | No |
.brand-red-bg | .base-white | Aa | 6.82:1 | Yes | No |
.brand-red-bg | .base-offwhite | Aa | 6.53:1 | Yes | No |
.brand-red-bg | .base-lightgray | Aa | 5.72:1 | Yes | No |
.alert-red-bg | .base-white | Aa | 5.19:1 | Yes | No |
.alert-red-bg | .base-offwhite | Aa | 4.97:1 | Yes | No |
.brand-gold-bg | .base-black | Aa | 7.46:1 | Yes | Yes |
.alert-gold-bg | .base-black | Aa | 10:01 | Yes | Yes |
<hr>
Use dividers to define thematic breaks between paragraphs.
When to Use
When Not to Use
Usability
Accessibility
<hr>
.<h1 class="handwritten">h1 - FungoRegular: 98px / 5.45rem / 2% letter spacing - Hero Section Header</h1>
<h1 class="section-header">h1 - Montserrat Bold: 80px / 4.45rem / 2% letter spacing - Hero Section Header</h1>
<h1>h1 - Montserrat Bold: 48px / 2.67rem / 2% letter spacing</h1>
<h2>h2 - Montserrat Bold: 42px / 2.34rem / 2% letter spacing</h2>
<h3>h3 - Montserrat Regular: 34px / 1.89rem / 2% letter spacing</h3>
<h3><strong>h3 - Montserrat Bold: 34px / 1.89rem / 2% letter spacing</strong></h3>
<h4>h4 - Montserrat Regular: 28px / 1.56rem / 2% letter spacing</h4>
<h4><strong>h4 - Montserrat Bold: 28px / 1.56rem / 2% letter spacing</strong></h4>
<h5>h5 - Montserrat Regular: 26px / 1.45rem / 2% letter spacing</h5>
<h5><strong>h5 - Montserrat Bold: 26px / 1.45rem / 2% letter spacing</strong></h5>
<h6>h6 - Montserrat Regular: 24px / 1.35rem / 2% letter spacing</h6>
<h6><strong>h6 - Montserrat Bold: 24px / 1.35rem / 2% letter spacing</strong></h6>
Section titles that structure content.
When to Use
<h1>
element.<h1>
page title is used will be <h2>
.<h3>
after a <h2>
element is used for page headers.<h4>
, <h5>
, and <h6>
elements. These additional elements should rarely be used.<h2>
, <h3>
, <h4>
, <h5>
, and <h6>
elements. Only use the Fungo typeface if specifically directed to do so, otherwise a <h1>
will always be Montserrat.When Not to Use
<h1>
, <h2>
, and occasionally <h3>
for establishing page structure in this order. Do not use improper nesting.<h1>
then a <h3>
right afterward. Follow the proper order of headers.Usability
<h1>
starting off the content. Do not put any other header elements before it. Do not mix the logical use of headers. Headers should always descend on the page.<h2>
elements can exist on the page and with children headers, but ensure that any subhead <h3>
elements are properly nested under them. The existence of other <h2>
elements on the page denotes multiple sections of separate content blocks with their own subheads.Accessibility
check-square
star
map-signs
car
address-book
address-card
map-marker-alt
info-circle
flag
home
search
comments
globe-americas
newspaper
times
external-link-alt
facebook-square
twitter-square
youtube-square
<i class=""></i>
<p></p>
Icons are used in conjunction with content to communicate meaning.
When to Use
When Not to Use
Usability
Accessibility
<figure>
<img src="assets/toolkit/images/bg/hero-bg-small.jpg" alt="[Provide Alt Text]">
<figcaption>This is a photo caption that is long and has multiple lines of description for the above image.</figcaption>
</figure>
<figure>
<img src="assets/toolkit/images/bg/hero-bg-small.jpg" alt="[Provide Alt Text]">
<figcaption>This is a photo caption that is long and has multiple lines of description for the above image. <a target="_blank" href="#!" title="[Provide Title Text]">This is a contextual link.</a></figcaption>
</figure>
Descriptive text that appears under photos and illustrations.
When to Use
When Not to Use
<iframes>
to external content.Usability
Accessibility
<img>
or <canvas>
element with a <figure>
element and adding a <figcaption>
.alt=""
alternative description for images. Refer to Moz’s article on alt text Opens In A New Window for more information.
This is an internal link default: Learn more about the Pennsylvania State Museum.
This is an internal link focus: Learn more about the Pennsylvania State Museum.
This is an internal link hover: Learn more about the Pennsylvania State Museum.
This is an external link default: Learn more about the Pennsylvania State Museum Opens In A New Window.
This is an external link focus: Learn more about the Pennsylvania State Museum Opens In A New Window.
This is an external link hover: Learn more about the Pennsylvania State Museum Opens In A New Window.
<p>This is an internal link default: Learn more about the <a href="#!" class="">Pennsylvania State Museum</a>.</p>
<p>This is an internal link focus: Learn more about the <a href="#!" class="-focus">Pennsylvania State Museum</a>.</p>
<p>This is an internal link hover: Learn more about the <a href="#!" class="-hover">Pennsylvania State Museum</a>.</p>
<hr>
<p>This is an external link default: Learn more about the <a target="_blank" href="#!" target="_blank" rel="noopener noreferrer" class="">Pennsylvania State Museum <span class="show-for-sr">Opens In A New Window</span><i class="fa fa-external-link" aria-hidden="true"></i></a>.</p>
<p>This is an external link focus: Learn more about the <a target="_blank" href="#!" target="_blank" rel="noopener noreferrer" class="-focus">Pennsylvania State Museum <span class="show-for-sr">Opens In A New Window</span><i class="fa fa-external-link" aria-hidden="true"></i></a>.</p>
<p>This is an external link hover: Learn more about the <a target="_blank" href="#!" target="_blank" rel="noopener noreferrer" class="-hover">Pennsylvania State Museum <span class="show-for-sr">Opens In A New Window</span><i class="fa fa-external-link" aria-hidden="true"></i></a>.</p>
Links connect citizens to a different page or further information.
When to Use
When Not to Use
Usability
Accessibility
<ol>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ol>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ol>
</li>
<li>
<i>
List item
</i>
</li>
<li>
<strong>
List item
</strong>
</li>
<li>List item</li>
</ol>
Lists organize information into discrete sequential sections.
When to Use
When Not to Use
Usability
Accessibility
<li>
.<ul>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul>
</li>
<li>
<i>
List item
</i>
</li>
<li>
<strong>
List item
</strong>
</li>
<li>List item</li>
</ul>
The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.
<p>The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.</p>
A block of text.
When to Use
When Not to Use
Usability
<p>
and </p>
to encapsulate a paragraph. Do not use <br/>
elements to create paragraphs.<p>
element.Accessibility
<p>
element.Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary7.
Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary7.
<p>Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary<sub>7</sub>.</p>
<p>Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary<sub><a target="_blank" href="#!">7</a></sub>.</p>
Subscripts appear below the text around it.
When to Use
When Not to Use
Usability
<sup>
and <sub>
elements to create them.Accessibility
Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary7.
Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary7.
<p>Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary<sup>7</sup>.</p>
<p>Pennsylvania has 140 miles (225 km) of waterfront along Lake Erie and the Delaware Estuary<sup><a target="_blank" href="#!">7</a></sup>.</p>
Superscripts appear elevated from the text around it.
The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.
The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.
The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.
<p>The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.</p>
<p><em>The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.</em></p>
<p><strong>The Commonwealth of Pennsylvania is a state located in the Northeastern, Great Lakes and Mid-Atlantic regions of the United States. The Appalachian Mountains run through its middle. The commonwealth is bordered by Delaware to the southeast, Maryland to the south, West Virginia to the southwest, Ohio to the west, Lake Erie and the Canadian province of Ontario to the northwest, New York to the north, and New Jersey to the east.</strong></p>
Type formatting for websites.
When to Use
When Not to Use
Usability
Accessibility
<p>
, <em>
, and <strong>
HTML elements.PX | REM |
---|---|
1 | 0.05 |
2 | 0.11 |
3 | 0.16 |
4 | 0.22 |
5 | 0.27 |
6 | 0.33 |
7 | 0.38 |
8 | 0.44 |
9 | 0.5 |
10 | 0.55 |
11 | 0.61 |
12 | 0.66 |
13 | 0.72 |
14 | 0.78 |
15 | 0.83 |
16 | 0.88 |
17 | 0.94 |
18 | 1 |
19 | 1.05 |
20 | 1.11 |
PX | REM |
---|---|
21 | 1.16 |
22 | 1.22 |
23 | 1.28 |
24 | 1.33 |
25 | 1.38 |
26 | 1.44 |
27 | 1.5 |
28 | 1.55 |
29 | 1.61 |
30 | 1.67 |
31 | 1.72 |
32 | 1.78 |
33 | 1.83 |
34 | 1.88 |
35 | 1.94 |
36 | 2 |
37 | 2.05 |
38 | 2.11 |
39 | 2.16 |
40 | 2.22 |
PX | REM |
---|---|
41 | 2.28 |
42 | 2.33 |
43 | 2.38 |
44 | 2.45 |
45 | 2.5 |
46 | 2.55 |
47 | 2.61 |
48 | 2.66 |
49 | 2.72 |
50 | 2.77 |
51 | 2.83 |
52 | 2.88 |
53 | 2.94 |
54 | 3 |
55 | 3.05 |
56 | 3.11 |
57 | 3.16 |
58 | 3.22 |
59 | 3.27 |
60 | 3.33 |
PX | REM |
---|---|
61 | 3.38 |
62 | 3.44 |
63 | 3.5 |
64 | 3.55 |
65 | 3.61 |
66 | 3.66 |
67 | 3.72 |
68 | 3.77 |
69 | 3.83 |
70 | 3.88 |
71 | 3.94 |
72 | 4 |
73 | 4.05 |
74 | 4.11 |
75 | 4.16 |
76 | 4.22 |
77 | 4.27 |
78 | 4.33 |
79 | 4.38 |
80 | 4.44 |
PX | REM |
---|---|
81 | 4.5 |
82 | 4.55 |
83 | 4.61 |
84 | 4.67 |
85 | 4.72 |
86 | 4.78 |
87 | 4.83 |
88 | 4.89 |
89 | 4.95 |
90 | 5 |
91 | 5.05 |
92 | 5.11 |
93 | 5.16 |
94 | 5.22 |
95 | 5.27 |
96 | 5.33 |
97 | 5.38 |
98 | 5.44 |
99 | 5.5 |
100 | 5.55 |