Web – Blog Post 2: Type

Part 1

  • What are the differences between setting type for print and web?

Setting type for print differs in setting type for the web. Web type isn’t as controlled as print type. With print, you pick a font and it stays there. With web fonts, the viewer has the capability to change what he/she sees. They are able to do things such as enlarge or reduce the size, as well as change the color to increase contrast.

  • How should type be set for the web?

When type setting for the web, it is critical to try and stick to one base font, and one display font. Just because we, as designers, have the ability to use any multitude of fonts, doesn’t mean that we should.

As creativebloq says, “Stick to fonts designed for purpose,” and “Choose appropriate fonts.” This just makes sense. If you see a display font used in body copy, or a slab-serif used in a women’s boutique website, it won’t work.

SMYCK mirrors these beliefs, and also reiterates time and time again, “There is no reason nor excuse why websites should still get away with bad typography and therefore bad readability.

  • Are there any restrictions to setting type for the web?

According to CreativeBloq, the ideal print line length is between 45-75 characters. This would be the ideal width, as it creates an easy transition to the next line. The same holds true for web. CreativeBloq recommends that the line length of a column should remain under 80 characters.

SMYCK goes a little more into detail and talks a little about line height as well. They give a basic formula to give you a ballpark line height to work with. They say to take whatever your font size is and multiply it by 1.5. They also give a heads-up saying that headlines usually need less line height.

SMYCK is also adamant is saying, “Do not use justified text for paragraphs.” This is because justified text on a web page can make huge gaps between words and can become unruly if there very narrow textblocks.

  • What benefits do you see to using @font-face and web fonts?

CreativeBloq is quoted talking about not having @font-face and web fonts saying,

“This strictly limited palette of fonts led to a depressing homogenization of typography on the web, depriving web designers from the joys (or horrors) of a full set of fonts to choose from.”

SMYCK does rave about how these services have helped the web design community in recent years, but also states that it is important to check the fonts you are using. They are quoted as saying,

“For free also means that it is really hard to find a good quality font there – but it is not impossible and especially when you are starting to experiment it might be just right for you.”

Reading about how these font services changed everything for these web designers, I see great benefits from them. The ability to break those standards and create something that isn’t Helvetica or Courier is wonderful.

Part 2:

Here are some quick reviews of a couple websites I think use great typography for the web. They may not be perfect, but they are a lot further along than a lot of the stuff found on the web today.

Gentlemangiant.co

The first one I want to talk about is gentlemangiant.co for its structure and cleanliness. It is evident in the blog section; just how serious Jason Eithun (the creator of the site) takes typesetting for the web. Here is a picture to symbolize the general feel of the blog posts. gentlemangiant.co blog

Not only is the font light and easy to read, but it is also written in a way that appeals to the viewer. It has a laid-back feel to it, while the viewer still feels like he/she is learning something new.

Notice how the subhead isn’t distracting the body copy, and yet still holds a prominent spot of visual hierarchy. Even in the body copy itself, pictured below, the bold words don’t create a distraction while still showing emphasis. It is a good balance that creates a clean and easy to read feel.
gentlemangiant.co body text

Engadget.com

The second website I want to talk about is engadget.com for its layout and use of type. Engadget has a strong grid structure, which is evident in its blog style postings.

Engadget Body Copy

The body copy for each post is a serif, which for the home page seems a little off since they only put a snippet of the full story. It does however make sense for the rest of the pages since the body copy can get pretty lengthy and the serifs help the viewer navigate the lines of text easier.

engadget header

In all facets of the site, the headers seem a little larger than they need to be, although it doesn’t create a major distraction. The body copy itself is a solid size, and creates the feel of reading a book, or magazine, more than a website. The same couple fonts are used throughout the site, which creates a consistent feel of repetition.

Sources:

http://www.creativebloq.com/typography/rules-web-typography-learn-rules-type-setting-web-2131890

http://smyck.net/2013/01/26/web-typography/

http://gentlemangiant.co/blog/2013/8/fglgi8zzywb12c2jjk69o3bdro7kds

http://www.engadget.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s