Just Your Type

by | Dec 28, 2016 | Blog, Branding | Graphic Design

Type and font

Type and fonts

A while back I wrote a post letting you know about all the fonts Divi Builder has for crafting your website. Which is all fine and dandy, but much like tools, fonts are only useful if you know how to use them. Below are a few recommendations, as well as helpful pairings.

bluecross

Serif or Sans?

There isn’t really a “wrong” choice, but it’s best to know which screw you’re working with before you choose a screw driver. For instance, if you’re choosing a typeface for your blog post, some are easier to read than others. Typically a sans-serif (the style without any edges pointing off the ends) will be much easier on read online. In print, the more classic serif fonts will work well.

Rather than handing your reader a flathead screwdriver to strain their wrist on, a drill is much more appropriate for the task at hand. For more in-depth information on the differences and relative merits of serif vs. sans-serif typefaces, read this blog. 

leafblue

It's all about that space

Oddly enough, when you’re looking at letters, their legibility is just as dependent on the white as it is on the dark ink or pixels. Not only does this apply to individual letters, but the space between letters and lines as well. There’s kerning, which is adujusting the space in between letters of an individual word so all of the space appears even. There’s also tracking, which how far apart letters are on a line of text horizontally. And most importanlty for large bodies of text, leading is the space between lines. It’s the difference between this
nospace
…and this. Like a breath of fresh air for the eyes.
space
fleur

Opposites Attract

Whether or not this truism is applicable to romantic relationships, it’s an excellent rule of thumb when you’re matching fonts for your website. Depending on the voice you’re using for your site, choose a style that will apply to titles and move on from there. Fonts for large bodies of copy should balance the titles as well as provide a pleasant reading experience. Below are some examples of font pairings using the Divi-provided styles.

MONTSERRAT

Crimson Text

HEADING ONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta, urna et sodales tempus, sapien nunc ultrices est, nec interdum mauris lacus id erat. Morbi sapien dolor, posuere eget venenatis vitae, condimentum nec risus. Fusce lobortis quam at accumsan ullamcorper.

OSWALD

Open Sans

HEADER ONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta, urna et sodales tempus, sapien nunc ultrices est, nec interdum mauris lacus id erat. Morbi sapien dolor, posuere eget venenatis vitae, condimentum nec risus. Fusce lobortis quam at accumsan ullamcorper.

RALEWAY LIGHT

Raleway Regular

HEADER ONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta, urna et sodales tempus, sapien nunc ultrices est, nec interdum mauris lacus id erat. Morbi sapien dolor, posuere eget venenatis vitae, condimentum nec risus. Fusce lobortis quam at accumsan ullamcorper.

Crimson Text

Roboto

HEADER ONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta, urna et sodales tempus, sapien nunc ultrices est, nec interdum mauris lacus id erat. Morbi sapien dolor, posuere eget venenatis vitae, condimentum nec risus. Fusce lobortis quam at accumsan ullamcorper.

FRANCOIS ONE

Droid Serif

HEADER ONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta, urna et sodales tempus, sapien nunc ultrices est, nec interdum mauris lacus id erat. Morbi sapien dolor, posuere eget venenatis vitae, condimentum nec risus. Fusce lobortis quam at accumsan ullamcorper.

Looking for the right font for your website?

Learn a brief history of typography and the common mistakes to avoid.

just your type 2021new pin

more on this topic