A typography is considered as one of the important aspects of effective website design especially for those sites which contain a large amount of content like articles,news, blogs, and stories. It also improves the overall user experience therefore as a designer or developer you should take this as serious as the design of your website.
Since the evolution of responsive web mobility, new modes of browsing websites and reading text have emerged which introduces a new complexity with new implementation challenges to make the web typography as rich, versatile and accessible as ever before.
We researched many websites that focus on text-based content rather than on generic graphics as readability of content is the main concern of these publications.In this article, we will explore some website design patterns and current practices in web typography
Popular Serif and Sans-Serif Fonts
A typography has the capability to set the tone for the entire website, and a wrong choice could send the wrong message.Contrasting a serif headline with a sans-serif body or vice versa can improve the overall visual appeal and readability of a website.
Serif and sans-serif are almost equally popular in headlines.
- The two most popular typefaces are Georgia — used on such websites asThe Guardian and the Financial Times — and Arial — found on de and the BBC’s website.
- The most popular serif typefaces for headlines are Georgia (14%) and Chaparral Pro (6%).
- The most popular serif typefaces for body copy are Georgia (20%) and Chaparral Pro (4%).
- 66% of headline typefaces and 39% of body copy typefaces are found in only one instance.
- The most popular sans-serif typefaces for body copy are Arial (14%) and Helvetica (6%).
Light or Dark Background? – Black text on a white background is a common pattern for body copy.
Other important points to consider are –
Average Font Size for Headlines – The most popular sizes range from 20 to 32 pixels.
Optimal Line Height for Body Copy –
line height (pixels) ÷ body copy font size (pixels) = 1.46
line length (pixels) ÷ line height (pixels) = 24.9
space between paragraphs (pixels) ÷ line height (pixels) = 1.39
Ratio of Headline to Body Font Size
HEADLINE ÷ BODY COPY = 2.5
Characters per Line
Web Typography and Responsive Design
Average Font Size for Body Copy
However, employing these practices to improve the pleasant reading experience and keeping the reader’s interest on a site can be quite a challenge. With the help of this article, you can sharpen your typographic skills to develop a quality website.
iMediadesigns provide web development solutions and offer custom web design services in Toronto