Typography 2020

Share Post

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.loud or p.has-large-font-size. 20px / Futura PT / 400 / #555

p.loud is available via block settings. Use to make a short paragraph standout. @baldie, how is 'loud' different than 'lead'?


Regular link

Download a File

Download a Sound File

Download a Video File


Lists

  1. Ordered List
  2. Item 2
  3. Item 3
  • Unordered List
  • Item 2
  • Item 3

Blockquotes

This is the standard gutenberg blockquote, please only use this! Baldie hasn't updated yet. Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim.

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

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. The limit

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

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

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 (needs style Baldie?)Footer Cell (needs style Baldie?)
Use default table Gutenberg Block 'Standard Style'. Headers and Footers can be toggled on. Horizontal scrolling enabled by default on small screens.