Typography Do’s and Don’ts

The typography for this theme is kept simple, but we do have some tips for typesetting. One of the things that Gutenberg WordPress has a hard time with is providing enough vertical spacing on a page. Gutenberg breaks every paragraph and headling into a separate block making it hard to have additional space after a few paragraphs of body content.

Tip 1: Vertical Space

We have built-in some vertical spacing into the type styles and have provided some “spacer” blocks for you to use to insert vertical spacing if you find you need even more space. Generally, 48px of space is expected between different blocks of content.

Tip 2: A headline and Introductory text make a good team and provide clarity

Heading this is a headline. It is a heading 2

You can follow your headline with some larger introductory content. This content is a regular paragraph but uses the larger “intro” style. You can load the “intro” block from your block library and then “convert it to Regular Block” and change the content. Alternatively, you can assign the “intro–left” class to a paragraph.

This is body copy. It is just a paragraph of placeholder text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget velit aliquet sagittis id consectetur purus ut. Ultricies mi quis hendrerit dolor magna eget. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Vitae ultricies leo integer malesuada nunc vel. Nullam ac tortor vitae purus faucibus ornare suspendisse. Feugiat nisl pretium fusce id velit. Risus viverra adipiscing at in tellus integer. Accumsan sit amet nulla facilisi morbi tempus iaculis. Vitae tortor condimentum lacinia quis vel eros donec. Morbi tristique senectus et netus et malesuada fames ac turpis. Varius duis at consectetur lorem donec. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur.

Type “intro” in the block search and select “Intro Text”
Convert your “Intro Text” block to a “regular block” so you can edit the text.

Alternatively, you can assign the “intro–left” class to a paragraph of text by typing in “intro–left” in the Additional CSS Class name on the right. (that is intro followed by 2 hyphens left with no spaces)

Tip 3: Don’t stack your headlines together

Headline-3 UVM Named the #4 Green School

Headline-04 The Princeton Review’s annual guide profiles 413 colleges with strong commitments to green practices and programs, all “outstanding institutions for students seeking to study and live at a green college,” says Rob Franek, The Princeton Review’s Editor-in-Chief. The ranking looks at criteria including academic offerings and initiatives, campus policies and practices, and green-career preparation for students.

DO follow your headlines with “intro” copy (reusable block: intro) or regular body copy.

UVM Names the #4 Green School

The Princeton Review’s annual guide profiles 413 colleges with strong commitments to green practices and programs, all “outstanding institutions for students seeking to study and live at a green college,” says Rob Franek, The Princeton Review’s Editor-in-Chief. The ranking looks at criteria including academic offerings and initiatives, campus policies and practices, and green-career preparation for students.

Skip to toolbar