Web Typography Trends in 2013

“TYPOGRAPHY is the balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. As readers scan a page they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, then they parse the language, or read. Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.”Web Style Guide

A little bit wordy but I couldn’t explain any better what typography is about. Only in the recent years has typography been a big part of web design. Technology greatly limited font use and font experimentation mainly because you had to work with a few key fonts that would have been available on a visitor’s computer and make sure you picked a more legible font. From a user’s perspective web-safe fonts were great but from a designer’s perspective it was a creative disaster. However, technology has improved and given a big burst of typographical creativity to web sites everywhere – thankfully.

SEE ALSO: Design Trend: Ghost Buttons in Website Design

Recently, typography in itself has giant popularity in being an element of web design than being more or less meaninglessly in it even if it looked good. It is no longer a matter of whether to use a sans serif or a serif font but which font face, what height, what colour and on which part of the text. In web design, typography is growing in importance. Additionally, due to higher @font-face implementation, integration and higher quality displays, fonts are crisper and clearer which makes them so much more beautiful.

More white space

Minimalism is growing in popularity like never before. The clutter free environment allows for a lot of space which can be effectively utilized to be white space rather than empty space. Today, the use of white space is a fairly common concept but in 2013 it will be taken to the next level. White space will be used to create even more dramatic effects and achieve certain design looks.

On top of that, increased white space has other benefits such as less visual stress and easier readability. Additionally, greater space means the use of bigger font sizes. Cramped writing is scary and difficult to read so an implementation of white space will provide the desperately needed breathing room. When you add space between lines of text the writing becomes easier to scan, read and comprehend. It is also important to give space to blocks of text such as headlines, titles or paragraphs so that they can stand out and stand alone from one another. Like I said, cramped is not good.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Using every pixel on a screen is not the way to go in design, especially with the recent burst of emphasis on user experience and usability. When using plenty of whitespace you are telling the user that you care about them – which not many website today can say. However, in 2013 the number will certainly increase.

Henry Jones said, in Whitespace: The Underutilized Design Element, that “Luxury brands use this concept to convey an image of sophistication and elegance” and he is absolutely right. Whitespace is all about presentation and impression.

builtbybuffalo.com

spacebox.io

Extreme font weights

The weight of a font determines how bold the typeface is and it can change the style as well as the look and feel of a particular design. If you are going after a high end, sleek look, you may use a thin font. But, if you are after a friendly feel you are in a need of something thick. Because of high typography implementation, typography is being used at a new level for creating a look and feel for a design; it is no longer just about the typeface, whether the font is serif or sans serif.

Having a very thin or thick font is a very bold move in itself as it can sometimes be unexpected given that this type typography was hard to achieve with the technologies. Typical weights – regular and bold – are not cutting it anymore. Such drastic changes help create mood, style and contrast that typical weights could not.

domanistudios.com

minervastreetwear.com

Mix and match

Once again as technology advances, creativity and imagination go to work. Today, this means creating a mix and match among typefaces. Mixing and matching is very common in other designs such as print or graphic design. However, in web design it was difficult to achieve because of technology limitation.

Thanks to @font-face – and increasing improvements to it – designers are going wild in their typography choices. Of course, I am not only referring to font faces but also to font weight, heights, kerning and so on. Some designs call for mixing and matching to create an eclectic feel but today it is much more than that. It can give personality or lighten up a design where using more similar fonts could not achieve. Of course, effectively pairing up various typefaces is a big skill. However, the practice designers got last year will spill over into amazing combinations in this year. Mixing and matching will create harmony when matched well.

getflywheel.com

giorgio1958.com

Big typographical logos

Using typography in logos can be tricky because there are many restrictions. Recently, there have been logos where many words are part of it not just a one word company name like eBay. Those logos are nothing compared to logos like Woods&Faulk (see below) which take serious creativity to make; it is not easy to make so much text into a snug, well executed logo. A proper logo should be a representation of the company as it will become its face; such intricate logos are beautiful and should be shown off. The logos you see below are clean, simple and yet are made up of many parts – that’s effective design.

So, another design phenomenon to be anticipated is the use of big typographical logos as a center piece. This is more of a design trend that utilizes typography but it is nonetheless important to take note of. Some of these logos are creative and amazing and the companies or individuals they represent want to show them off; great logos should never be hidden especially if they are made up of type. It is not enough to show off a simple shape with a name attached but it is enough when the logo is a typographical masterpiece. 2013 will be filled with websites whose amazing logos will be front and center showcasing great uses of typography.

www.lamonluther.com

woodandfaulk.com

(Please note the mix and matching in the examples too!)

Paula Borowska

Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book.

Newsletter

4 Comments
  1. lenny Feb 10, 8:28 pm

    hi

    Lovely examples.

    I would add one more thing. The typography now is posted directly on the background, and not on a square that used to represent the page.

    It shows on all your samples but one, and it’s a nice trend.

    Designers in the past probably imitated print design where you had the page border to define the area.
    Now look for example at (your sample above): http://domanistudios.com/#/home where the text is directly on the background.

    I like it.

    Thanks

    Lenny

    Reply
    +9
  2. Marijana Feb 15, 8:12 am

    Brilliant and inspiring article how technology and typography are making for a no-excuse-not-to-be beautiful 2013. Thanks.

    Reply
    +1
  3. Vicente Ocana Feb 15, 12:47 pm

    I am still waiting to see a proper and elegant solution for hyphenating that gorgeous text we can now put in our sites (also in Kindles and Ebook readers).

    Looking at that ugly, uneven word spacing in justified texts all over the web annoys me and wrecks all the typographic design efforts put in an otherwise beautiful page.

    Reply
    0
  4. Robin Mar 4, 12:54 am

    I like the way your article about attending to the details of web typography uses a slanted roman as a false italic. ;-)

    Reply
    +2

Leave a Reply

*
* Minimum length: 20 characters