The typography of a website deserves as much thought and preparation as the images and the rest of the design. As with colors and other stylistic choices (we're looking at you flat design) trends come and go. Here is a look at the current trends in website typography from a study done by Smashing Magazine.
Serif vs Sans-serif Fonts
Serif fonts or sans-serif fonts? Will the question ever be answered? It turns out the web is pretty evenly divided on the option. Heading text leans slightly more to the sans-serif side of things with 51% of responses, while sans-serif had 47.1%, the remainder identified as "both". Body on the other hand, skewed very much to the serif fonts with 61.5% to only 36.5% sans-serif fonts. These statistics seem to indicated that many designers use different font families in headings and body text to add to readability and the overall site design.
And the most popular type faces are...
Others! Designers are stepping away from using the traditional, standard font families such as Georgia or Arial. While Georgia does come in second as the most used font family in both headings and bodies, Other fonts have two times as much representation. This shows a tendency for designs to not only be unique but also demonstrates how typography of websites has become part of the overall branding of a brand.
Light Background vs. Dark Background
A light site? or a dark site? It can be a difficult stylistic choice, so what one reigns supreme over the internet in 2013? Light backgrounds with dark text is the style of choice. However, that light background can rage in a variety of lighter color shades, light greys being a popular choice.
Headings tend to be rather large with 29-32px being the most popular choice. However, the trend is for larger and larger heading sizes. The combination of sizes over 33px proved more popular than the smaller font sizes combined. When it comes to the body 14 and 16px were the top two choices.
Responsive design has been a hot topic in the web design world lately. However, interestingly in this particular study, none of the sites were responsively designed. Instead, many sites chose to have separate mobile websites or mobile apps.
Whether you want to buck the trend or take a more established route with your website design being aware of the current trends can help. How does your website stack up to the trends, or how trendy are you? Tell us in the comments!