Pattern Library
Typography
On this page:
Typefaces
We're utilizing Google Fonts sitewide; Merriweather for headline text, and Open Sans for body copy.
Merriweather
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Open Sans
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Type Sizes
The size, line height, and weight for each heading type is listed.
Main Heading (H1)
2.25rem / 1.3 / Normal
Subheading (H2)
1.6875rem / 1.3 / Normal
Section Heading (H3)
1.3125rem / 1.3 / Normal
Subsection Heading (H4)
1rem / 1.3 / 600
Segment Heading (H5)
1rem / 1.4 / Normal
Default Paragraph
1rem / 1.5 / Normal
Accented Paragraph
1.375rem / 1.5 / Normal
Fine Print Paragraph
.75rem / 1.5 / Normal
Type Helpers
Helper classes are available to style typographic tags as header elements. This is helpful if you want the style of, say, an <h2>, but the placement of an <h2> doesn't make semantic sense on the page.
This is actually a <p>.
This <h4> is sized like an <h2> on desktops and <h3> on mobile devices.
Additional helper classes available for headings:
| Class | Result |
|---|---|
| heading--center | Centered Heading |
| heading--right | Right-aligned Heading |
| heading--trim | Heading with No Margins |
| heading--snug | Heading with No Top Margin |
| heading--light | White Heading Text |
| heading--subcolor | Heading with Teal ColorFont size remains the same. Do NOT apply to <h1>. |
| subheading | SubheadingApplies a preset font size and teal color to any heading or paragraph. All headings and paragraphs with this class will look the same. |
Additional helper classes available for paragraphs:
| Class | Result |
|---|---|
| text-accent | Text accent |
| fine-print | Fine print |
| text-left | Left-aligned text |
| text-center | Centered text |
| text-right | Right-aligned text |
| text-capitalize | Words with first letter capitalized |
| text-upper | All uppercase letters |
| text-white | White text |
These classes are located in typography.scss.
Byline
Notes
Wrap article information within a post__meta container. Additional information, such as social sharing icons, is also appropriate in this area.
Blockquotes
With its great weather, miles of sandy beaches, and major attractions, San Diego is known worldwide as medium-1 of the best tourist destinations and a great place for residents to relax year round.
Body Content
Intro
We are the closest golf course to downtown San Diego. Conveniently located near Route 94 and Interstate 5 freeways. Facilities include an 18-hole golf course and a 9-hole executive golf course, driving range, practice putting greens, coffee shop and half-way house. The Pro Shop offers golf merchandise for sale and the rental of clubs, hand and power golf carts. The Professional Golf instruction staff offers group and individual golf lessons.
Sub Section
We are the closest golf course to downtown San Diego. Conveniently located near Route 94 and Interstate 5 freeways. Facilities include an 18-hole golf course and a 9-hole executive golf course, driving range, practice putting greens, coffee shop and half-way house. The Pro Shop offers golf merchandise for sale and the rental of clubs, hand and power golf carts. The Professional Golf instruction staff offers group and individual golf lessons.
Sub Section
We are the closest golf course to downtown San Diego. Conveniently located near Route 94 and Interstate 5 freeways. Facilities include an 18-hole golf course and a 9-hole executive golf course, driving range, practice putting greens, coffee shop and half-way house. The Pro Shop offers golf merchandise for sale and the rental of clubs, hand and power golf carts. The Professional Golf instruction staff offers group and individual golf lessons.
Address
San Diego, CA 92102
Notes
When displaying addresses and contact information, it is good practice to include schema.org metadata for search engine utility.