Wrangle Your Webtype

Set your web typography the right way.
Use our typeset boilerplate for Beaver Builder.

Hero Icon 1
Hero Icon 2
Hero Icon 3

Typography = Everything

The idea of this tool is that you create a page, load up the Beaver Builder Typesetter template, and have fun setting your web typography. Simple & powerful.

01. How It Works

RT Icon

Responsive

BGT Icon

Baseline Grid Tool

TE Icon

Type Playground

Icon 4

Grid Module

BW Icon

BW Templates

Everything included with the template

Beaver Builder 2.2+

Compatible with Beaver Builder 2.2 and above. 

Baseline Grid

A reusable Baseline grid module can be used for layout design as well.

Page Templates

Unstyled + Pre-styled  page templates included. Unstyled is for use with Customizer or CSS. Pre-styled is for module only.

Use What You Want

We have exported each section from the full template for use. Only want to use Type Pairing, go ahead!

Black + White

We have crafted each template and layout in white and black color schemes. 

Learning Resources

In each section, we have included tips and tricks and links to valuable resources. 

Device-ography

The templates are responsive so you can set your type at the three (or beyond) Beaver Builder breakpoints.

We made it free!

We care about you using the best tools you can to make your designs spicy! We made this tool free!

Headlines + Paragraphs

Section One

Hero Icon 1

The Headline and paragraph is the meat and potatoes section. Setting this properly will take care of most of your type design needs. Use CSS, or Customizer.

02. Headlines & Paragraphs

White Version

Black Version

Headlines & Paragraphs

Edit Baseline Grid Module Here
CSS Magic Module + Body Fixed: ON

Want to work with REMS? Set your HTML to have your root font size in PX's. [ html{font-size:19px;} ]
Use this REM Calculator ⟶

Working with a modular scale for your type is harmonious beauty!
Use This Modular Scale Tool ⟶

A good starting point for line-height for the headline is 1 or 1.1. A wonderful line-height for body copy is 1.5 - 1.6875 ems to start.

Keep character length for body copy to 50 - 75 characters
including spaces per line
depending on type size.
Use This Length Tester ⟶

I love setting web typography. Yo.

"Society is part of the fatal flaw of language,” says Derrida. Debord suggests the use of semioticist Marxism to modify class. Thus, the subject is interpolated into a precultural paradigm of discourse that includes truth as a totality. Now, can you blame unicorns for being baseless paradigm shifters? They fly, yes. But, do they truly sing in the basking of three suns? Nigh.

H1 Playfair Display: 5.854 REM / 1.06 EM   ❦   Body Roboto: 1.25 REM / 33 PX

I love setting web typography. Yo.

"Society is part of the fatal flaw of language,” says Derrida. Debord suggests the use of semioticist Marxism to modify class. Thus, the subject is interpolated into a precultural paradigm of discourse that includes truth as a totality. Now, can you blame unicorns for being baseless paradigm shifters? They fly, yes. But, do they truly sing in the basking of three suns? Nigh.

H2 Playfair Display: 5 REM / 1.24 EM   ❦   Body Roboto: 1.25 REM / 33 PX

I love setting web typography. Yo.

"Society is part of the fatal flaw of language,” says Derrida. Debord suggests the use of semioticist Marxism to modify class. Thus, the subject is interpolated into a precultural paradigm of discourse that includes truth as a totality. Now, can you blame unicorns for being baseless paradigm shifters? They fly, yes. But, do they truly sing in the basking of three suns? Nigh.

H3 Playfair Display: 4.2 REM / 1.25 EM   ❦   Body Roboto: 1.25 REM / 33 PX

I love setting web typography. Yo.

"Society is part of the fatal flaw of language,” says Derrida. Debord suggests the use of semioticist Marxism to modify class. Thus, the subject is interpolated into a precultural paradigm of discourse that includes truth as a totality. Now, can you blame unicorns for being baseless paradigm shifters? They fly, yes. But, do they truly sing in the basking of three suns? Nigh.

H4 Playfair Display: 3.5 REM / 1.18 EM   ❦   Body Roboto: 1.25 REM / 33 PX

I love setting web typography. Yo.

"Society is part of the fatal flaw of language,” says Derrida. Debord suggests the use of semioticist Marxism to modify class. Thus, the subject is interpolated into a precultural paradigm of discourse that includes truth as a totality. Now, can you blame unicorns for being baseless paradigm shifters? They fly, yes. But, do they truly sing in the basking of three suns? Nigh.

H5 Playfair Display: 2.8 REM / 1.5 EM   ❦   Body Roboto: 1.25 REM / 33 PX

I love setting web typography. Yo.

"Society is part of the fatal flaw of language,” says Derrida. Debord suggests the use of semioticist Marxism to modify class. Thus, the subject is interpolated into a precultural paradigm of discourse that includes truth as a totality. Now, can you blame unicorns for being baseless paradigm shifters? They fly, yes. But, do they truly sing in the basking of three suns? Nigh.

H6 Playfair Display: 1.8 REM / 1 EM   ❦   Body Roboto: 1.25 REM / 33 PX

I love setting web typography. Yo.

I love setting web typography. Yo.

I love setting web typography. Yo.

I love setting web typography. Yo.

I love setting web typography. Yo.
I love setting web typography. Yo.

Type Pairing

Section Two

Hero Icon 2

This Type Pairing section is a fantastic way to pair your type options. We use the ideology of thinking of type as personality types. Have fun and make good type!

03. Type Pairing

White Version

Black Version

Font Pairing + Selection

Edit Baseline Grid Module Here

Type pairing can be fun and laborious. But, so worth it. Try to match typefaces within the same era. Try to match typefaces with contrasting or similar personalities. What are you trying to communicate with your type?

Awesome Type Pairing Article ⟶

Bunch of Type Pairing Articles 

Typewolf Lookbook 

PT Sans + PT Serif  /  "Sweet + Sour"

OMG Becky!

About the unicorn, and it's bliss. It's a wonder that is ninth in line, like Pluto. Wonderful yet forgotten. Majestic yet relegated to the last place. Oh, woe to the unicorn.

Noto Serif + Noto Sans  /  "Techy + Classy"

Look At Her...

About the unicorn, and it's bliss. It's a wonder that is ninth in line, like Pluto. Wonderful yet forgotten. Majestic yet relegated to the last place. Oh, woe to the unicorn.

Montserrat + Lora  /  "Elegant Maturity"

Thanos Is So

About the unicorn, and it's bliss. It's a wonder that is ninth in line, like Pluto. Wonderful yet forgotten. Majestic yet relegated to the last place. Oh, woe to the unicorn.

Elsie Swash Caps + Karla Normal  /  "Whimsy + Clarity"

Mean. Snap!

About the unicorn, and it's bliss. It's a wonder that is ninth in line, like Pluto. Wonderful yet forgotten. Majestic yet relegated to the last place. Oh, woe to the unicorn.

Montserrat, Noto Sans, Helvetica, Karla

Quixticle
Quixticle
Quixticle
Quixticle

Playfair Display, Merriweather, Roboto Slab, Elsie Swash Caps

Fox Jumper
Fox Jumper
Fox Jumper
Fox Jumper

Blog Post Design

Section Three

Hero Icon 3

This bonus template allows you to edit a typical blog post boilerplate. This way you can fine tune your type by editing list items or block quotes while seeing the overall relations and readability.

04. Block Quotes & List Items

White Version

Black Version

Blog Post
Design

Edit Baseline Grid Module Here
Quote + List Items CSS Magic Module

Style your typography for blog posts. For headlines, make sure there is good vertical spacing between the bottom of the headline and the start of body copy. Give the top of the headline double the bottom vertical spacing to start. You will see a nice separation.

Have fun with Blockquotes. Add some flourish. Also, these are sometimes called 'Pullquotes'. Remember to use the line length rules from the Headlines + Paragraphs template.

Use the CSS Magic Module to adjust CSS. Then copy those styles in your master stylesheet. Use a special class on the master column to style headlines independent of your master.

Mr Goldblum's Dilemma

This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. God help us, we're in the hands of engineers. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

God help us, we're in the hands of engineers. What do they got in there? King Kong? Must go faster. What do they got in there? King Kong? Jaguar shark! So tell me - does it really exist? Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?

Another Beautiful Point

Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

  • Hey, take a look at the earthlings.
  • Goodbye! Yes, Yes, without the oops!
  • God creates dinosaurs.
  • God destroys dinosaurs.
  • God creates Man. Man destroys God. Man creates Dinosaurs.

In Closing

You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Must go faster... go, go, go, go, go! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? What do they got in there? King Kong?

BB Typesetter Official Logo Icon

Download this template now to get your web typography looking fly!

Share This Project!