I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I’d test a new one out every two weeks. Computers stole this joy from me with font.
Well, kind of. My feelings towards ‘handwriting’ just sort of transferred to a digital screen and I found myself just as emotional about fonts as I was handwriting. Thankfully, in my exploration of this topic in the design world, I found there are other people who are physically offended by bad fonts.
Mikael Cho, Unsplash founder, wrote the awesome article Fonts Have Feelings Too, discusses how font (and layout) can actually affect our emotions. He found a scientific study by Kevin Larson which actually backed it up as well! His results found that people who were exposed to well designed layouts had higher cognitive focus, more efficient mental processes and a stronger sense of clarity.
"People exposed to well designed layouts have higher cognitive focus and a stronger sense of clarity."
As you might've guessed, today's 'Dear Developers' article is an introduction to fonts. It's part of a series of posts about my journey in learning to code using the available tools on the wonderful world wide web. So far I'm still in the early beginner stage, but it's essential to lay down the basics right but the end goal is to have my own prestige website.
I picture font as the visual embodiment of language. It’s responsible for representing personality, drawing the reader’s attention to the right parts of your screen, and if done badly - you’re more than likely going to be driving people away.
So how do we define a font exactly? We’re seeing words like ‘typeface’ and ‘typography’ being tossed around alongside it constantly, but what do they all mean.
"Looking at some discussions between designers, font is not necessarily the end result of the typeface's appearance but is the item or package that can be bought, downloaded or stored in a box. That font is usually a package for a typeface."
However, most of the time the two are used interchangeably but there is a common understanding that a typeface is particular design of type, whilst a font is a type in a particular size and weight.
You use font to generate letters in a given typeface.
I’m a words person and have strong belief in the impact they can have on the reader - the visual presentation of text can completely change its meaning. Something to seriously consider when it comes to designing websites, you need to think about the message you want to bring across and choose wisely. Read between the lines people.
The basics
Starting with the basics, the property for changing the font to one a little more fancy is font-family. Codecademy outlines that it’s maybe best to limit your number of typefaces to three, you know, for design’s sake.
Two of the first things to know about font in CSS; the default will always be Times New Roman and fonts you select will only be used if the reader's browser supports it.
Typography (big word for the practice of typefaces) has been studied for quite a long time, which as a result has led to the classification of two types of fonts that you should know about.
- Serif Fonts: These babies have fancy additions added to the ends of the letters. They look great in print and are also ideal for reading long copy. Examples include the likes of Georgia and Times New Roman.
- Sans-Serif Fonts: These fonts have no stylistic additions to the ends of the letters - those that are commonly used might be Arial or Helvetica.
If we were to choose Georgia as a font for the paragraphs in our CSS code it would read as the following.
*Note, if the font’s name is made up of two words you should enclose it in speech marks.
"One thing to remember when you’re thinking about typography, or any design really, is considering accessibility."
One thing to remember when you’re thinking about fonts, or any design really, is considering accessibility. Technology is constantly changing and being updated, believe it or not there are people out there who might not have the same number of fonts saved on their device as you. So if you were to select a font in your CSS codewhich isn’t supported on their computer - your font will resort back to plain Times New Roman. No offence Times.
To get around this, you’ll need to select a fallback font. Like this:
The CSS rule above explains that for each main heading the font should be Georgia, but if that font is not available, it should select Times. By adding ‘Serif’ as the last option, you are instructing the computer to use whichever Serif font might be available that has been pre-installed on the reader’s computer.
There is another way to increase the variety of fonts available to your reader without having to hack into their computer. Thankfully Google Fonts exists, a huge directory of thousands of fonts which you can link to in your HTML document. It’s quite a similar format to linking your html document to the CSS document.
Using the <link> element again:
Then when you switch over to your CSS document to adjust fonts, you write the value in the same way you would before.
font-family: Roboto;
Great, so we can now switch up the fonts we’re using - but there are several other elements that you can manipulate to get things the way you want them.
Size
The first biggie, you can customise font by altering the size which can be manipulated by using the font-size property and then adding a figure followed by px. Like so:
font-size: 35px
Whilst for some beginners, px might seem like a fairly new term, it’s simply a measurement unit, similar to lbs and miles etc. It was derived from the term ‘picture element’ and basically refers to the tiny dots that make up a computer screen. You might think there is a limit to the number of pixels you can attribute to font size, but you can enter any number, however you might want your text to fit within the display screen. Think about that.
By tech.target definitions it is a unit of programmable color on a computer display or in a computer image.
You’re not limited to pixels though, these measurements also apply!
em: Don’t worry it’s pronounced just as it looks. This measurement is equal to the width of the letter "m" (I like to think of it as equals m). It’s a relative unit of measurement and changes the size of text relative to the parent element's size of text.
%: Also a relative unit of measurement. As a base point, remember that the default size of text in web browsers is 16 pixels. When you use a percentage, it sets the size of text relative to this default. For example, setting the font size to 200% would be equivalent to setting it to 32px.
Line-height
It’s important to remember when you’re making these adjustments the importance of design, and how the adjustments will affect the reader. When changing the size of text, the space between sentences can reduce significantly and lead to undesirable design for reading. You want it to be legible, remember.
This can all be saved by adjusting line spacing with the property line-height. Modifying this means you are manipulating the leading of the font. Imagine each line of text has a ruled line underneath. Line-height measures from the under ruling of the first text line to the bottom of the text on the second line.
Em is usually preferred as it offers spacing relative to the size of the text on the page - but you can use pixels too!
Word spacing and letter spacing
You’ll find that these two are less common to manipulate, but it’s another method of increasing readability.
To increase/decrease word spacing use the property word-spacing and the value is written in em measurements. Bear in mind that the default word-spacing is 0.25em, so to increase the spacing by 0.05, you’d write:
word-spacing: 0.3em;
Letter spacing can be influenced using the letter-spacing property and using the same format.
letter-spacing: 0.3em;
Be bold
To adjust the weight of the text, you can do so by using the font-weight property and the value to bold or normal.
font-weight: bold;
If you’ve linked to a google font, there’ll be a font weight number within the link which can be changed. Font weights can be set to 100 (thin), 200, 300, 400 (normal weight), 500, 600, 700, 800, or 900 (bold).
To italicize use the font-style property, which holds either the italic or normal value.
Changing the case
Regardless of how the text is written out in the html doc you can change the way text appears in css to uppercase or lowercase.
text-transform: uppercase;
Useful if you have a news website where every heading might be in caps
Text-align
Text will always align on the left, unless you tell it otherwise. The text-align property can be set to one of the following three values:
left- aligns text to the left hand side of the browser.center- centers text.right- aligns text to the right hand side of the browser.
There you have it, the basics of fonts. Up till now I've felt that things have been fairly straightforward, however there is this hovering hindrance that there is going to be an awful lot to remember. Which I guess is nothing repetition can't solve.
Codecademy has served me well so far, but as I move on to looking at the CSS Box Model I'm keen to explore another education tool and compare the two. That way I can throw you some analysis of several online learning systems as we go. Help you figure out the best one for you.
Follow me on Twitter for updates on new posts - I'm on holiday the next few weeks so excuse me whilst I reside by a beach in Cuba.
