Styles

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

Addresses are used to list physical locations.

When to Use

  • Address elements are used specifically for mailing/shipping/billing addresses or the physical location of a building/lot/land.

When Not to Use

  • Do not use the address element to denote anything else but a physical address.

Usability

  • Use logically within the content.
  • Work with a content strategist to help set address placement and standards.

Accessibility

  • Use the <address> element instead of a stylized <p> element.
Pennsylvania State Capitol Building
501 N 3rd St,
Harrisburg, PA 17120
USA
Select Code
<address>
	Pennsylvania State Capitol Building <br>
	501 N 3rd St, <br>
	Harrisburg, PA 17120 <br>
	USA
</address>

Blockquote

A verbatim statement described differently from other content.

When to Use

  • Interviews and news content, blockquotes make the most sense in these types of content.
  • Dramatic content breaks. Blockquotes are used to help break up content on the page in conjunction with other page elements such as images, videos, and other components.

When Not to Use

  • No quotable content. Do not use the blockquote for content other than a quote.

Usability

  • Don’t overuse them. Add them for effect, not to utilize for every quote.
  • A blockquote includes verbatim content in quotes. Outside of the quote is a dash with the quote person/entity with an optional next line to denote their title or other unique identifiers.

Accessibility

  • Use the <blockquote> element. When citing an entity or using a quote from another location, add cite=”add url” in the <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.” First Last
Select Code
<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>

Color Palette

When to Use

  • Always use the PDS color palette for official pa.gov sites and services.

When Not to Use

  • Default is to use the color palette unless specifically directed otherwise for your project.

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.
  • Any .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 ColorForeground Text ColorExampleContrast RatioWCAG AAWCAG AAA
.base-white-bg.base-darkgrayAa9:44:01YesYes
.base-white-bg.base-blackAa21:01YesYes
.base-offwhite-bg.base-darkgrayAa9.04:1YesYes
.base-offwhite-bg.base-blackAa20.21:1YesYes
.base-lightgray-bg.base-darkgrayAa7.92:1YesYes
.base-lightgray-bg.base-blackAa17.62:1YesYes
.base-darkgray-bg.base-whiteAa9.44:1YesYes
.base-darkgray-bg.base-offwhiteAa9.04:1YesYes
.base-darkgray-bg.base-lightgrayAa7.92:1YesYes
.base-black-bg.base-whiteAa21:01YesYes
.base-black-bg.base-offwhiteAa20.12:1YesYes
.base-black-bg.base-lightgrayAa17.62:1YesYes
.base-white-bg.brand-blueAa14.42:1YesYes
.base-white-bg.brand-greenAa5.99:1YesNo
.base-white-bg.brand-redAa6.82:1YesNo
.base-white-bg.alert-redAa5.19:1YesNo
.base-offwhite-bg.brand-blueAa13.82:1YesYes
.base-offwhite-bg.brand-greenAa5.74:1YesNo
.base-offwhite-bg.brand-redAa6.53:1YesNo
.base-offwhite-bg.alert-redAa4.97:1YesNo
.base-lightgray-bg.brand-blueAa12.1:1YesYes
.base-lightgray-bg.brand-greenAa5.02:1YesNo
.base-lightgray-bg.brand-redAa5.72:1YesNo
.base-black-bg.brand-lightblueAa6.9:1YesNo
.base-black-bg.brand-goldAa7.46:1YesYes
.base-black-bg.alert-goldAa10:01YesYes
.base-black-bg.alert-greenAa5.66:1YesNo
.brand-blue-bg.brand-lightblueAa4.74:1YesNo
.brand-blue-bg.brand-goldAa5.12:1YesNo
.brand-blue-bg.alert-goldAa6.86:1YesNo
.brand-lightblue-bg.brand-blueAa4.74:1YesNo
.brand-gold-bg.brand-blueAa5.12:1YesNo
.alert-gold-bg.brand-blueAa6.86:1YesNo
.brand-green-bg.base-whiteAa5.99:1YesNo
.brand-green-bg.base-offwhiteAa5.74:1YesNo
.brand-green-bg.base-lightgrayAa5.02:1YesNo
.alert-green-bg.base-blackAa5.66:1YesNo
.brand-blue-bg.base-whiteAa14.42:1YesYes
.brand-blue-bg.base-offwhiteAa13.82:1YesYes
.brand-blue-bg.base-lightgrayAa12.1:1YesYes
.brand-lightblue-bg.base-blackAa6.9:1YesNo
.brand-red-bg.base-whiteAa6.82:1YesNo
.brand-red-bg.base-offwhiteAa6.53:1YesNo
.brand-red-bg.base-lightgrayAa5.72:1YesNo
.alert-red-bg.base-whiteAa5.19:1YesNo
.alert-red-bg.base-offwhiteAa4.97:1YesNo
.brand-gold-bg.base-blackAa7.46:1YesYes
.alert-gold-bg.base-blackAa10:01YesYes
White
#FFFFFF
Off White
#FAFAFA
Light Grey
#EBEBEB
Dark Grey
#464646
Black
#000000
PA Blue
#002469
PA Gold
#BF940D
PA Green
#007336
PA Red
#AD2624
PA Light Blue
#6699C2
Alert Gold
#E0AB06
Alert Green
#029949
Alert Red
#D71A17
Link Blue Focus
#23A0F6
Select Code
<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>

Dividers

Use dividers to define thematic breaks between paragraphs.

When to Use

  • Dividers are used to separate content on a page, and are used primarily to break up long pages of text, or to separate titles from other content.

When Not to Use

  • Table substitution. Do not use dividers as a way to create tables.

Usability

  • Judiciously use on long content pages to help break up the content section.

Accessibility

  • Do not add any additional ARIA or additional attributes to the <hr>.

Headers

Section titles that structure content.

When to Use

  • Page titles. The page title will always be an <h1> element.
  • Page header. After the use <h1> page title is used, the next level element will be <h2> for in content page headers.
  • Subheads. After the <h2> element is used for page headers, use an <h3> for subheads.
  • Additional headers. For especially long content structures, you may use the additional <h4>, <h5>, and <h6> elements, though they should be rarely utilized.

When Not to Use

  • You must use the <h1>, <h2>, and occasionally the <h3> for establishing page structure.

Usability

  • Improper order and nesting. Your page should always have an <h1> starting off the page content. Do not put any other header elements before it. Do not mix up the logical use of headers, they should always descend on the page.
  • Multiple <h2> can exist with children headers. You can have several <h2> elements on the page, just make sure 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.
  • The default font is Montserrat. Do not use Fungo unless specifically directed so in your requirements.

Accessibility

  • Write clear header titles.
  • Do not add any other ARIA attributes to the header elements.

h1 - FungoRegular: 98px / 5.45rem / 2% letter spacing - Hero Section Header

h1 - Montserrat Bold: 80px / 4.45rem / 2% letter spacing - Hero Section Header

h1 - Montserrat Bold: 48px / 2.67rem / 2% letter spacing

h2 - Montserrat Bold: 42px / 2.34rem / 2% letter spacing

h3 - Montserrat Regular: 34px / 1.89rem / 2% letter spacing

h3 - Montserrat Bold: 34px / 1.89rem / 2% letter spacing

h4 - Montserrat Regular: 28px / 1.56rem / 2% letter spacing

h4 - Montserrat Bold: 28px / 1.56rem / 2% letter spacing

h5 - Montserrat Regular: 26px / 1.45rem / 2% letter spacing
h5 - Montserrat Bold: 26px / 1.45rem / 2% letter spacing
h6 - Montserrat Regular: 24px / 1.35rem / 2% letter spacing
h6 - Montserrat Bold: 24px / 1.35rem / 2% letter spacing
Select Code
<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>

Iconography

Icons are used in conjunction with content to communicate meaning.

When to Use

  • When and where custom icons are detailed in the usage of a certain component.
  • Use of icons is limited in content and only when appropriate to your project.
  • How to Use: use PDS icons available in src/img or add Font Awesome to your project Opens In A New Window. PDS uses icons in two ways:
    • SVG in HTML img elements.
    • SVG in CSS backgrounds.

When Not to Use

  • Do not use icons to replace content that can be written out.

Usability

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

instagram

youtube-square

Select Code
<i class="far fa-check-square"></i>
<p>check-square</p>

<i class="far fa-star"></i>
<p>star</p>

<i class="fas fa-map-signs"></i>
<p>map-signs</p>

<i class="fas fa-car"></i>
<p>car</p>

<i class="far fa-address-book"></i>
<p>address-book</p>

<i class="far fa-address-card"></i>
<p>address-card</p>

<i class="fas fa-map-marker-alt"></i>
<p>map-marker-alt</p>

<i class="fas fa-info-circle"></i>
<p>info-circle</p>

<i class="far fa-flag"></i>
<p>flag</p>

<i class="fas fa-home"></i>
<p>home</p>

<i class="fas fa-search"></i>
<p>search</p>

<i class="far fa-comments"></i>
<p>comments</p>

<i class="fas fa-globe-americas"></i>
<p>globe-americas</p>

<i class="far fa-newspaper"></i>
<p>newspaper</p>

<i class="fas fa-times"></i>
<p>times</p>

<i class="fas fa-external-link-alt"></i>
<p>external-link-alt</p>

<i class="fab fa-facebook-square"></i>
<p>facebook-square</p>

<i class="fab fa-twitter-square"></i>
<p>twitter-square</p>

<i class="fab fa-instagram"></i>
<p>instagram</p>

<i class="fab fa-youtube-square"></i>
<p>youtube-square</p>

Image Caption

Descriptive text that appears under photos and illustrations.

When to Use

  • Contextual caption. Add an image caption to an image/photo/illustration when it makes sense for your content strategy.

When Not to Use

  • External interactive content. Do not use with <iframes> to external content.

Usability

  • Make sure to add descriptive alt text to your image and ensure your caption aligns to your alt text. You can use a caption to add more content that wouldn’t be appropriate for an alt text description.
  • Use both. You can give your image good alternative descriptions and extended captions.

Accessibility

  • Add a caption by wrapping an <img> or <canvas> element with a <figure> element and adding a <figcaption>.
  • Write good alt="" alernative description for images. Refer to Moz's article on alt text Opens In A New Window for more information.
  • Use the following documentation for images:
    • Be precise: The alt text should describe the content in the image accurately.
    • Keep it concise: A short phrase or sentence will be enough for many images.
    • Imagine you closed your eyes and you couldn't see the image. What description is necessary for the reader to understand the information presented in the image?
    • If an image is simply decorative, then the alternative text can just be the word "null" or "decorative."
    • If you have infographics or images of text (e.g., charts and tables), the alt text should state all of the information provided. Alternatively, you can provide a text version of the information.
    • Avoid using "image of" at the beginning of the description. It's not necessary since the screen reader will already announce that it is an image.
[Provide Alt Text]
This is a photo caption that is long and has multiple lines of description for the above image.
[Provide Alt Text]
This is a photo caption that is long and has multiple lines of description for the above image. This is a contextual link.
Select Code
<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>

Lists

Lists Ordered

Lists organize information into discrete sequential sections.

When to Use

  • Ordered list: Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
  • Unordered list: Use unordered lists to display text in no specific order.

When Not to Use

  • Narratives. If you need to communicate long lists of narrative text.

Usability

  • Use sentence case and begin lists with a capital letter.
  • Use punctuation appropriate to the text. Do not leave sentences without periods.

Accessibility

  • Do not add any additional ARIA attributes to list elements.
  • Add appropriate semantic markup and/or ARIA attributes for items in the <li>.
  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested list item
    2. Nested list item
    3. Nested list item
  4. List item
  5. List item
  6. List item
Select Code
<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 Unordered

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item
Select Code
<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>

Paragraph

A block of text.

When to Use

  • Narrative content. If you need to create text on the page, use a paragraph.

When Not to Use

  • If it’s supporting content structures. Do not style paragraphs to mimic any of the other components in this system (tables, FAQ accordions, lists, etc).

Usability

  • Use paragraph blocks, not one paragraph. Be sure to use both <p> and </p> to encapsulate a paragraph. Do not use <br/> elements to create paragraphs.
  • Headers are not paragraphs. Do not wrap a paragraph with a header element instead of an <p> element.

Accessibility

  • Do not add any additional ARIA attributes to the <p> element.

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.

Select Code
<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>

Scripts

Subscript

Subscripts appear below the text around it.

When to Use

  • Formulas. Typically used in mathematical and scientific formulas.
  • Citations. Using a superscript wrapped [ ] with a link can create citation links.

When Not to Use

  • Limited use. Do not use unless your content requires them.

Usability

  • Use their respective <sup> and <sub> elements to create them.
  • When used as a citation, follow the same usability and accessibility guidelines for links.

Accessibility

  • Do not add any additional ARIA attributes to the superscript and subscript elements.
  • When used as a citation link, follow the same accessibility guidelines for links.

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.

Select Code
<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>

Superscript

Superscripts appear elevated from the text around it..

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.

Select Code
<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>

Typography

Type formatting for websites

When to Use

  • There are specific rules and use cases for font weights and styles on the elements they are used in.

When Not to Use

  • The only deviation from using Montserrat and the associated rules would be to use the typeface Fungo in specific, directed use as outlined in your project.

Usability

  • Montserrat Light Italic - Use in the Blockquote element (the quote).
  • Montserrat Medium - Use in the Blockquote element (the source).
  • Montserrat Regular - Use in body copy, see paragraph element.
  • Montserrat Regular Italic - Use in body copy and the Image Caption element.
  • Montserrat Bold - Use in body copy and in headlines, see header elements.
  • Our REM system is based on 18px instead of 16px. In order to correlate a specific pixel size to REM value, use this formula: ( X/18). X is the desired pixel size divided by 18. The resulting number is your REM value.

Accessibility

  • Do not add additional ARIA attributes to the <p>, <em>, and <strong> html elements.
  • The base body copy text is 18px, which forms the new basis for our REM measurements. This aids in the readability of the text.
  • Unless directly specified in a style element or pattern, all body copy and type setting is set to 18px/1rem.
PX REM
10.05
20.11
30.16
40.22
50.27
60.33
70.38
80.44
90.5
100.55
110.61
120.66
130.72
140.78
150.83
160.88
170.94
181
191.05
201.11
PX REM
211.16
221.22
231.28
241.33
251.38
261.44
271.5
281.55
291.61
301.67
311.72
321.78
331.83
341.88
351.94
362
372.05
382.11
392.16
402.22
PX REM
412.28
422.33
432.38
442.45
452.5
462.55
472.61
482.66
492.72
502.77
512.83
522.88
532.94
543
553.05
563.11
573.16
583.22
593.27
603.33
PX REM
613.38
623.44
633.5
643.55
653.61
663.66
673.72
683.77
693.83
703.88
713.94
724
734.05
744.11
754.16
764.22
774.27
784.33
794.38
804.44
PX REM
814.5
824.55
834.61
844.67
854.72
864.78
874.83
884.89
894.95
905
915.05
925.11
935.16
945.22
955.27
965.33
975.38
985.44
995.5
1005.55

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.

Select Code
<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>