A layout in typographic style: features and examples

It surely is no secret: typography plays, in every type of design dedicated to communication, the role of the prima donna. A legible font, another more pronounced, a boldface that draws attention, the perfect line spacing: an infinity of details, all intended to transmit messages, be they visual or textual, in the best way possible.

Even in web design typography plays a decisive role, in the face of those who still think that on the web only the message is important and not the way it is transmitted, and that good graphics, as well as a typography minutely taken care of, are trivial details when talking about web design.

Elegant, calligraphic, modern or perky fonts: depending on the chosen font the aesthetic effect – but not only – changes radically. The communicative impact is to change as well , that is the way in which a certain message – which generally, as we all know, is purchasing! – reaches the final user and persuades him/her to purchase our goods or services.

Layouts in typographic style are based on such a concept: graphics reduced to the minimum and an almost maniacal attention for typography, both for the strictly textual content , and also for the purely aesthetic aspect: margins, alignments, boldfaces and calibrations, colors, serif fonts, sans-serif fonts.. texts not only become an integral part of the graphics, but in some cases even replace it.

And with the special effects, especially now thanks to some innovations (font-face, CSS3, etc.) designers have more freedom to dare for experiments.

Some recommendations for a good layout in typographic style

The timeless classic rules

It’s useless to play with the fonts in a captivating and imaginative header, if the basic typography of the page is poor: the rules in this case are those which I consider as “timeless”. Speaking about that, I recommend you read an our previous article, titled “Web and typography: errors not to be committed”, from which I take a bit of inspiration:

Another setting which can improve  – and by much – the appearance of your paragraphs is text line spacing.
Many theories have been elaborated on this aspect: there are those who believe that, especially in very long texts, a reduced line spacing can create difficulty in the reading of a passage from row to row. Others argue that even if it might seem that a bigger line spacing can facilitate reading, in reality it’s the contrary since it forces the eye to increase the number of movements and fixations from a row to another.

Personally, I believe that, with a balanced line spacing every diatribe can be resolved.  I always set a line-height of 22px in paragraphs, and I must say that the result is very pleasant.

Attention to legibility

It’s okay to unleash your creativity, but there is a limit to everything. Remember that the basic function of a website is to provide information, and achieve that in the simplest and most immediate way. Therefore indulge yourself in extraordinary fonts, but always keep an eye to the legibility of the text: if the extravagance of the font renders the titles less legible, change path immediately and try to find a good compromise between aesthetics and functionality.

Attention to focus

In a layout in which typography has a very strong valence, the biggest risk consists in giving the design the wrong focus: if the title font draws attention more than the product/service highlighted in home, means that you have involuntarily shifted the focus of the user, and this obviously is no good.

Many of the typographic tendencies to be observed in this type of layout ( condensed text to render the message stronger, color strokes on particular key words, etc.) don’t have a graphic motivation, but find the basics in their effective efficiency. In a single word: strategy.

A small example? In the following image some words have been highlighted with a brighter color:

What is that the user will instinctively and unconsciously remember? Easy: YIW – WEB DESIGN – COMMUNITY, exactly what we need.

Inspiration: typographic layouts

25 flash websites in typographic style

A fantastic collection of websites in typographic style

40 examples of typographic style in web design

Recommended reading

Web typography: examples and techniques

A guide to web typography – I love typography

Create beautiful CSS3 typography

Resources for a fantastic typography

CSS3 Typography and Special Effects

…I feel like recommending also this beautiful collection of  xhtml/css layouts in typographic style, released for free by Smashing Magazine after an interesting creative competition between web designers.

http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/

Some are really amazing, even though I am sure that the layout in typographic style we will design together, step by step, in the next article of this guide, is going to be quite as great. Do not miss it!

Other articles in our guide:

• Styles in webdesign: the features of corporate/business layout | How to create a corporate style website?
• Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout?
• Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout?
• Styles in webdesign: the features of a vintage layout | How to create a vintage style layout?
• Styles in webdesign: the features of a magazine layout | How to create a magazine style layout?
• Styles in webdesign: the features of a organic layout | How to create an organic style layout?
• Styles in webdesign: the features of a typographic layout | How to create a typographic layout?

*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia