Typography 2020

Above is our standard H1, used on page and post titles. 50px / Freight Micro / 400 / #373737 ($headline-color or $gray-dark)

Basic Typography

Note that we shouldn't ever use h1 other than the page title, except in special situations.

Standard paragraph text is 16px / Future PT / 400 / #555 / 1.428 line-height. With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

Small body copy can be toggled via block settings. 14px / Futura PT / 500 / #373737

h1.display

h1.display is used in special circumstances, mostly landing pages like Brew Guru or the Free Trial page. 60px / Futura PT / 500 / #373737

h2. 40px / Futura PT / 500 / #373737

h2.with-mini-hr

With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

h3 or p.lead. 26px / Futura PT / 400 / 1.4 / #555555 ($text-color or $gray)

p.lead can be used for "display sentences" and is available via the editor's block settings. Add a class of 'text-uppercase` for an all caps variant H3 subhead. If you set text-align to center we'll max out at 800px to keep that paragraph readable. Example in the wild.

Here is an example of p.lead, with a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival.

h4 or p.large. 20px / Futura PT / 400 / #555

h4 and p.large are the same size. p.large is available via the paragraph's block settings but editor's should not ever need to use it. Use h4 for 20px headings.


Media/download links are auto generated based on the extension of the link (i.e. .mp3 will automatically convert to a.audio). Text Link is manually modified by adding the class in gutenberg

Download a File

Download a Sound File

Download a Video File

Note most of these CTA links are auto-generated, but can be also inserted manually. If the link CTA is short and on its own line, use text-link. If the CTA is longer or inline with text, use text-link text-link-inline


Lists

  1. Ordered List
  2. Item 2
  3. Item 3
  • Unordered List
  • Item 2
  • Item 3
  • This "simple" list
  • doesn't have any bullets
  • add 'simple' as a class!

Blockquotes

This is the standard gutenberg blockquote, please don't use this! If we find a need to use blockquotes on the site please contact Baldie and Web Dept to create a new task.

- Citation (Note this is optional)

With a paragraph to help show what the floated blockquote looks like. With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit...


Inline Imagery

With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit...

Note the captions on images can be overridden by adding a class to the parent image. Use caption-left or caption-right as needed

An h3 to introduce this content

AHA19_Recipe_Thames-Porter_cb-215_900x654
Default Left Align @ 40% w/ Caption

With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival.

An h3 that 'clears' the above float

THC-Infused Tripel Royal Stag
Note you have the choice image size (crop) when you insert an image. "Full" will be the original uncropped size. "Large" will be a 3x2 crop.

Default Right Align With a paragraph (note spacing) and a link.

Note right now you need to add this class manually but will work on making it gutenberg ready.

Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

An h3 just to break up this content

AHA-seltzer-free-book-promo-1440x500-1
Caption of center aligned image embedded at full size.

@Baldie - any rules around using an full width image?

Alignnone and Aligncenter will span 100% of container, with max-width of 1000px - this helps keep content readable. With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

Tables

This simply uses the stock table block, and you can toggle on header, footer and/or caption.

Zymurgy IssueRelease Date
January/February 2020December 23, 2019
March/April 2020February 14, 2020
May/June 2020April 22, 2020
July/August 2020June 22, 2020
September/October 2020August 24, 2020
November/December 2020October 21, 2020
Footer Cell (please request styling)Footer Cell

Alerts

Use the Alert block by Gutenstrap to add inline alerts/warnings to any page or post. Content will span 100% of space available and clear any floated content above. @sarah - would you prefer these only span our $max-text-width @sarah can you add some notes on appropriate use of these elements.

Was this article helpful?
YesNo