Inspiration: 30 Web Designs with Beautiful Typography
Font choice, letter-spacing (tracking), line height, foreground/background colors, size, style — all of these oftentimes disparate attributes must work together cohesively in order to produce typographic compositions that are harmonious and viewed by its audiences with resilient assiduity. For your visual inspiration, here are websites that exhibit skillfully composed typography.
Author: Jacob Gube
Time For Change
Nissan Journey to zero
Dave Barnes
The Combine
Carsonified
Worry Free Labs
The Sunny Side of Life
TRÜF
Brian Hoff
dConstruct
Enliven Labs
Collision
BeerCamp
Stephen Caver
Armitage Online
MCQ
Marie Catribs
Happy Cog’aoke 2
Made By Water
Blake Allen Design
Blue Sky Resumes
Fail-ure
BountyBev
Salt of the Earth
Chirp
TypeFaces
Midtsommerjazz
Digital Podge
BlissfullyAware
Foundation Six
20 Comments (Add yours)
Reece
Aug 20 2010
http://www.sohtanaka.com/ Also a great example of typography
Jacob Gube
Aug 20 2010
Editorial Team
Thanks for sharing Reece.
Lopes
Aug 20 2010
There are some sites that I liked.
Sahus Pilwal
Aug 20 2010
Not only great typography but brilliantly designed websites that engage the mind. BTW does anyone know a photoshop tutorial to create the slit/drop shadow at the bottom of “Worry Free Labs”…
I’ve seen this effect on a few sites and would love to implement myself. Thanks for the post!!! ;)
Dainis Graveris
Aug 20 2010
Excellent typography choice! :)
Dainis Graveris
Aug 20 2010
So harmonious pictures.. amazing… :)
imran khan
Aug 20 2010
Great Collection!!! Like them all
Ricardo Hagens
Aug 20 2010
Nice collection…
thnx for sharing!
Adrian
Aug 20 2010
Amazing, great :)
Dan
Aug 20 2010
Some really great inspirational sites here!
Thanks
ciara
Aug 20 2010
Contributor
really nice collection
Bryan Mason
Aug 20 2010
Really, really nice.
Eric Vasquez
Aug 20 2010
Contributor
This is a good post with lots of great examples! I like the majority if not all of these as they are designed very well and really use type to engage the viewer. I’m curious if the typography on these are in the form of images as it can be tricky to use fancy typefaces with HTML/CSS and Flash?
As per Sahus Pilwal’s comment – The fading bar effect at the bottom of Worry Free Labs is very easy to create. If you have a rectangular selection made with the marquee tool you can then apply a subtle vertical gradient within the selection and lower the opacity to achieve a similar result.
Sahus Pilwal
Aug 20 2010
Thanks Eric for the Photoshop tip! will try it out sometime over the weekend… ;)
Jacob Gube
Aug 21 2010
Editorial Team
Nice tip and thanks for sharing Eric!
As for typography: with Flash, it would be easy since you can embed fonts. With HTML, we could use @font-face and a service like TypeKit, or for short blocks of text like headings or the site name, use CSS background text image replacement for short blocks of text. In the working demo from the Create a Clean and Classy Web Design in Photoshop tutorial, I used CSS background text image replacement for the site’s name.
magie
Aug 23 2010
Nice!
I like the arrangement of contexts, it adds convenience to the reader.
Some fonts are large enough making the content crowded.
I personally admire dConstruct web design, simple yet very appealing.
Thanks for posting!
Andrew Pelt
Aug 24 2010
Didn’t think I would find this information here, will have to come back and visit
Robert
Aug 25 2010
Very nice collection!
Machin
Aug 31 2010
Great collection. No suprises carsoniied is on there.
Latia Johnson
Oct 01 2010
Awesome Collection! That’s wonderful you have Dave Barnes on here he is a wonderful guy and has great music!