This week’s class was all about typography – not just about choosing a pretty typeface, but how it can make or break your website.
The first part of our coursework for this week was to work on our XHTML Good Designs website and really think about the typographic elements: font-size, leading/line-height, typeface, how many to use etc, not just in terms of readability but also personality. I think I definitely underestimated how difficult it would be to create good typography for your site, I’ve spent most of my evenings this week trying to decide on a typeface, then adjusting and tweaking, only to find out that it looks pants and had to start the whole process again.
To be honest, I’m not entirely sure I’ve made the Typography God proud, but it’s been a learning process and I can say that I’m well on the way to knowing that you cannot rush typography and spending a little more time and putting a little more thought into it will make all the difference…which ties nicely into the second part of our coursework for this week:
Find 3 examples of sites with beautiful typography and 3 examples of sites with poor typography – explain why
1. Urban Walks
We hope that our tours will help you see the Big Apple in a new light, learn a thing or two, and come to love the city as we do.
I feel this is an example where the typography reflects the character of the brand and it’s site. There’s only two typefaces on this site: Reforma Grotesque for the headings and Meta Plus for the body text. On their homepage, the typography almost reflects the straight city streets of New York and its effectiveness is added to by the little illustrations. It already sets the tone for the rest of the site, which provides a friendly and succinct introduction to the app and how it works.
2. Brit + Co
The leading community for creative living, making, and doing in the digital age.
With a mix of sans-serif and serif fonts, Brit + Co do a great job of balancing between the two. With sans-serif being the leading lady, the serif font is used as an accent to highlight author names and ‘Today’s must reads’. With the site producing a lot of text-heavy content, the text is clear and big, making long posts very easy to read. They’re also very good at breaking up text into smaller paragraphs so that readers don’t lose interest.
3. Apartment Therapy : using type to define categories
Lifestyle and interior design community sharing design lessons, DIY how-tos, shopping guides and expert advice for creating a happy, beautiful home.
Similar to Brit + Co, this site uses a mix of sans-serif and serif fonts, but with serif being the one used for the site’s content and sans-serif as an accent. Maven Pro highlights the different sections within the site, i.e nav bar, section headings, categories etc, and Lora is used for the text and title in each post. Both typefaces are quite rounded in nature, so it gives off a warm and welcoming vibe, inviting the reader to explore the site.
1. Pentreath Hall
…destination for those seeking beautiful, unusual and decorative things for their home.
Another site with a mix of sans-serif and serif, but producing a very different feel to the ones above. The text seems a little on the small side, so it gives a cramped feeling, and the use of Times New Roman seems a little sporadic at times. I do love the products they sell here though!
2. Ling’s Cars
cheap business car leasing company
There’s…just…too…much…everything. A lot is going on here, and I’m not really sure where I’ve landed. There’s a billion and one typefaces here, none of them are clear so it’s not easy to navigate around the site or really understand what’s being said.
3. Tokyo Bike
tokyobike is a small, independent bicycle company founded in 2002 in the quiet Tokyo suburb of Yanaka
Although I quite like the look of the site itself, this site’s text is too small and it’s not easy to read. The typography is a little off-putting with ‘rivers’ of space running through it and their text being justified. The line-height for their contact information could also be a little wider. Maybe if they’d chosen a bigger font the typography could make more of an impact on the site adding to its overall look and feel.
— Web design is 95% typography —