Three Websites with Good Typography

 Coursework  Comments Off on Three Websites with Good Typography
Nov 062011

Design Professionalism

As the name indicates, this site is quite professional. It is clear, consistent and appealing. Each field is clearly separated; headings, main text, and links provided are readable and easy to understand. No excessive use of typography is used and the typeface is just beautiful. In contrast to many other sites, a very good way of emphasizing is used which rather highlights than downgrade site’s value.



This site uses a personal typography design. In a clever way, it tries to tempt its users to sign up, giving a paperback feeling. The fonts is extremely consistent and readable and there is absolutely no struggle in understanding the content. In addition, the typeface used is visually appealing as it seems to matches with the black and white photographs. The logo is obvious and dynamic and the tagline is clear and informative. Even though the site is not up yet, it already gives some positive feeling and the typography of the site is the reason.



Those sites are both of the same company which provides high resolution pictures of bottles or cans. Even though the topic sounds boring and common, the company managed to make their subject interesting enough. Again, the main reason is typography. When a visitor first enters the site s/he can’t be but curious.

The content constitutes of several headings and paragraphs which have clarity and personality. The color of the fonts is used in an appealing way that works. Each content area is distinctive and it helps for passing the message to viewers.

Three Websites with Poor Typography

 Coursework  Comments Off on Three Websites with Poor Typography
Nov 062011

Mangal Pharmacy
This site seems to be poorly planned, even though this site uses a readable typeface. Apart than the main heading, there is no clear distinction between other headings and subheadings to paragraphs. The line length (of the main paragraph) is very long, thus making it more difficult for a visitor to keep track of the line. Also, there is a mismatch between the contents of the main block and the news block. In addition, double spacing is used, making a distraction. Last but not least, the content positioning, as well as its color, seem to be dated and boring.


The Company of Maisters
This website is really outrageous, but typography is even more bad. In general the site is aligned to the center. The use of the font sizes is not balanced, as the main content appears to be smaller than the message prompting for the use of email. The line length is big and designed in a way, that cannot be taken seriously by the visitor. In addition the letter spacing is small and makes it difficult to read. Navigation’s fonts are really small and arranged in a very strange and unappealing way.


Bob Hope
If I could illustrate the term “font bombing”, I would use this Bob Hope’s site. The reason is that their main page is full of different posters, something which adds a lot of “noise” into the page. Another reason i dislike this site is link-bombing: the site is full of links. There is no clarity, no clear separation between main text and secondary paragraphs. Also the emphasize usage comes with no special meaning. The color use is dreadful as well, making it difficult to understand the hierarchy of any content.

Three examples of good colour schemes

 Coursework  Comments Off on Three examples of good colour schemes
Oct 242010

Note: All three websites have been tested using the Colorblind Web Page Filter and all performed well.

SilverbackVisit the Silverback website

‘Guerrilla usability testing software for designers and developers’

The Silverback website uses what I think is an analogic colour scheme. Green is the primary colour, with blue used sparingly to highlight important areas of the screeen (‘download’ and ‘new features’). A dark grey is used in the footer to differentiate information about the application from information about the developers, and the same colour is used for the site heading. The website’s gorilla logo uses similar shades of blue and grey to provide a contrast with the background and draw attention to the website’s strong branding. Continue reading »

Baseline grid

 code  Comments Off on Baseline grid
Oct 232010

A few of us were having a discussion about using a baseline grid during the break on Wednesday afternoon, and I said I’d post a link to an example with the grid showing. So, here it is:

It’s based on Richard Rutter’s article Compose to a Vertical Rhythm which was published on 24 Ways several years ago. Continue reading »