Emotive fonts

Choosing the right font for the job is pretty easy, scroll down the font list in your customizer or app until you find the one you like, no?

Even professional designers in a hurry might do this, e.g. if doing a quick favour or a job for next to no money or they know the client is indifferent.

But there are many considerations that can improve your choice of typography.

Choosing type is an resource over at https://fonts.google.com/ which is worth more than a quick skim through, covering the range of factors that might influence a more considered choice.

It starts with some easy ideas, such as emotional response and trust.

The infographic above combines fonts and adjectives that each type connotes.

Much berated, Comic Sans is perfect in many contexts, for a kids poster, an unpretentious note such as a shopping list and actually can work pretty well in a comic too. But as the author of the article suggests, announcing scientific breakthroughs or anything too serious may not be appropriate, unless you do it with tongue firmly in cheek (e.g. using comic style for a how to or to show off your design ability). A narrow range of brands would work with Comic Sans, possibly. For fun design a logo for a fictitious brand using Comic Sans, it is a bit harder than you think.

But the question is, if your template only comes with 1 or 2 typography options, how do you add another font? Well, you can use a number of so-called web safe fonts, but the number of web safe fonts is somewhat restricted, because they are operating system dependent. They might not work on someone else’s computer or on your mobile device.

Computers have developed with a variety of standards to interpret text, which means that little hacks are required to ensure that the typeface you see is what the author intended you to see, more or less. The hack in this case is to substitute a suitable alternative html font. The tool below (an external website) demonstrates this interactively. So, if Gill Sans cannot be found, the browser is instructed to substitute a generic sans-serif font.

The number of fonts available is quite limiting, if you need to choose from thousands of potentially available fonts. Well good luck on that one. More choice is not necessarily better, but that would require another sixteen chapters.

Before you run to activate the Google Fonts plugin, an advanced user can also add a bit of code to their customizer settings and set a font from the Google repertoire without a plugin.

In our example we created a Cover Block with a friendly bold font to announce we have, well er … Creative block! To do this, we went the advanced section of the Block holding the text “Creative block” and added a new style class: creative-block in the requisite box.

Creative Covers: How to

We then targeted the class in the Customizer css section, making sure to add in first the @import statement. the class is distinguishable by the dot and the modifier contained within the curly braces. If you have multiple modifiers (to choose a heavier or lighter font weight) they will need to be separated by colon symbols.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

.creative-block {
	font-family: Lobster, sans-serif;
}

To change the fonts globally needs a little more care, as additional instructions may be needed to override the stylesheet. A little trial and error is generally required to get everything covered as you would like.

In the following example, we’ve decided that the rigid serif font is a little harsh and clinical for our long form paragraph text on this site so we’ve switched to a traditional looking serif font: GB Garamond.

The instruction as before means that itdegrades gracefully should for any reason the Google font be unavailable (e.g. someone shut down the parts of the internet in your country).

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Lobster&display=swap');

p {
	font-family: 'EB Garamond', serif;
	font-size: x-large;
}

There is a reason why the template designer selected just 1-2 fonts for your template. It just works.