Typographic Design Patterns and Current Practices

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 


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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s