Web Typography

3 websites that have outstanding web typography

http://www.goodnesspopup.com/
This site has a clean and minimal layout, making use of a modern slab serif font, which is also used as part of it’s logo. I feel that because it only makes use of one typeface throughout, it works.

http://www.mulletized.com/
A portfolio site for a web designer, this site uses numerous typefaces (both san-serif, and stylized serif) and in different weights as well. At first, it may seem like it uses too many typefaces which would make it hard to read. However, I feel that the typeface treatment was well done and it was fairly east to read the header. I also felt that the use of limited colors and rules helped as well.

http://jessicahische.is/awesome/
This site is for Jessica hische, a typographer. She largely uses a san-serif for her body text and makes use of large leading and kerning to make it lighter and easier to read. And although she also uses this orange, extremely stylized typeface, I believe that it works for her as it’s mainly used as a header.

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

http://www.gamesweplayed.sg/
This site’s interesting animation and colorful illustrations is first used hook the visitor, and it’s use of the alphabet as the navigation is interesting. The background music is extremely uplifting and it gives each visitor a fun experience as they learn more about the games.

http://www.justdot.gr/
A design firm specializing in media services. Although it fails at showing their portfolio and half of the site is in russian (I believe), and it’s a bit difficult to read the typography, it still is interesting. I believe that it draws the user because the typography mimics the hand drawn type and it reminds us of our schooldays and gives us a sense of customization.

http://www.etsy.com/
This site is like ebay but for those who love the handmade and vintage items. The images showing the products are already a tool for drawing the user’s attention. This site has a large sense of community, where it encourages users to start their own ‘shops’ and make it easy for us to navigate. Furthermore, their ‘featured seller’ section strengthens this site as a community that appreciates and brings together people of similar interests.

Discusses type on web

informationarchi­tects.­jp/­en/­the-­web-­is-­all-­about-­typography-­period/­
This article talks about optimizing typography to convey information that is readable, accessible and usable. basically taught me exactly what typography is, and that just picking a good typeface is not typography. As web designers, we shouldn’t complain about what kinds of typefaces we could use but we should focus more on using it the best we can, treating text as a user interface. Information design is about the use of good typography, not good typefaces.

http://www.alistapart.com/articles/the-look-that-says-book/
This article talks about the history of hyphenation and justification as an important and time honored technique that has been used largely in print but rarely in web. It talks about the different ways of using hyphenation for the web, such as hard-coding soft hypen into the HTML or using the Hyphenator.js, as well as the disadvantages of doing so. However, it suggests that with the evolving web, it should be made into an option for onscreen reading soon.

http://webtypographyforthelonely.com/
My favorite article, if it can be called that. This site presents 5 different ways of creating animated typography such as punchout, triangulate, coolinate, cluster, illuminate. It talks about the use and purpose, but it also describes how it works by offers the coding and steps into making it ourselves. It showed me the possibilities of web typography which you can’t get from print.

Advertisements

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