Setting type on the web – 5 principles and ideas you need to know

Published April 20, 2012
Last Updated August 2, 2019
Jask Creative

When working with type on the web there are some basic principles, basic approaches and basic goals and guidelines that you need to consider that make up “web typography”.

However, the overall medium of web typography involves readability, accessibility, usability and brand ability.

When mixed together on the web, these aspects function together to accomplish design’s goals of communication and user interaction.

If you want to create effective and expressive results then there are many ways you can approach web typography.  This blog looks at some of the principles, rules and ideas that should be used for approaching Web typography decisions and we hope they will help you achieve effective typesetting on the Web.

Approach Web Typography Decisions Systematically

In web design, every typographic decision needs to simultaneously accomplish a variety of results. Every single headline that you create for your site needs to be in text that is legible to the reader and search engine friendly, not only that the chosen typeface should ultimately fit in with your company brand guidelines. As well as fitting in with company guidelines the typography should meet the user expectations of being able to copy and paste text.  You have probably realised that is a wide array of requirements to accomplish for a headline.

On some occasions, this can cause a problem. For example, styling and branding guidelines it may require the designer to use specific typefaces which cannot be used online directly. This is when a decision has to be made:

  • Do you move away from the given brand guidelines so you can achieve optimal search engine friendliness?
  • Do you use an image replacement solution
  • Do you consider using sIFR (rich flash based dynamic font)? This allows you to embed fonts into content presentation

In many cases, the myriad of goals Web typography needs to serve will be conflicting with each other. With each client and for each project you need to prioritise and define which goals are more important than the others. Some clients will be more concerned with maintaining brand identity, and others will put search engine friendliness higher.

When it comes to typographic decisions you need to focus on the problem in hand.  Different sites require different needs and there is never one answer for each individual problem. You need to analyse each of the strengths and weaknesses presented to you.

It is a common problem in web design when looking for typography for headlines as it is not just a case of selecting a font. Using a systematic approach can also be used in other areas of your web design.

Utilise Information Hierarchy

When using typography it is important to define precedence. This includes the type size, colour, weight, case and whether you choose to use normal font or italics as this gives the font a greater or smaller importance. Another important factor that needs to be considered is placement of the type on the website layout.

Depending where type is placed on a website, users will react differently.  Type placed in the upper body of the page will be of more importance that type placed in a sidebar or on footer. However, placing larger size type in the sidebar will draw attention to itself.  Note: always carefully balance your type in the main body and sidebar areas based on how you want the user to digest the information that you are presenting to them.

Always design your site for optimum flow

For a page to flow correctly hierarchy is very important.  Correct hierarchy helps users recognise the most important elements on a page as they are scrolling through the page.  Other typographic issues also affect the page flow. One big issue is spacing – white spacing, tracking, leading, indention, padding and margins are all elements that form a good page flow.

The responsibility for creating good page flow lies with the designer.  A good designer will concentrate on each element of spacing and hierarchy. Once he has done this he will review to see how they all get with each other together.

Maintain Legibility within the Presence of Branding

If you want your website to stand out from the crowd then it has to be visually stunning.  This could be in the form of an elaborate design. If this is the case then the typography has to be exact. When a font is embedded in an image you can use it in a variety of creative ways.

Treat Text as a User Interface

Text within user interfaces is very important. More to the point ‘every letter matters’.  Your choice of words in a user interface can be a make or break for the site functionality.  Just as important is the presentation of those words.  If the type is un-styled then the user has no idea how they should interact.

A user experience should be enhanced by good creative design elements and having good typography will improve the user experience.  Many elements make a good experience – communication on the site, flow of the site and the interactive aspect of the site.  Brand, typography and design all form a great user interface for your users.

What are your typography tips for web design? Please add in the comments below.

To keep up to date with our blog which is packed full of useful information relating to graphic design, branding, printing, social media and web design sign up to our content found to the right of the screen . Why not also join in the conversation with us on Twitter and Like us on Facebook too.



you may also be interested in...

Web Portal Design – a Guide by Jask

Over the past few years, web portals have become popular platforms for businesses. With the help of our in-house digital experts, we’re exploring the world of web portals, highlighting some design examples and providing the top tips and tricks of web portal design...

Boost your marketing with an integrated agency

Alongside highly specialised agencies, there are agencies that take an integrated approach - covering multiple specialisms and organising internal teams to make these work together. In this blog, we cover the advantages of an integrated marketing approach and how it can boost your strategy and brand. ...

View All