A first impression is normally the one that lasts. Whether you realize it or not, the typography of your website helps create this experience. Typography is not just about changing the position and the width of the text; it is about the art, design and arrangement of it.
As a non-designer; I hadn’t taken all that much time in the past to understand just how much the typography of a page affects the overall impression that a page gives. It is inherently tied to how the design of any page is created.
On the 15th July 2014 I took part in the CSS Summit webinar and heard from a broad range of speakers on a variety of topics; however it was Jason Pamental covering the topic of Responsive Typography that finished off the day on a high note and opened my eyes to the world of typography.
When looking at creating a design/build for a webpage, we need to understand that the canvas/content area we are building for needs to be fluid as it changes based on the device/display the content will be viewed on.
We don’t know the size of the screen, what devices it will be viewed on, the depth of focus the user will have when viewing the content; by which I mean whether the readers are sitting at a desk or viewing the page on a phone or tablet device while travelling.
Understanding the above points you can work on your design and the next step is to introduce text to the design, in the past I would have normally just included the old reliable "Lorem Ipsum" sample text , but Jason Pamental identified that "Lorem Ipsum" text doesn’t have a normal sentence flow and could result in producing a misleading view of the design.
What he suggests is either having a standard copy which could be reused in each design or looking at using copy which is Royalty Free; such as Herman Melville’s Moby Dick.
You can now start to adjust the type applying different fonts, sizes and weighting to it. Most Higher Education Institutions will have a branding guide which will state the typeface, sizes and weighting which should be used on the site. This document will help you create the focus on key areas such as; headings, authors, main body of text and any other areas which have been identified. You don’t have to use all the typeface’s listed in the document for the typography to look great, it will be if they have been used efficiently. This will also shift focus away from areas which aren’t as important.
Once your design is complete with sample text in place, the text and design should fit together smoothly. For the readers, the text should be easy to read, coherent and not misplaced, using the same typeface for headers and body content; making sure it stays constant throughout the design will help with this.
Looking after the typography of your website is a vital step towards ensuring any visitors to your website have a positive and lasting first impression.