Dealing with font sizes and typography

typography

When you’re going out and your designing a webpage you’re going to deal with text and font sizes throughout your website and the question is how do you determine those things and what is the standards when designing a website?

One of the up and coming trends is having larger fonts. So the best way to go about determining the font sizes you should use is to go out and visit websites that you like or discover using sites such as Best Web Gallery or Awwwards to find websites that have content.

So lets say I found Design Feedback – This one reads very well; like the copy that they have on their site looks good because aesthetically and intuitively I can read this very well. I wouldn’t even know what font or size this is when landing on the page but I usually use the WhatFont browser extension to get font information about the text I hover over.

Some of my favorite sites which I use for inspiration include Flickr – this site looks very nice. I love the way this is laid out. MailChimp – I came across this site and I thought this is pretty good so I would keep it in mind for future projects. And Apple – Here’s the iPhone 6 page with very large headers, font sizes and colors which are easy on the eyes. I like the look and feel as well as the line height spacing which gives the content some breathing room.

“There is no right or wrong in choosing a font size to mimic. It all depends on the project. All I do is go to websites and choose what looks good to me and what doesn’t.”

For example, here is a Mint – personally for me, the text is pretty small and hard to read. Though this website is done by top designers and is a popular app which I use, this doesn’t look well. Not that it’s bad, just for me personally and my taste I’m not going to choose this font size to mimic because I don’t like the way it reads.

Another site, SquareSpace – It’s a very well designed website but I’m not going to choose this font size because it looks a little too small to me. The brand designer for this particular website choose to go for this smaller font but there is nothing wrong with that. There is no right or wrong. They’re not going to get a bad grade in design. It’s all personal preference, and so for me I would go for something a little bit bigger like the Flickr page.

Here’s another one, SquareUp – They have a really cool website with top designers and very well company product and brand but here the font size looks a little small. There is no right or wrong in mimicking this font size, you can very well do it but for me personally this is too small. I would rather go with something like the size of Apple.

So there is no right or wrong, there is no number one standard that you should follow. Just go based on your gut feeling and based on your research on top designs out there, with something that works for you as a personal preference.

It is also important to determine what type of typography to use. The Serif fonts are ones like the Times New Roman font that have the little twigs at the end that little designs at the ends of the fonts. The San Serif fonts are the ones without this. I like to stick to San Serif fonts such as Arial, Helvetica Nue, Open Sans, Gotham, Roboto and Proxima Nova for my designs.

Designing font sizes

  1. Search for a font type and size to mimic. I’m going to go with the Flickr site
  2. Grab a screenshot of the copy content (keyboard shortcut: Print Screen on Windows, cmd+ctrl+shift+4/drag the cursor and press the spacebar on Mac)
  3. Open up Photoshop and create a new canvas project by going File > New and setting the document to 1600px in width by 1200px in height
  4. Paste your image into the project by clicking on Edit > Paste (keyboard shortcut: ctrl+V on Windows, cmd+V on Mac)
  5. Now go back to the webpage you took the screenshot from and copy the text
  6. Go back over to your Photoshop file to draw out a text box over the text you’ll be mimicking and paste the copied text into the text box
  7. Play around with the alignment, size, leading, tracking and style to get as close to the screenshot as possible
  8. And that is it. You can delete the screenshot and use this as your font standard

Leave a Reply

Your email address will not be published. Required fields are marked *