Optimise Global Typography for Author Websites

Introduction

Typography plays a crucial role in crafting a professional and engaging author website. This lesson focuses on optimising global typography settings in Breakdance. You’ll learn how to select ideal fonts, adjust base font sizes for various devices, and fine-tune heading ratios to enhance readability. By tailoring these settings, you ensure a pleasant experience for readers, making your website stand out and effectively communicate your author brand.

Heading and Body Font

By default Breakdance is set to use the System Font of the visiting browser. That is the font which anything in an application set to use System Font will use. It’s what the OS dialog boxes and file browser and such use.

At time of writing the system fonts are San Francisco Pro Text for Mac, Segoe UI for Windows and Google Sans for Chrome. 

Breakdance also offers a wide choice of built in fonts that can be applied at the global level for both headings and body text.

A common, and highly readable, font pair for setting up websites is OPEN SANS and I recommend this if you’re unsure what fonts to use.

Dirk is writing Adventure Thrillers so I could go for a pairing often found on outdoor activity websites

Let’s change the HEADING FONT to OSWALD and the BODY FONT to QUATTROCENTO

Breakdance makes those changes right away not just on this page but on every heading and piece of body text across the entire site no matter how many page or posts there are.

If I decide I don’t like how this font pairing looks I can change to another font using the drop down boxes or click on the dot beside the setting to delete the custom selection and return to the default.

For now I’m going to use OPEN SANS but as you’ve seen it’s straightforward to try out different fonts for the entire site and roll them back using the Global Typography settings.

Base Font Size

It can be difficult to engage visitors to an author website with long form text. Having a target audience of readers does make it easier but it’s up to as, as the website owners, to make the reading experience as pleasurable as possible.

After selecting our website fonts the next task is to set the base font size. This is where we can give Breakdance, or any page builder, a helping hand by guiding it to change the font size based on the viewing device.

In an earlier lesson we configured the root font size, the rem, to equal 10 pixels.

So what happens when I set the base font size to 1 rem?

That paragraph of text is going to fatigue the readers eye. And as an author website that is going to have a lot of long form text we don’t want that.

Let’s see what happens when we set the base font size to 2 rem (20 pixels in old money).

And let’s look at that without the ELEMENT or STRUCTURE panels.

That looks pretty good on desktop but lets use the responsive viewer to see what those headings and text look like on other devices. (DEFAULT RATION is 1.25)

I’ll use the RESPONSIVE VIEWER to see what this looks like on a mobile device.

It’s pretty good until we get to phone landscape.

With Breakdance we can overcome that problem using the RESPONSIVE SETTINGS for the GLOBAL FONT.

I’ll go back to the desktop view, open global settings,and back into typography.

When I hover over the BASE SIZE setting I’m shown a DEVICE VIEW that defaults to to the current device size we are viewing.

Right now the BASE SIZE is set to 2 rem and that will cascade down to all the device breakpoints.

But it doesn’t have to.

Let’s change the BREAKPOINT VIEW to Phone Landscape. That text looks cramped with very short lines. 

• I’ll change the BASE SIZE for this view to 1.6 rem

What we are aiming for here are lines of text that are approximately 65 characters or 2 and half times the alphabet in length. Lines that are this long reduce eye fatigue on the visitor making them more likely to keep reading especially on mobile devices.

That looks good at 1.6 rem but what about Phone Portrait?

It seems like we lose a bit of line length at this size.

• Let make the base font size on Phone Portrait 1.5 rem

I like that better and because we are using rem it’s going to scale for visitor who want to make the text bigger. 

With Open Sans as my Base Font font I’ve used the following sizes for what I feel will be the best reading experience on each device.

• 2 rem for desktop, tablet landscape and Tablet Portrait

• 1.6 rem for for phone landscape
• 1.5 rem for phone portrait

Don’t feel chained to these settings. You may be using a different font or layout sizes so play around to find what you like best. 

Base Ratio Settings

We also want our headings to look good on any device. You may have noticed that as I moved down through the smaller view sizes our headings began to look less professional.

We don’t want that.

Breakdance Global Settings come to the rescue again.

Let’s go back to desktop view.

Ratio settings control how much bigger Each HEADING SIZE is to the one before it. The default ratio setting is 1.25. So each heading is 1.25 times bigger than the one before it starting with H6 which takes it’s font size from the base font settings which are current set to 2 rem on desktop.

If I set the RATIO to 1 all the heading sizes are the same.

If I set the RATIO to 2 you can see that HEADING 5 is twice the size of HEADING 6 and that HEADING 4 is TWICE the size of HEADING 5 and the rest quickly becomes unusable.

So if a RATIO of 1 is too small and 2 is too big our ideal ratio is somewhere in between.

Let’s go back to the default of 1.25 making each HEADING 1.25 times bigger than the one before it.

That looks pretty good.

What about on a Mobile Phone?

That’s not terrible but we can tweak it for a better display on smaller devices.

Just like for BASE SIZE we can make adjustments for different device sizes.

• 1.25 ratio on desktop
• 1.25 for tablet landscape
• 1.2 ratio on tablet portrait
• 1.18 ratio on phone landscape
• 1.15 ratio on phone portrait
• Click Save
• Go back to Desktop view.

These are the ratios that work for Open Sans and the brand I’m building on this site but adjust for your choice of fonts and branding.

Summary

In this lesson, you mastered configuring global typography in Breakdance. From choosing fonts to adjusting base sizes and heading ratios for different devices, you’ve created a website that’s both visually appealing and reader-friendly. By optimising these settings, your author website is primed to provide a professional, engaging experience for visitors, enhancing their connection to your work.