Web Typography | Blog Post #2

The use of typography on the web is very important. With all the distractions the internet has, there needs to be some order to the chaos of information the web has to offer; That’s where typography comes in.

Why Typography Matters?

One of the blogs that I visited wrote an article about why type is important to the web. Typography is important because it can create a mood or feeling for that website depending on the font chosen for the site. They describe web typography as information design because the web is mostly made of text and we need typography to sort this information and create hierarchy for the reader. They break it down with two terms: Macro-Typography and Micro-Typography.
They define the terms:
Macro-typography, which comprises of overall text structure of the document.
Micro-typography, which covers the smaller and much detailed aspects like the font type, line-height and spacing etc.

Another article I read is from the same website but touches on The Eight Important Factors of Good Web Typography. It goes on to reiterate what the first article says about how typography is important because it creates visual hierarchy and makes text easier to read. I found this article helpful because it gives advice and important things to consider when designing a website yourself.

The last article I read was How to Use @Fontface. This article talks about web designers used to face the challenges of designing a site with only a limited choice of web safe fonts. But now there are some services that allow designers to use the fonts they want in their designs. Among those there is one site that is being developed that will solve all font compatibility issues between browsers called @fontface. The way to use @fontface is by implementing it through a few lines in CSS.

This is an example of how to use @fontface in CSS.


The benefits in using @fontface and web-fonts are that when you design a website and choose a specific typeface, every browser will be able to display it, so everyone that views the site will get the same experience.

Web vs. Print

The differences between designing for the web and designing for print are two very different things. When setting type for a magazine ad, billboard or flyer you have to attract the viewers eye and be clear and to the point in a matter of seconds. Designing for the web, we have to consider that there is a lot of information to organize and it is much harder for the viewer to read on screen than in a magazine.

An example of a website that I thought had interesting typography for the web was Coldplay’s website.
I chose this site for a few different reasons. I like the overall look and feel of the site created by typography, illustration and color. I think the hand rendered type for the subtitles contrast well with the serif typeface used for the body copy of the blogs.

Another site that I liked and thought the typography was really interesting was justdot.gr
The illustrative type really works with the concept of their website. Even though the background looks like sketches and equations on a chalkboard. All the information is easily organized and readable by the use of grids and two different typefaces to show hierarchy.

Advertisements

One thought on “Web Typography | Blog Post #2

  1. Well done. You blog posts could be enhanced with more visual hierarchy. I suggest reviewing your content and look for ways to break up the text into smaller chunks and use additional sub-heads. The page will be more scannable and your reader will have a better understanding of where one section ends and another begins.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: