Good typography makes a website stand out or can outshine it. It plays the role of portraying and bring to life your ideas to make them appealing for the reader; it also manages to organize the content to be browsable, so in that way, typography involves the correct use of a layout, convenient measurement, nice typefaces (digitally called fonts), sizes, leading, visual hierarchy and color for the information to be well disposed.
This article will consider different aspects of the web in order to show the trends that will attract great attention next year; it will also analyze the strongest typography styles, and we’ll see some beautiful examples of pioneer websites with an appropriate implementation of typography. We’ll analyze how some typography is performing and becoming a trend by looking at some of the most popular media and their websites.
Some context first…
One of the main factors in typography changes is not only the pass of time, but the establishment of trends. They are started, generally, by single outsiders who get tired of the same patterns, so they create new ones. Throughout history, changes have occurred mostly in the way we share information, and its spread (Woodblock Printing, Movable Type, Printing Press, Lithography, Offset Printing and Digital Press) but by the time information was commonly shared and widely spread, humans started to concern about the most effective ways to transmit it. This way, different typefaces started to be created, different dispositions were tested, and several improvements were made to layouts to achieve this purpose.
Some aspects to have in mind are a precise application of hierarchy, which is necessary for the reader to find and interpret the text easily; good measurement can be applied to headings and paragraphs to makes them recognizable as such; colors connect elements as well as differentiate them, and also give contrasts among texts. In the case of typefaces, choosing one or two that improves readability, and keeping plenty of contrast between them would benefit the script. Leading allows the eye to go from one line to the next comfortably, so be sure as the line gets longer, also does the leading. This article explains how typography affects readability and legibility.
With typographic basis established, we can now start considering what’s going to take place next year, based on what’s hot today and on those outsiders we’re gonna feature. What’s important to point out is that, nowadays, content is lighter. Less content does not mean lack of addition of text or images, but getting rid of useless stuff; it means simplifying things in order to engage readers, and most importantly, not making them lose time.
These are the most important typography trends for 2014.
While web standards turned flat and responsive, so did typography. The need of unified looks affected the typography directly, with some families acquiring importance (like san serif typefaces), including Helvetica and Arial. They need to get flat not only to match the overall design of the website, but to reduce the amount of information the reader needs to process.
In such way, as long as this trend in web design continues, also will the typography related to it.
In this scenario, great media companies still have an “old-style” appearance. News sites like The Washington Post and The New York Times haven’t still been captivated by the flat trend; this might be because of one of these two factors: either they still deliver a printed version of the newspaper, and they need to retain certain image, or the management can be delaying or (most probably) working on a redesign. However, these media sites don’t change at the pace of digital media, and one can notice the difference between digital and traditional media.
Here, you can see the average traditional news media typography in their respective websites.
The Wall Street Journal has a traditional layout, using both serif (headings) and sans serif (body) typefaces…
So does The Washington Post…
And the same happens with The Times of India.
The New York Times uses serif for both headlines and body text, with some rare exceptions.
The Daily Mail has a san serif based layout, but it still looks like a traditional newspaper, mainly because of the use of colors and content disposition.
On the other hand, this is how digitally created media looks like today:
Mashable uses sans serif for body text and menus, and slab serif (Egyptian) for headlines. The layout looks lighter thanks to pastel colors and enough spacing between words…
Same way as TechCrunch, which differs only in the use of fonts (TechCrunch uses just one typeface)…
And so does USA Today.
The Huffington Post looks like a traditional newspaper, but somehow they’ve managed to give it a clean and nice flat appearance. This is greatly because of an adequate combination of two typefaces, and enough space for words and texts.
Icon fonts have become a big deal for their simplicity and scalability. The idea behind this is elementary, and it’s strange the fact they weren’t something to consider a few years ago. Icon fonts have the possibility to be enlarged or reduced according to the needs of the user, and most importantly, they have been largely implemented due to the release and popularization of retina displays. Since they are vector based icons, they can be implemented as fonts; that way you can escalate, change colors and apply effects to them the same way you do with a regular font.
Icon fonts are taking off, a for sure will be a pretty important next year.
Icon fonts created by the Shock Team
Icon fonts have been implemented in several important websites; they’re gaining strength and they are clean, and easy ways to complement content. Here are some examples of their implementation in menus (describing products or services), social buttons, and other places of the layout to highlight content and redirect attention.
Designmodo applied icon fonts to its social buttons; this provides advantages like color transitions, styled fonts and lossless enlargement.
IcoMoon use their own nicely designed social icon fonts to engage the user in their networks.
On the other hand, jQuerySliderShock uses a set of icon fonts as a complement for the descriptions.
The interest for personalization goes beyond any web development barrier; every day, new designers create things that differentiate them from the rest, and typography is off course one of the most important things included in it. Some essential things to note here are the actual differences in every website. Handwriting allows to apply different styles, sizes, and they can have many shapes with the purpose of fitting the rest of the design. This has become a trend, even though there’s no unified appearance, and this will definitely be important next year since even more designers will adopt it.
For example, the main font in Hello Studios is flat and irregular, and it looks like balloons. The second one is more stylized, but complements the design by being more down-to-earth.
The main font in Creep Fest resembles a spider web, matching the rest of the design which has an obscure style.
The website What Happens Next mixes three fonts: two handwritten and one serif. The main font is very thin, and it’s appealing to children or parents with children.
In MiddleMojo, the designer uses different typefaces, all of them with a visual relation with each other. Colors are important as they divide sectors.
Although these three trends are important by themselves, flat it’s getting most of the attention. Everyone wants a piece of the “flat” cake, but when the water calms down, we would be able to see more clearly, noticing that typography plays a huge role in web design and that there’s more in life than flat. In the mean time, keep experimenting. Next year may be too late.