Type Makes A Difference: An Exploration Of Type-Focused Websites

Advertisement

In this article, we’ll take you on a thought-provoking journey through carefully selected Web designs. Certainly, these websites have some captivating interactivity; however, the selection of type and the typographic styling and spacing are the reasons why we chose them for this piece. In the context of typography, considering composition and grid structure is also important.

Why Grid Structure And Composition Are Crucial To Typography

Composition and grid structure are vital factors in effective communication with type. In Thinking with Type1, Ellen Lupton comprehensively explains the benefits of working with a grid. She addresses the flexibility of grids, what grids offer in integrating type and image, and how they can organize a complex hierarchy.

There is an inextricable link between typeface, type size and measure (i.e. line length). While a design’s appearance can vary from screen to screen, good designers are experts at creating enticing, digestable amounts of information, carefully composed to hold our interest. However, losing the connection with the audience is all too easy. For example, text set small on long lines can make for daunting reading, and text set large on short lines is equally problematic, though for different reasons.

In the latter case, the line breaks could overwhelm the punctuation, demanding the reader to refocus their attention every few words. In both situations, the extra long or extra short lines could lose the reader’s interest all on their own.

Long line type5002

short lines typeB5003
These two examples demonstrate well the challenges of fitting relatively small text into either a very wide or very narrow measure. Neither is easy to read and both are unappealing. (Design by Bright Pink) (Larger views: Image 14, Image 25)

Sections with different levels of importance require different levels of prominence to guide the user through the website and hold their attention. A consistent measure in sections of relatively equal importance is a helpful and reassuring guide. Inconsistency is confusing.

uneven columns 10006
When text of the same priority extends across multiple columns, a sudden change in measure for no apparent reason would be confusing. (Design by Bright Pink) (Larger view7)

Grid Structure

In this section, the websites we’ve highlighted show how a grid can affect typography, creating appeal, accessibility and structure and supporting the hierarchy.

SilkTricky

The grid structure of SilkTricky918 has six columns to break down information into enticing segments. The consistent typographic system for headings contrasts the lighter tones of Bookman Light Italic (for category descriptions) with the very different visual rhythm of Futura Condensed Bold.

Silktricky A 5009
(Larger view10)

These typefaces complement each other well, creating a dramatic change in scale, case, texture and weight. The contrast tempts you to look further, drawing you to each segment’s few lines of descriptive sans-serif text.

SilktrickyB50011
(Larger view12)

At the click of a button, the copy smoothly expands to a few paragraphs and across two columns, just enough to get you hooked while still adhering to the grid. This longer descriptive copy creates another level of typographic texture and tone that contrasts effectively with the headings, providing a welcome change of pace and visual rhythm.

Percussion Lab

Percussion Lab9213 also makes effective use of the grid, flexibly using four columns to feature a detailed mix of sets from contributing artists. Each featured item fits into the column structure and overall hierarchy, including details on the date, artist, set name and genre. The highlights expand to fill two columns and feature a track listing and helpful details.

Percussion lab A 50014
(Larger view15)

Percussion labB 50016
(Larger view17)

The fonts, a blend of serif and sans serif, feature changes in weight, case, orientation and spacing to reinforce the hierarchy. Typographic detail and the grid structure also establish and maintain interest and trust.

The New Art Gallery Walsall

The website for The New Art Gallery Walsall18 in the UK uses sans-serif letterforms clearly and appealingly, but the changes in scale and the pleasing grid are what make this website truly memorable. The main body of text extends down the left side, with other aspects, such as links and highlighted details taking up columns to the right.

Walsall A 500_mini19
(Larger view20)

Wasall B 500_mini21
(Larger view22)

The open uncluttered typography and generous space reflect the gallery’s own architecture, its important collections and its commitment to making art both accessible and enjoyable.

Type That Attracts Users

Is the substance of the text what matters most? Undoubtedly, this can be true, especially if the language is stimulating or addresses the user’s personal interest. Text that makes us laugh or that is risqué or controversial can be a great draw, too.

However, there is more to drawing interest: the type’s style, texture and tone23, general appearance and layout play a great part in whether users take an interest. Type can also enhance the subject matter of an article, reinforcing the emotional weight, the aesthetic, or the exclusivity of the product.

Crockett & Jones

The website of Crockett and Jones24 is one such example. The English company has been handcrafting fine shoes since 1876, and its website undoubtedly reflects this wonderful heritage through both its imagery and type. The name style appears on each page, and the individual letterforms echo the decorative style of Victorian design. Microsoft Georgia is used sensitively for body text to complement the name style and to reinforce the sense of heritage, quality, style and attention to detail.

Crockett and JonesA50025
(Larger view26)

crocketandjonesB50027
(Larger view28)

In writing this piece, I found myself thinking of Beatrice Warde’s well-known article from 1932 on printing and type, “The Crystal Goblet,” in which she argues that “printing should be invisible.” She specifically addresses type, using the metaphor of wine in a glass to explain that the printed word shouldn’t in any way hinder the meaning of text. Warde reasons that type should complement and enhance meaning and increase our understanding and appreciation.

This connects well with what Marko Dugonjic29 says in “Designing for the Reading Experience8930”: “Seamlessly digesting written matter is possible only when the typography is well thought out and legibility is facilitated by a considered reading experience.” Obviously Warde’s article predates the Web, but the principles it espouses are relevant today.

Combinations Of Typefaces

Selecting and combining typefaces to reinforce a theme is always a challenge. It demands patience to try out alternatives and visual acuity to assess effectiveness. The websites in this section mix pleasing and well-chosen faces and type styles to emphasize subject matter, to boost appeal and sometimes to surprise.

Four Seasons

Dramatic contrast in texture and tone is achieved with type on Four Seasons9431’ website, which brings together different styles and weights of Garamond with some of the many variations of Helvetica. The visual rhythms of uppercase and lowercase Garamond Italic sit side by side with the strong vertical strokes and very different pace and texture of uppercase Helvetica Condensed.

Delve into the website to experience this dramatic contrast reinforcing the hierarchy and the style, quality and reputation of the Four Seasons brand. Both Garamond and Helvetica are available in numerous weights and styles, making them both very useful for complex hierarchies.

FourseasonsA50032
(Larger view33)

FourseasonsB50034
(Larger view35)

Nowness

With the headings on Nowness36, CreateThe Group has elegantly mixed uppercase and lowercase Garamond Italic with uppercase P22 Underground Titling. This combination exudes class; the graceful strokes of Garamond Italic have a pleasing textural contrast with the sophisticated lines of P22.

Nowness 50037
(Larger view38)

CreateThe Group has paid careful attention to intercharacter spacing and changes in scale, carefully controlling the tone and hierarchy and reinforcing the stylish subject matter of the website.

Barcamp Omaha

Barcamp Omaha39’s website, designed by Grain and Mortar, promotes what is described as an “unconference,” an informal occasion to listen to and meet others and network. With a considerable amount of illustration, the website brings together three well-chosen, contrasting fonts, two of which have obviously been selected for their potential as heading fonts.

Barcamp A50040

BarcampB50041

These two — one a bold, slightly condensed uppercase sans serif, and the other a companion all-cap slab serif — have a slightly retro feel that is often associated with an American college aesthetic. The text is enclosed within multiple small panels; however, the change in font and the variation in weight and color are the things here that prioritize detail and reinforce hierarchy.

Warhol Initiative

The website for the Warhol Initiative9942, by Toky, shows typographic audacity. Condensed typefaces can be a challenge to read; strong vertical strokes of letterforms combined with compact characters can, on occasion, hinder legibility. Here, Toky brings together a serif font with a dramatically contrasting condensed face, showing great skill and bravery.

Warhol50043
(Larger view44)

The careful intercharacter spacing and measured type sizing help to ensure ease of reading. The pace and texture of type are well supported by the condensed font, speeding the user through the condensed headings to the details that follow. This condensed typeface has been well selected to complement Warhol’s style and era.

Combadi

Combadi10145, designed by Radial, could easily appear in a number of the sections in this article. Its grid structure is based on 12 columns and can be seen in various configurations as you progress through the pages. However, the combination of typefaces is the really arresting aspect of this design. Brandon Grotesque and Museo Slab combine with great sensitivity and finesse to reinforce the hierarchy.

CombadiA50046
(Larger view47)

CombadiB50048
(Larger view49)

Museo Slab is used for the body text, and the generous x-height, short ascenders and descenders and wide letter spacing make for easy reading. Changes in color are also applied to instances of Museo Slab, adding emphasis and reinforcing Combadi’s brand and color palette. Brandon Grotesque is complementary and contrasting, mostly restricted here to secondary headings, navigation and Combadi’s name style.

Aria

Designed by Un.titled, Aria50’s online shop has elegant high-contrast serif letterforms. Headings in italic feature particularly unusual forms of lowercase v’s and w’s, reinforcing the exclusivity of Aria’s designs. Contributing to the distinctive typographic character are the limited tonal changes within the text. To adequately capture hierarchical differences with considerable subtlety, Aria has varied the scale and adopted italic type.

AriaA50051
(Larger view52)

AriaB50053
(Larger view54)

AriaC50055
(Larger view56)

Spacing, Leading And Intercharacter Spacing

Spacing within and around type is crucial to making the text appealing and legible. Even if you’ve selected the ideal typefaces, the design’s ultimate success could fall by the wayside if spacing is not satisfactorily addressed. On the websites in this section, spacing around and between letterforms has been carefully considered, not only making the designs more appealing, but helping the user to read the copy comfortably.

STL DesignWeek

The design for STL DesignWeek10557 is unusually angled and highlights what can be achieved by subtle line and letter spacing. The sans-serif face has been selected for its proportionally large, open, rounded x-height and slightly wide letter spacing. Line spacing is broad, too, reinforcing the airy feel and guiding the reader from line to line, making for a pleasant experience.

STL A 500_mini58
(Larger view59)

STL B 500_mini60
(Larger view61)

The Beetle

DDB Tribal10762 designed The Beetle10663’s website, which focuses on the spirit and heritage of the Volkswagen Beetle. The character of the car — a reliable, hardworking vehicle for all — is admirably captured in the type. Typographically, the website is simple, with letterforms limited to two weights of Futura.

BeetleA50064
(Larger view65)

BeetleB50066
(Larger view67)

The clarity of the type is evident, with careful letter and line spacing that reinforce the simplicity of the Beetle’s story. Headings are given extra letter spacing, as if to slightly enhance its tonal difference from the rest of the copy and to reinforce the character of this iconic brand. Generous, broad leading draws the user comfortably along each line of text, making the Beetle’s story an enjoyable read.

I Love Typography

If you are not familiar with I Love Typography10868, do take a look; anyone with a passion for type will find so much of interest. Some beautiful selections of typefaces appear throughout the website, and as you progress from article to article, you are helpfully told the names of the fonts used, which include FF Basic Gothic Web Pro, Le Monde Journal STD and Le Monde Sans STD.

IlovetypeA50069
(Larger view70)

IlovetypeB50071
(Larger view72)

The typefaces and combinations are elegant, but the leading and intercharacter spacing also reinforce the sophisticated and refined feel. The title for each article is set in a lightweight, relatively large-scale uppercase and lowercase sans serif, with intercharacter and word spacing that also show a delicate touch. The link between the space within the counterforms of the letters and the letterforms themselves is pleasing. This delicate touch complements well the type that follows.

I Love Typography takes a careful approach to the spacing in the opening text for articles. It strikes the right balance between just enough space to draw the eye along each line, guiding it to the next, and leaving just enough space for links, with their generously spaced, dotted underlines. The underlines are frequent and are centered below the base line and above the x-height; they have been positioned to avoid any clash with ascenders or descenders. The space throughout all levels of text creates a contrast that reinforces hierarchy, aids reading and helps to captivate.

Changes In Scale

Changes in the scale of type are frequently done to indicate prioritization and hierarchy. One of the most common approaches is to set headings in large bold type and body text in smaller, lighter type. The examples in this section show much more ambition.

Design Waller Creek: The Final Four

Changes in scale are an excellent way to create structure and assign priority, and they can be one of the few solutions available if the selected font has few weights and styles. The “Final Four” section of Design Waller Creek73’s competition page changes scale to reinforce hierarchy. Four lines of the largest type form an introductory statement, followed by a section of considerably smaller copy set in the same face. For the heading that follows, the text returns to the size of the introductory copy, possibly in a slightly lighter weight, before reverting to the smaller size for the bullet points.

WallcreekA50074
(Larger view75)

wallcreekB50076
(Larger view77)

wallcreekC50078
(Larger view79)

The tone here is noteworthy, too; copy is predominantly set in gray, but the much larger, lightweight slab-serif headings that serve as section indicators are tonally very similar to the smaller text on the website. This comes down to the hairline weight of the slab-serif font, which echoes the weight of the smaller letterforms.

Caravus

There are many pleasing aspects to the typography in Caravus11080, by Toky, but the changes in scale merit particular attention here. The text has a varied hierarchy, setting the stage for changes in weight and dramatic changes in scale. Large lightweight slab-serif letterforms are used for headings, contrasting with the much smaller, darker body copy.

caravusA50081
(Larger view82)

CaravusB50083
(Larger view84)

caravusC50085
(Larger view86)

This is a departure from a typical hierarchy, with large bold type for headings and smaller lighter type for the body. Throughout the website, quotes, statistics and other high-impact information are accentuated by changes in scale, often in combination with bright color. You could describe this as “type as image,” playfully attracting attention, while reinforcing the hierarchy in a memorable way.

As in most cases, visual judgement is key, and the hierarchy here is well supported by the textural and tonal contrast arising from the changes in scale and color.

Conclusion

All of the designers we’ve showcased use type sensitively, making careful typographic choices that reinforce their message and brand values. The design decisions establish hierarchy and stimulate appeal, and the combination of images, color and typography make for highly memorable visuals.

We’ve focused on typography and on how engaging it can be; hopefully, it has broadened your view and drawn your attention to some of the minutiae involved in effective typography. Perhaps this piece will move you to continue on your own thought-provoking journey through the typographic details of other websites. Since the time of Beatrice Warde, new technologies have enabled us to more easily experiment with typographic alternatives and new letterforms to speedily communicate content while maintaining appeal.

Useful Links

Articles

Website Designs

(al ea)

Footnotes

  1. 1 http://www.thinkingwithtype.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Long-line-type1000_mini.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2013/10/short-lines-typeB1000_mini.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Long-line-type1000_mini.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/10/short-lines-typeB1000_mini.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2013/10/uneven-columns-1000_mini.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2013/10/uneven-columns-1000_mini.jpg
  8. 8 http://www.silktricky.com/#/home
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Silktricky-A-1000_mini.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Silktricky-A-1000_mini.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2013/10/SilktrickyB1000_mini.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2013/10/SilktrickyB1000_mini.jpg
  13. 13 http://www.percussionlab.com
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Percussion-lab-A-1000_mini.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Percussion-lab-A-1000_mini.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Percussion-labB-1000_mini.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Percussion-labB-1000_mini.jpg
  18. 18 http://www.thenewartgallerywalsall.org.uk/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2013/09/Walsall-A-1000_mini.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2013/09/Walsall-A-1000_mini.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2013/09/Wasall-B-1000_mini.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2013/09/Wasall-B-1000_mini.jpg
  23. 23 http://www.smashingmagazine.com/2012/09/07/drawing-mark-making-creative-way-maximize-design-ideas-type/
  24. 24 http://www.crockettandjones.com/
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Crockett-and-JonesA1000_mini.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Crockett-and-JonesA1000_mini.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2013/10/crocketandjonesB1000_mini.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2013/10/crocketandjonesB1000_mini.jpg
  29. 29 http://www.smashingmagazine.com/author/marko-dugonjic/?rel=author
  30. 30 http://www.smashingmagazine.com/2013/02/18/designing-reading-experience/
  31. 31 http://www.fourseasons.com/
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2013/10/FourseasonsA1000_mini.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2013/10/FourseasonsA1000_mini.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2013/10/FourseasonsB1000_mini.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2013/10/FourseasonsB1000_mini.jpg
  36. 36 http://www.nowness.com/?icid=overlay_home
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Nowness-1000_mini.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Nowness-1000_mini.jpg
  39. 39 http://2012.barcampomaha.org/
  40. 40 http://2012.barcampomaha.org/
  41. 41 http://2012.barcampomaha.org/
  42. 42 http://warholinitiative.org
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Warhol1000_mini.jpg
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2013/10/Warhol1000_mini.jpg
  45. 45 http://combadi.com
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/2013/10/CombadiA1000_mini.jpg
  47. 47 http://www.smashingmagazine.com/wp-content/uploads/2013/10/CombadiA1000_mini.jpg
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2013/10/CombadiB1000_mini.jpg
  49. 49 http://www.smashingmagazine.com/wp-content/uploads/2013/10/CombadiB1000_mini.jpg
  50. 50 http://www.ariashop.co.uk/
  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2013/10/AriaA1000_mini.jpg
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2013/10/AriaA1000_mini.jpg
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/2013/10/AriaB1000_mini.jpg
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/2013/10/AriaB1000_mini.jpg
  55. 55 http://www.smashingmagazine.com/wp-content/uploads/2013/10/AriaC1000_mini.jpg
  56. 56 http://www.smashingmagazine.com/wp-content/uploads/2013/10/AriaC1000_mini.jpg
  57. 57 http://stldesignweek.com
  58. 58 http://www.smashingmagazine.com/wp-content/uploads/2013/09/STL-A-1000_mini.jpg
  59. 59 http://www.smashingmagazine.com/wp-content/uploads/2013/09/STL-A-1000_mini.jpg
  60. 60 http://www.smashingmagazine.com/wp-content/uploads/2013/09/STL-B-1000_mini.jpg
  61. 61 http://www.smashingmagazine.com/wp-content/uploads/2013/09/STL-B-1000_mini.jpg
  62. 62 http://www.ddb-tribal.com/
  63. 63 http://www.beetle.com/int/en/home
  64. 64 http://www.smashingmagazine.com/wp-content/uploads/2013/10/BeetleA1000_mini.jpg
  65. 65 http://www.smashingmagazine.com/wp-content/uploads/2013/10/BeetleA1000_mini.jpg
  66. 66 http://www.smashingmagazine.com/wp-content/uploads/2013/10/BeetleB1000_mini.jpg
  67. 67 http://www.smashingmagazine.com/wp-content/uploads/2013/10/BeetleB1000_mini.jpg
  68. 68 http://ilovetypography.com/
  69. 69 http://www.smashingmagazine.com/wp-content/uploads/2013/10/IlovetypeA1000_mini.jpg
  70. 70 http://www.smashingmagazine.com/wp-content/uploads/2013/10/IlovetypeA1000_mini.jpg
  71. 71 http://www.smashingmagazine.com/wp-content/uploads/2013/10/IlovetypeB1000_mini.jpg
  72. 72 http://www.smashingmagazine.com/wp-content/uploads/2013/10/IlovetypeB1000_mini.jpg
  73. 73 http://wallercreek.org/finalfour/
  74. 74 http://www.smashingmagazine.com/wp-content/uploads/2013/10/WallcreekA1000_mini.jpg
  75. 75 http://www.smashingmagazine.com/wp-content/uploads/2013/10/WallcreekA1000_mini.jpg
  76. 76 http://www.smashingmagazine.com/wp-content/uploads/2013/10/wallcreekB1000_mini.jpg
  77. 77 http://www.smashingmagazine.com/wp-content/uploads/2013/10/wallcreekB1000_mini.jpg
  78. 78 http://www.smashingmagazine.com/wp-content/uploads/2013/10/wallcreekC1000_mini.jpg
  79. 79 http://www.smashingmagazine.com/wp-content/uploads/2013/10/wallcreekC1000_mini.jpg
  80. 80 http://caravus.com
  81. 81 http://www.smashingmagazine.com/wp-content/uploads/2013/10/caravusA1000_mini.jpg
  82. 82 http://www.smashingmagazine.com/wp-content/uploads/2013/10/caravusA1000_mini.jpg
  83. 83 http://www.smashingmagazine.com/wp-content/uploads/2013/10/CaravusB1000_mini.jpg
  84. 84 http://www.smashingmagazine.com/wp-content/uploads/2013/10/CaravusB1000_mini.jpg
  85. 85 http://www.smashingmagazine.com/wp-content/uploads/2013/10/caravusC1000_mini.jpg
  86. 86 http://www.smashingmagazine.com/wp-content/uploads/2013/10/caravusC1000_mini.jpg
  87. 87 http://www.smashingmagazine.com/2012/09/07/drawing-mark-making-creative-way-maximize-design-ideas-type/
  88. 88 http://www.nicoledreher.com/dreher_goblet_site/index.html
  89. 89 http://www.smashingmagazine.com/2013/02/18/designing-reading-experience/
  90. 90 http://www.crockettandjones.com
  91. 91 http://www.silktricky.com/#/home
  92. 92 http://www.percussionlab.com
  93. 93 http://www.blackestate.co.nz/
  94. 94 http://www.fourseasons.com/
  95. 95 http://www.nowness.com/
  96. 96 http://www.createthegroup.com/en/
  97. 97 http://barcampomaha.org
  98. 98 http://grainandmortar.com
  99. 99 http://warholinitiative.org
  100. 100 http://toky.com
  101. 101 http://combadi.com
  102. 102 http://radial.gr
  103. 103 http://www.ariashop.co.uk/
  104. 104 http://un.titled.co.uk/
  105. 105 http://stldesignweek.com
  106. 106 http://www.beetle.com/int/en/home
  107. 107 http://www.ddb-tribal.com/
  108. 108 http://ilovetypography.com/
  109. 109 http://wallercreek.org/finalfour/
  110. 110 http://caravus.com
  111. 111 http://toky.com

↑ Back to topShare on Twitter

Jessica Glaser is an academic from the University of Wolverhampton in the UK. She is a practicing graphic designer and prolific design writer. Her numerous books, many written in partnership with Carolyn Knight, focus on topics including the use of space in graphic design, mnemonics and memory devices and the understanding and creation of visual hierarchy. Her company Bright Pink Communication Design works in areas including healthcare, construction, education, financial services and the public sector.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Good article on bringing up the importance of typography in Web design. Coming from a traditional design background (with formal study in typography), it’s good to see that the ability to effectively use type online has expanded in recent years. Earlier Web work (aside from Flash, etc.) was extremely limiting in this regard. With modern standards, we are now able to bring good design, content, and accessibility together…

  2. 2

    Love how they only get it right to a certain degree with pictures of the team members on the Caravus site… if you break the box, do it! Don’t hesitate and live a shoulder and elbow society only half-heartedly…

    Anyway, how can this article’s title (almost) yell “type focused” and yet cite the well-known “printing should be invisible”? I’d expect a type-focused website to break boxes and grids to grab attention from the content and direct it to the used types!

  3. 3

    Very nice collection of examples. I have not seen web design described using the language I learned in graphic design for quite some time. It was a very interesting and inspiring read. It will help me look at design from a slightly different perspective.

  4. 4

    Great article! For so many years typography has been looked on with disdain by developers and us designers have resorted to banging our heads against a brick wall! It’s only over the last few years that type has really started to come into it’s own online. Surely this has been the missing piece of the puzzle for online design.

    • 5

      I totally agree to that. It’s actually nice to see more and more people care about it, and a different, well chosen type sometimes does make so much difference in viewing pleasure for the reader.

  5. 6

    Really nice article and great example of websites cleverly explained. Thank you!

  6. 7

    These are really great examples of how your can use type to maximize the overall design of a website. Thanks!

  7. 8

    I appreciated the reference to traditional principles of typography and typographic hierarchy, as well.

    All too often, showcases of “web typography” simply show pages using unusual typefaces and enormous sizes for small blocks of copy, or examples of cool jquery effects for headlines, ignoring the often-poorly executed typographic hierarchy of inside pages.

    Thanks for a nice round-up and analysis.

  8. 9

    Very beneficial article with the variety of contrasting and insightful examples. A great emphasis on how to assign font to individual nature of the website.
    Many thanks!

  9. 10

    Some of these websites are really rather beautiful. I find myself addicted to typography as a content marketer – the design of content is just as important as the substance, in my opinion.

    Jakk

  10. 11

    Yes indeed – Typefaces DO matter quite a bit! We spend quite a few hours going over several options for each new website project. Sometimes a couple different options both work well but change the overall style and feel of a website quite a bit. Building on a grid is always a good idea. Great samples of effective type on this blog post – thank you!

    Alex
    Isadora Design – A Professional Web Design Company

  11. 12

    Good Article!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top