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:

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

5 comments

  1. Helene

Trackback e pingback

  1. Tweets that mention A layout in typographic style: features and examples | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Web RSS News and Tom Bangham, V. Tavares (E-Goi). V. Tavares (E-Goi) …
  2. Discount Dog Supplies
    Soft Dog Crate Features... I found your post very interested so added a Trackback to it from my website....
  3. florystyka
    Recommeneded websites... Here you’ll find some sites that we think you’ll appreciate, just click the links over...

Leave a Reply

Current day month ye@r *