• 

General description

Typographic-style web design makes use of typography in interesting, creative and cutting-edge ways. This style is at the forefront of the adoption of new technologies like font embedding and CSS3. It includes elements like rich font stacks, print-style typographic techniques and attention to the subtleties of text layout.

Important features

• custom fonts
• use of cutting-edge technology for including custom fonts
• rich font stacks
• print-style typographic techniques
• use of sophisticated serif typefaces
• use of CSS3 font properties

When it was fashionable

Typographic style is a relatively new web trend, coming to the forefront over the past two or three years as new technology makes it possible to use a wider variety of fonts. Typographic style has been identified as one of 2010’s new design trends.

What inspires the style

The typographic style of web design is heavily influenced by typography in print. An example of this is the so-called ‘Swiss’ or ‘International’ style of graphic design. This style makes heavy use of techniques such as grid layout and text size to convey the message. Designers can find inspiration anywhere in the centuries that typography has been in use.

How the style has changed over time

Over time, the typographic style has grown and developed from its beginnings in simple improvements to layout and choice of font stacks. Research and increased cross-platform compatibility has increased the number of font stacks available and the depth of each stack. Designers are steadily becoming more confident in using this style, with the result that typography is becoming bolder and a much more dominant feature of web designs.

There is a trend beginning of making websites as visually attractive as print media. This is seen in the development of the ‘Magazine’ style of web design as well as in Typographic style.

How technology has caused the style to change

Technology has caused a number of changes in the Typographic style of web design. The most major change is the introduction of cross-browser compatible methods of font embedding either through CSS or technology like sIFR and Cufon. There are also other smaller changes, for example the introduction of new typography rules in the CSS3 specification. Decorative fonts created by designers are also becoming more widely available and making an impact on this style.

Other smaller changes have also had an effect. Examples of this include improved browser anti-aliasing, the increased support in browsers for PNG transparency and an increase in the availability of particular fonts on multiple operating systems.

There are still some limitations to technology, as illustrated in this article by Dave Shea: http://www.mezzoblue.com/archives/2009/05/07/font_embeddi/. It was generated using Cufon and demonstrates some usability issues.

Example URLs and screen shots

http://www.chris-armstrong.com/ticktalk/

A website with a simple design and bold,strong typography. The hourglass in the background empties as you scroll down the page.

http://jonesingfor.com/#/HOME/

Flash-based website designed entirely around typography and with some cool effects

http://veerle.duoh.com/

A designer’s blog with very nice use of typography.

Links

http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/ – see section 5 on typography

http://www.maxdesign.com.au/articles/font-stacks/ – a slideshow on CSS font stacks

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ – an article about CSS font stacks with examples

http://www.commandlineidiot.com/blog/2008/stack-that/ – an article including a CSS file based on “Better CSS Font Stacks’

http://webtypography.net/ – a site about the principles of web typography

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/ – Tools and resources for working with typography on the web

http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/ – advice on typography for the web

http://webtint.net/articles/typography-in-css2-and-css3/ – article on using CSS to improve the look of web typography

http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/ – CSS3 rules that can be used to implement typographic style

http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/ – an article on improving web typography

http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/ – an article about a particular technique of using typography in graphic design.