Typography

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.5rem / 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 is actually an <h4>.

Additional helper classes available for headings:

.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 Color

Font size is not reduced (do not apply to <h1>)

.subheading

Subheading

Applies 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:

.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

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 one of the best tourist destinations and a great place for residents to relax year round. Mayor of San Diego

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

2600 Golf Course Drive
San Diego, CA 92102
(619) 123-4567

Notes

When displaying addresses and contact information, it is good practice to include schema.org metadata for search engine utility.