When it comes to web typography in terms of website design, this is arguably one of the most untouched elements of website design. Considering that website design constitutes of several elements like basic website design or layout, the content, the functionality, the fonts and even the graphic elements. Having had the good fortune to be a part of several development teams and witnessing several development models it is safe to say the importance level of the typography is not anywhere close to the importance the graphic elements, design or even content for that matter.
However there are always exceptions and these exceptions are usually client driven and very rarely at the website designer level. However this article is here to remind you and make you aware of the importance of typography and how it can be effectively used across your website and even in a newsletter that you design.
What the statistics suggest:
In recent times several statistics have been collected on how the fonts are used and other typography statistics. These studies have been conducted for use of fonts in the newsletters published on the Internet as well as several responsive websites. Hence the main common element being that all of these layouts were responsive.
The primary heading of the elements mainly used Sans-serif as their font. 74% used Sans-Serif and 26% used Serif
The body text showed the same pattern. 64% used Sans-Serif and 36% used Serif.
The most used heading San-Serif typeface is Helvetica at 16% and Arial at 14%
While the most used heading Serif typeface is Georgia at 24% and Merriweather and Times at 4%.
The statistics study showed that the Serif font is more popular on the body section than the header.
The statistics suggested that Times New Roman is a font hat is not used anymore while Helvetica is one of the most popular ones used.
Tips and tricks to get the upper edge:
Where to start:
It is often found that the first place a web development project and design of a web page begins is from the header itself. Although that may be effective the process can be optimized by starting with the body section of the web page. Once the body section has been designed and finalized the header section can be done proportionately thus resulting in a better website design.
When it comes to the desktop font size big is apparently better with the statistics showing that the most popular font size on the desktop body section was 16 pixels with 44% of the websites studied using it.
In fact the most popular size for the mobile versions was 16 pixels as well with 38% of the websites implementing that.
In terms of uniformity approximately 72% maintained uniformity on font size across their website.
Off the other 28% who did experiment with the font sizes across their web page, 64% increased the size while 36% decreased the size.
One of the key elements to consider when making a design of your own is the viewing distance is not the same for every device. For example the viewing distance of an iphone is lesser as compared to that of an iPad however if viewing on the desktop pc the viewing distance is even larger. This is one of the most important factors that affects the way in which you can design the pages to be more effective and easy for the readers.
Maintaining the correct proportions is something that comes intuitively however it is important to make sure you take all the elements into consideration. One of the most important elements that matters is the width of the body type which is usually measured in pixels. The average width of the reading area in 600 pixels however when it comes to designing the website and using the appropriate fonts, the average values are of no significance. The selection of elements largely depends on the design being developed.
The line height is of importance as well and is often referred to as the Leading. As per the statistics where the 16 pixel font size was the most popular font size, the most popular line height was 24 pixels.
The statistics went on to show that about 22% of the websites reduced their line height on the mobile versions.
When it comes to the color of the body font, black happens to be one of the most popular colors used. This is followed by the color #333333 used by approximately 16%. In another interesting statistic there are more than 28 different shades of font color found most were based on the black shade.
The average size of the header text as per the statistics collected is 30 pixels which is used by 18% of the websites studied. The second and third popular groups were 24 to 26 and 28 to 36.
Responsive design is constantly gaining in popularity. Halfway through 2015 and there has already been a very big difference in the number of websites using responsive design. This has thus impacted the way web designers deal with typography as well. Several statistics and hits mentioned in this article showcase how the average web designer deals with such issues and what the most popular trend is.
However that said a more important and relevant trend is beginning to emerge which suggests that the websites in the future may no longer be responsive. The trend being that more number of ecommerce websites around the world are giving more preference to their mobile apps which creates an interesting opportunity for web designers to develop websites that are not responsive. In doing so there is a better opportunity to develop a website that is optimized for the desktop and make use of several advanced techniques that might not be possible while implementing a responsive design.
Alakmalak has been developing websites since a while and there have been several trends changes in website design over the years. This makes the designers well prepared to deliver new, creative and innovative designs to our clients. They have achieved an amazing feat by developing more than 2000 websites for clients from all around the world in their first 10 years of existence. Since then they have been continuously expanding and have high client retention ration too that speaks for itself.
- The safe and successful website or newsletter with the right typography