My Typography Talk: Typography is the Foundation of Good Web Design
The web can be a daunting typographic place for both designers and developers. Current limitations with web typography can frustrate designers who are accustomed to a wide range of typographic options, while many front-end developers find themselves facing a struggle when refining the details of type to be more legible during build-out. The web is a perfect example of designing under constraints, and while we are on the way to a web with less limitations, there are plenty of small things a designer can do to enhance typography now.
After writing several conceptual blog posts and giving similar presentations, I took foks' feedback and decided to put together a talk that demonstrated many of the vague concepts of web typography through step-by step examples.
To best illustrate my points, I chose a website that was in sore need of a "typographic" makeover. Knowing I needed to choose a site that was indisputably in need, I scanned my memory and recalled one I came across last year while shopping for a Christmas gift for my sister. With the body-copy typeset in papyrus, this particular website offered a unique service of a printable spa gift certificate, (which was exactly what I needed being that we live in different locations). But FINDING that printable gift certificate was difficult because of the site's illegible copy and undefined hierarchy.
In order to demonstrate the power of typography, I decided to redesign the site only using typography. Below are three excerpts from the redesign that demonstrate my three "pillars of web typography:" legibility, hierarchy, and expression.
Legibility:
Content is why users are on your site; they're seeking information, and they get no value from copy they can't read.
Hierarchy:
The web is interactive. Users engages with the type in order to navigate throughout the site. The order of importance defined throughout the type will allow for a clear path and solid user experience.
Expression:
Words can only convey so much, so displaying the type in a unique manner will help communicate a feeling and emotion. This is what separates boring information from an experience. In this case, you dont need an "organic" typeface to express the mood of the spa; you can use elements such as depth and texture to enhance the type. Typography is more than what font you choose.
I had the pleasure of giving this talk at Refresh Baltimore, Refresh Pittsburgh, and Mr. Brown’s Web Class at Damascus High School, where I met lots of people enthusiastic about typography. I am grateful for each opportunity and learned a lot in the process.
If you would like to download the entire presentation or read more about it, you can check out on my personal blog.
To see the results of the redesign in its entirety see the before here and the after here.
FYI: In your last “after” example image there is a typo ("Metemorphosis.
Hey Carsen,
Thanks for pointing that out, spell checking is something that I talk about in the presentation. One of the goals of this talk was to give some insight into how I work. I am and constantly tweaking and revising my designs, and this process shows every revision. Since spelling is not one of my strong points , I make several spelling changes throughout the step-by step redesign.... I definitely don’t nail a design in one try… and I rarely get the spelling right. Spell check rocks.
Oh my, Papyrus! I actually came across a similar problem when shopping at a spa’s website for gift cards. Even the Papyrus typeface! Maybe it’s a trend in the alternative health industry?
Love the treatment you gave to the site. Especially the big, can’t-miss-it gift certificates link!
Whoa, amazing! I just loved the screens, can you actually point the site out so I can gaze through it some time? That’d freakin rock :D
Brilliant job, Samantha!
this is a great post, i’ve waiting to release this after the first theme design, i’m trying to learn how to integrate it on wordpress as i’ve don’t have enough time to tweak the css for that, but now this helps me a lot to work for wordpress. Thank you so much
Really nice type treatment Samantha. When that’s said, the re-designed site looks completely different, and has a complete different look and feel. What’s your reasoning for taking the arabic-esque style and switch it over to something more ‘Zen’?
Nice. before and after images are great.
Hi…
It’s amazing! I just loved the screens, can you actually point the site out so I can gaze through it some time.images are great.
Thanks.
I personally think good typography is very important on a Web page. Since it appears on a computer screen it should be pleasing to look at and easy to read. The pictures you attached are transformed to a very beautiful one. The differences between the previous and the latest ones are huge and the new ones look simply awesome. Beautiful changing.
Very nice upgrade and a world of difference.
Pretty typography with use of images goes only so far on the web; there is also as equally important aspect of accessibility. What is ‘nice and readable’ to you and me may not be the case for all the users (especially those with disabilities).
In other words, how about an article about it to go along ;)
Very nice )) I much liked
Well, this depends upon one’s mind and how he/she feels about given website and its look, design, outcome. At the same time even I believe typography helps visitors to navigate the site more easily and possible in conversions/leads. But no just typography, the color options you choose, design, layout, and other end number of things matters, while preparing very good user friendly site. Typography matters when you have design a site for Gifts, Gift Certificate, Weddings, Birthday, Web design itself. But I must appreciate, this information will really help for person like me. Thanks dude.
That is very true. If you have an attractive typography, then it would definitely make good web design. Nice pictures put up as examples and great post indeed!
Regards, DcrDetox
Next entry: Finding a Job in the Design Field
Previous entry: Create A Style Toolkit, Save Time and Mental Energy
Recent Comments
@brad
It makes little difference when using native EE functionality or Structure to add pages, it’s just that if you want to add a sub page, you need to remember to assign a...
- Hambo on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- brad on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- Doug Avery on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
Subscribe to Comments RSS