- An official website of the City of Philadelphia government Here's how you know
- An official website
Typography
Typography is the foundational building block of the phila.gov design. Fonts that are readable, yet bold encompass the brand.
We chose sans serifs because they are easier to read on screens. They’re also adaptable across platforms and browsers.
You can link directly to Montserrat and Open Sans from Google Fonts.
Montserrat
Montserrat is used for headlines that introduce sections of content.
Open Sans
Open Sans is used for body type.
Implementation
To establish page hierarchy for content heavy sites, all headings and paragraph tags have specific styling applied to them so pages flow visually from topic to detail.
Add the contrast class to an h1 tag to create page titles.
<h1 class="contrast">Page heading</h1>Use any heading as a class to override default heading size.
<h2 class="h5">Smaller text heading example</h2>