When working with type on the web there are some basic principles, basic approaches and basic goals and guidelines that you need to consider.
However, the overall medium of web typography has 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 need 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 at 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 crows 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 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 please feel free to subscribe to our feed. Why not also join in the conversation with us on Twitter and Like us on Facebook too.
