Arial and Helvetica and Georgia, Oh My! The World of Typography, and Why It’s Important

We’re constantly reading text on webpages, but there’s more to this text than what meets the eye. In fact, a great decision web designers face is determining what the best font will be for when the site’s content does, in fact, meet a reader’s eye.

Various typefaces

 

Each of these is an example of a different typeface that you can compare at flippingtypical.com

Any and every website has words. There are 3 terms that one needs to be able to distinguish between when determining a design for written content:

Typography : The style, arrangement, and appearance of letters, numbers,
and symbols.

Typeface : A design of lettering that can include multiple variations (i.e.
bold, italic, medium, large, etc.)

Font : A particular size, weight, or style of typeface.

Utilizing the appropriate fonts of appropriate typefaces to ensure a cohesive site typography is crucial to the success of a website.

Font is incredibly important because it can change how well your readers are able to read your content, how fast they are able to do so, how they perceive your website as a whole, and even their opinions about the content they are reading. Have you ever opened a website and immediately closed it because the words hurt your eyes? I have. These sites lose readers because they do not choose effective fonts to display their most important content in.

Good typography makes the act of reading effortless, while poor typography turns users off.

Quick sprout editorial

Choosing a typeface

When choosing a typeface or font for your own website, there are 10 important things to consider:

  1. Keep the number of fonts used to two – three at most
    If you use too many fonts on your website, your user will be overwhelmed. You should use your font selection to reflect the content that is being displayed – one font should distinguish titles and headings, a second font should distinguish bodies of text, and maybe a third font to distinguish buttons or extras that do not fall under titles or paragraphs.

  2. Use standard fonts
    You should be using fonts that your readers are expecting to see – or at least, fonts that they aren’t surprised to see. There may be instances when a company creates a custom font to design a logo or even titles, but paragraph content should never be in any sort of outlandish typeface that might make the reader more preoccupied with the design than with the information you want them to know.

  3. Limit line length
    Just as with whole paragraphs, the shorter your lines of text, the easier a time a reader will have going through your content. If you have a complicated or unusual font coupled with lines of text that are too long, you have a recipe for disaster. Even if you have an easy-to-read font, no reader will want to waste their eyes scrolling left to right for an unnecessarily long amount of time.

  4. Choose a typeface that works well in any size
    While a certain typeface may look fantastic when it’s blown up on a large computer screen, that same font could be impossible to read when shrunk on a mobile device. You type-ically can’t go wrong with sans-serif fonts, but typefaces that mimic handwriting or script are the hardest to discern in small sizes/on small screens.

  5. Use fonts that have distinguishable letters
    Is it an “I?” Or an “L?” With those letters all running together, is that two “n’s?” Or one “m?” These are issues that a reader may encounter when reading a font that does not have distinguishable letters. You always want to make readability a top priority when designing your website content, and ensuring that letters are distinguishable is an easy way to make reading easier for your users.

  6. Avoid writing in all caps
    THIS IS A BIT OBNOXIOUS TO READ. COULD YOU IMAGINE HAVING TO READ LONG BOUTS OF CONTENT LIKE THIS? No. You could not, and you should not. Writing in standard capitalization case provides contrast between the letters and allows users to read quickly. You’d never read a book or an article in all caps, and so you should never write a sentence or more on your website in all caps either.

  7. Maintain reasonable distancing between lines of text
    Websites are not small-print books, nor are they double-spaced research papers. Rather, website content should be appropriately spaced so that a user is able to easily read the content without it feeling too squished or too far apart.

  8. Ensure there is contrast between font and background color
    Without effective contrast, there is no way a user will even be able to see the words you have written, let alone read them. Bright backgrounds and dark text, (or vice versa) are the best combinations. Again, if the text color and background colors are too similar, it will be virtually impossible to read any content.

  9. Don’t use red or green text colors
    This has all to do with accessibility. For users with red-green colorblindness, using red and green text colors will render the text indistinguishable. You always want to make sure to tailor your site to as many users as you can, so it’s best to avoid these colors altogether – at least in terms of the main text.

  10. Avoid blinking text
    This again has to do with accessibility. Blinking text is prone to causing seizures in those who suffer from epilepsy, and is just plain annoying to those who do not have epilepsy. Again, better just avoid it altogether.

Avoiding a typeface

In addition to those 10 things to consider, there are 7 deadly sins to avoid when choosing a typeface:

  1. Don’t use tacky fonts
  2. Don’t use fonts that are hard to read
  3. Don’t squish your words together
  4. Don’t use too many font designs
  5. Don’t use random font sizes
  6. Don’t use random font colors
  7. Don’t fill necessary white space

The moral of these don’ts is that every decision you make in terms of typography should be done with a deliberate purpose that only acts to enhance your website’s display and usability.

So… Which typeface will it be?

Now that you know what to think about, (and what to avoid) when choosing fonts for your website, let’s look at some of the actual typefaces/fonts you have to choose from.

Some great resources for finding fonts are as follows:

Flipping Typical – This site is one that allows you to type in text and see it appear in lots of different typefaces all at once!

Google Fonts – Like Flipping Typical, Google Fonts allows you to type in text and compare it across multiple fonts. In addition to this, Google Fonts allows you to copy a link or a style to embed a specific font into your own html/css. You can also search for specific fonts using their advanced categories and font properties.

The homepage of Google Fonts

 

The homepage of Google Fonts

FontPair – This site provides lots of font pairs that work well together; making sure your site typography is in balance and the fonts you’ve chosen don’t clash brings you one step closer to a perfectly readable site!

The homepage of FontPair

 

Featured fonts on FontPair

With all of these resources (and more!) at your disposal, it should be no time at all until you find a perfect font for your perfect website.

This Post Has 7 Comments

  1. Hey Jessica! Your blog post does a great job of making a seemingly boring topic interesting to read. When you think of fonts, it doesn’t seem like a something that should be thought about too much, but there is a lot of information and research on fonts. I remember watching the movie on Helevtica a few semesters ago and being surprised at how intrigued I was. If I were to have written this blog post, I would have been intimidated by how to lay out the information, and how to use visuals effectively, but you did an excellent job, especially with the images. I found this article https://creativemarket.com/blog/10-fascinating-scientific-facts-about-fonts that explains some really cool facts about fonts and how they can even manipulate people’s perceptions on things like trust, length and difficulty of a task written in different fonts, and a person’s skill level, go check it out!

  2. Hi Jessica,
    Your blog post was really enjoyable to read! I loved your fun but professional tone throughout (and definitely appreciated your type-ical pun). I liked how you defined the differences between typography, typeface, and font at the beginning of your post as I tend to get typeface and typography mixed up. It was nice to understand the terms’ relationships to one another going in to your post. Your use of a numbered list with bold text for each typeface tip was a perfect way to organize that information and demonstrated the importance of choosing a font. I also liked how you recommended several typeface websites at the end of your post. It was a great way to wrap up your discussion. This post made me think about how fonts can give off a certain vibe depending on their connotations. For example, the infamous comic sans can make a website feel incredibly unprofessional. I found an article that detailed several tips for designing your own typeface (https://www.creativebloq.com/typography/design-your-own-typeface-8133919#:~:text=%20Font%20design%3A%2017%20top%20tips%20to%20create,to%20start%20by%20digitising%20your%20own…%20More%20). It was interesting to learn about the complex process that goes into designing a typeface, from research and reflection on the ways in which the font will be used to the actual design process of the font. This article suggested that you start by drafting the font by hand rather than using a computer. I didn’t really know the details of designing font before, so it was interesting to learn more about it!

  3. Jessica,
    I never found typography to be a specifically interesting topic, but you’ve made it something simple and relatively enjoyable to read about, so congrats. The blog post was organized well and delivered content without being overly detailed for the sake of filling space. I think the list of 10 things to consider when choosing a type face was extremely helpful and decently summed up the entire post. I think you did a good job finding and utilizing images that stretched across the entire screen and didn’t create awkward white space. I think the “seven deadly sins” that nobody should do when experimenting with a typeface could have been elaborated on a bit more, but there was a link provided that allowed for that information to be shared if someone were interested in that aspect of choosing a type face. Similar to these seven deadly sins, I found a website https://cgfrog.com/5-elements-bad-typography-designer-avoid/ that outlines five elements of bad typography. There seems to be a lot of overlap between these examples and the “seven sins”, but I think this website adds interesting and funny examples of bad typography that the other site didn’t include to help drive the point home well.

  4. Hi Jessica! I really enjoyed this blog! This was a topic I learned about last semester in a different writing course, and frankly one that was presented in a very boring and confusing way, but you managed to present it in a way that was quite the opposite. I found that your use of bold typeface and numbered list helped break important sections up and allowed the reader to truly digest the information. It’s amazing to me how much truly needs to be considered when it comes to choosing a font. We need to not only consider our audience, but even how the text can be manipulated like you mentioned through different sizes and such. Through creating our website and working with the Washington and Hungarian teams it reminded me how important it is to ensure that your font is accessible to your everyday users as well as those with accessibility issues who may rely on certain fonts more than others. With this and when creating our website I have looked at multiple webpages that break down the best fonts to use: https://www.boia.org/blog/best-fonts-to-use-for-website-accessibility This discusses how serif fonts are preferred for printed items, but san-serif is preferred for webpages.

  5. I love this blog post, Jessica!
    As someone who loves to type in Garamond, I know what you mean when it comes to finding the perfect font. In terms of your blog post, I would change nothing about it. You have done an excellent job emphasizing what you want the reader to pay attention to. Especially when looking at your lists. I love that the focus is bolded and italicized so that the reader can’t possibly miss it. This is a great utilization of what you have explained within your own article. I also want to say that when I look at websites, I also try to take notice of what fonts they are using. If it seems too abrasive, I leave because I don’t want to have to strain my eyes in order to get information. If anything, this is probably prominent in websites that sell clothes or other items. I believe they try to create an image of themselves and think “funky font” is the way to do it. Font I believe is also a huge part of accessibility. Many people might have a visual impairment such as myself. While mine is simply needing glasses to see, it could be much worse for others and an odd font will only deter them from coming and staying at the website. Here’s an article that discusses typeface and accessibility for websites:https://webdesign.tutsplus.com/articles/designing-accessible-content-typography-font-styling-and-structure–cms-31934

  6. Hey Jessica,

    I have always been a nerd when it comes to the font choice. I think a font says a lot about the content, and the choice of font could greatly impact how the viewer interprets the content! The font is the first thing that is noticeable about the text after all. It is almost like a hero image of a website, it tells the reader the “vibe” of the content. That being said, I had no idea that these websites existed and now I am really excited to try them out! The font that intrigues me the most is Helvetica, because I watched a documentary for it in the Document Production and Design class. I just read a brief summary to remind myself. The Helvetica font was made to be a neutral font that was so perfectly bland yet not too simple that you would lose interest. It was developed by a Swiss designer in 1957 and has since been widely used. People have tried to adjust it to make it “perfect” but no one has figured out how since how it is is quite perfect already. https://imagine-express.com/the-history-of-helvetica/

  7. This blog is so important and very valuable to me because I do not spend a lot of time deciding on fonts and typefaces. Mostly because the overwhelming amount of choices we have makes me weary to even try. I found two fonts I like and I stick with those. (Not great, I know.) I really enjoy the visual design of your 10 tips to remember. Your use of bold and italic is not something I would normally use as it seems like a lot but I think it divided your subheadings and text very nicely. Your conversational tone of writing is also so well done. I like that you give an example of a type face by actually using it, then analyzing it in the next sentence. I found this article that connects the importance of typography to accessibility. https://timwright.org/blog/2017/02/04/dyslexia-typography/#:~:text=font%20types%20have%20an%20impact%20on%20readability%20of%20people%20with%20dyslexia.&text=Mostly%2C%20we%20can%20create%20an,out%20letters%20in%20uppercase%20words. I see you talk about blinking text which is important. This article talks about how fonts can have an impact on disabilities, specifically dyslexia. There are fonts to use that can help or hinder the audience in this respect and deserve to be investigates.

Leave a Reply

Close Menu