As we know enhanced web typography is becoming a trendy way to maximize a website’s wow factor, and you need to be on it! I’ll get you squared away with a few great examples from the web world. Each of these can teach us (designers) a trick or two about creative and unique typography twists that will engage the user and make a site shine. To give our readers a comfortable feel for the real do’s and don’ts in the wonderful world of web typography. I’m offering my very honest critiques. So read on.
Attack of Design
Excellent type spacing and lots of great white space make Sasha Grief’s design a very pleasant read. The font flows seamlessly with the overall retro style of the website and is quite a legible, easy-on-the eye choice. The hover effect coupled with an exceptionally nice comments section make this an elegant example of workable typography. Perhaps a larger font size could have been used for the sidebar headings, and maybe a bit of extra padding in the comments section would constrict things less, but overall an A+ typography.
This straightforward design is another great example of the potential for beauty and flexibility in web typography. The pure and simple feel of the site, sits well with the choice of font: sans-serif. Even the line spacing, though minimal, complements the sharp, modern style of the site. On the downside, the animated social media link in the corner is a distracting drawback. Leading is important on a site like this, and both the profile page and the content form could use more of it.
This website’s amazing creative flair makes great use of typographic combinations. The circular script and squared-off sans-serif is appealing and elegant – perfect for one page design. This versatility in type adequately showcases each section’s distinct style. However, a few places on the site do lack the readability and flow desired due to relatively weak color contrast. Other than that everything looks good.
The Hype Nation site definitely possesses a sleek and funky feel, and its stylized header font creates the perfect accent. The elegant footer adds just the right touch to the overall look of the site. The designer might have kept the footer’s color contrast rather than the bolder choice of black on orange in the header, just for consistency’s sake. The biggest pitfall is in the Projects section. Without a separate portfolio or detailed projects page, the site becomes a bit confusing. Overall, the type spacing and use of white space are both right on.
In the header/logo, the “creative” part written in the thin red color font is overtaken by big bold “dubbed” in white color. I think the balancing could be a little better. At first sight, the viewers are overloaded with lots of information. An easy way to fix this typographical barrage is to move the site description bellow the header instead of beside it. This site has a nice promising structure, but it feels too overwhelming because the designer doesn’t use any whitespace for clarity. There are lots of colors, lots of icons and too many text and buttons, and all this can be really confusing.
Now that we’ve explored and critiqued a few, feel free to dive right into improving the type on your own sites. I’ll be writing more on the typography. And feel free to let me know if you want me to check your site.