Week 5: Typography & Website Redesign

3 Articles about web typography:

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

1.  Typography on the web is not so different than that in print in which it deals with contrast, size, hierarchy, and space.  When building a website, contrast is important because you want your reader to be able to read your text, but at the same time still capture your reader’s interest.  The author suggests that it is a good idea to not use reversed out text for large bodies of text because it can be difficult to read.  Hierarchy is also very important because it helps the reader differentiate between parts of your pages such a heading, subhead and body.  One way to go about this is to use one typeface, but change the sizes throughout the webpage.  Finally, having negative on your webpage is important because it directs your reader to the most important element – the text.  The author suggests having at least 140% of line spacing.  The one thing that surprised me about the article was the size.  In print, 9 point type is still legible even for older readers, but on the web it seems that 10 point font starts to become illegible.  The author suggests to make body text larger than 10 or 12 px. This could be due to the fact that when staring at the screen for long period of time, the body text will strain the reader’s eyes if the text is too small.

http://webdesign.tutsplus.com/articles/typography-articles/the-culture-of-typography-on-the-web/

2.  Unlike print typography, which has been around for a long time, web typography has only existed for about 15 years; therefore, a lot of web designers do not know how to translate printed text onto the web to make it functional yet still meaningful.  The author suggests treating text as a user interface where the most important element on the webpage is the body text instead of the background or button designs.  He makes examples of Facebook, Google, and Craigslist as successful designs because users can navigate through the content and get from point A to point B easily.  These may not be the best looking designs graphically, but the author suggests that this is not as important as easy navigation and content.  Lastly, he points out that with well-written CSS, the entire web layout presentation will have a sense of cohesiveness to it.  Having browsed through many webpages, I always wondered why a lot of them looked the same with not much flair.  After reading this article, I realized that what the author states is true.  I will keep returning to Google or Facebook because the layouts are simple and easy to navigate through without having to push any  “fluff” out of the way.  This article definitely helped me look at my own website redesign project, and re-evaluate whether the layout helps the user get from one part of the webpage to the other in an efficient way or whether it takes them a while to maneuver through the content on the website to get to where they want to be.

http://www.alistapart.com/articles/on-web-typography/

3.  In Santa Maria’s article, Santa Maria shows what kind of typefaces to use on a webpage in order to achieve readability and personality, and like in the previous articles, the author focuses on context, meaning, and contrast.  The author begins by pointing out that just because there are a limited number of typefaces available, does not mean that web designers cannot make beautiful designs from what they are given.  This is where contrast comes into play.  For example, using two different typefaces such as a serif paired with a sans serif, can complement the design or create tension, which brings a bit of interest to the design; whereas, using two typefaces that are too similar can break the design and weaken the message the designer was trying to bring across.  Also when choosing a typeface, designers must make sure that the font they choose can still be read at smaller sizes.  The author suggests to use Verdana and Georgia because they are “sturdy” with high x-heights.  Finally, when choosing a typeface, designers should consider the “mood” of the webpage.  From this article, I learned that even with limited typeface choices, there are plenty of ways to bring interest and contrast to my webpage without the compromise of readability.

3 websites with outstanding web typography:

http://www.newyorker.com/

1.  This website maintains their old style typeface throughout their layout giving the sense of tradition and old money glamour.

http://trentwalton.com/

2.  The typography on this website is interactive and gives the website some dimensionality.  Although the text is light, I think it is a nice contrast to the rest of the context.

http://jessicahische.is/awesome/

3.  I like how she incorporates her swirly typography on her website and it flows into her portfolio, which has the same kind of design.  Gives her website/portfolio consistency.

3 websites that offer the user a sense of community and/or customization:

http://www.rtl.co.il/

1.  Right to Left is an Israeli web design company that wants to improve user experience when surfing the web.  What I like about this website when you scroll down, the tabs on the top inform you of where you are at on the site.

http://www.precinkt.com/

2.  Precinkt is a website where people can discover “hidden gems” within a city that tourists would usually not know of.  I like the concept of this website because it a center where you can find different activities to do without having to search all over the web.

http://twitter.com/

3.  Although this may be an obvious choice, I think Twitter gives the user a great sense of community in which topics of interest within a city/a group can easily be accessed with a click of a button.  Posts are short and sweet, so readers can read their tweets and continue on with their daily lives.

Continuation of website redesign:

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

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