Typography – A Key Design Element

Having recently completed a Bachelors of Science degree in Multimedia and Web Engineering, I am now tasked with having to find work. The degree is quite broad in which you can move into different areas such as software production, database analysis and web design; essentially frontend and backend. I’ve a personal preference for front-end development and web design because the aesthetic part of making a website and being able to view what you make from the very beginning brings a certain satisfaction to me, along with the principles and devices used in design.

The Process

This interest was first piqued during my final year of my college degree in my Web Design elective. We were given an assignment – design a newspaper website: One homepage and one article page, styled with referencing the devices used in physical newspapers (mainly broadsheet newspapers) and using modern online newspaper website design principles also. This involved a research phase, by collecting examples of physical newspapers, and noting what devices and design aspects were used with each newspaper that made them unique, and what stylistic properties we identified and liked, that could be used or even referenced in our own designs. There were stipulations involved in creating these websites, and the main one was that it was a typography only website. There would be no colour and no imagery. Black and white and shades of grey could be used as a design device – such as contrast. We would have to find and select our own typefaces, based on studying what different typefaces were used for different newspapers, and how a mix of serif and sans-serif fonts created contrast, hierarchy and alignment. Although we could make note of the use of colour and imagery in the layout of the papers, our own would not contain either design aspect. After the design phase and with weekly discussions with our lecturer which would make up the main section of the iterative process, we would then go and code our designs using HTML, CSS, and time permitting Javascript and SASS.

Research Phase

I used many different publications like The Guardian, The Financial Times, The Times, as well as a print out of a copy of the Manchester Guardian from the 1950’s to explore how the design of the broadsheet had changed from its modern day incarnation. This involved very little imagery and in fact had many stories and articles condensed on the one page, with horizontal and vertical line breaks acting as partitions to divide the story and in turn make them more readable. Lines are an important device used in publications that take on many different roles as ordering of stories, divisions to make stories naturally more readable, and to separate stories from one another on the page. In the Guardians instance they were used to separate headlines and authors from the main body of text, and this device was also employed by the financial times, with a straight lines being replaced with dotted lines, assuming the same effect.

I made notes on each publication and resource I found and noted the use of white space on a paper to naturally draw the reader’s eye to certain elements of the page. Hierarchy in font size to distinguish a main headline with a headline of less importance, a second headline, font size difference for a headline and a lead, and again for an author name. Font weight, italicising and underlining drew attention to important words that the author wanted the reader to notice for emphasis or to stress a point. In some broadsheets, the use of serif and sans serif fonts in headlines and leads are devices used to catch the reader’s eye, as a mark of differentiation. The use of pull quotes that literally are a copy of an important part of the text, usually placed inside the columns depending on the design of the newspaper. I also had to learn of the importance of drop caps and when to use them. In the end the resources I chose didn’t employ drop caps or pull quotes, so I decided to leave them out of my own iterations.

The more we were taught and the more we studied the more we learned that everything involved in the typography and writing of a newspaper is carefully thought out to keep in line with the newspapers design – design’s which for some papers have been set for over half a century. Everything is taken into consideration including column width, how many words there should be per line for readability purposes, which is generally around twelve to fourteen. Line height, leading (also known as line spacing from baseline to baseline of a character, is calculated by multiplying the font size by 1.4), letter spacing, which is measured by the font size multiplied by 1.61 and ensuring the paragraphs don’t include widows or orphans. Widows are single words at the end of a paragraph and orphans are short lines or a few words at the beginning or end of a paragraph that is separated from the rest of the paragraph. They can often interrupt the reader’s eye and affect readability.

The next step of this was to study the online resources I found and look at how they employ the same and similar devices. As I chose The Guardian as a physical source I went to the website to see if they used the same design effects thematic with the paper for the online edition and found that they did. I also stumbled upon Politiken as it had won awards for its design as well as the New Yorker, a magazine that has its own typeface made for its publications. I explored how they implement the old design patterns including white space, hierarchy, alignment, structure, and weight in their online interfaces and how they implement modern online practices in order to catch the reader’s eye and lure them into visiting another page on the site, such as sidebars that scroll with the user, animations and transitions, as well as the aforementioned design devices.

Design and Coding Phase

With these in consideration, along with the fact that no imagery or colour could be used I set about making mock iterations on Adobe Photoshop and Illustrator. I chose two fonts for my website, with the main text and headline texts being Martel, a serif font, and Raleway as my chosen typefaces as they both had a myriad of different styles to choose from, which would come in handy in terms of weight. It’s always a good idea to choose a font with multiple styles to account for different hierarchies and weights as well as italics.

I came up with three different layouts or ideas and expanded upon those typographical arrangements with varying changes and alterations, resulting in different experiments on the three different designs. I’d say altogether there was about fifty different iterations. The purpose of this being the exploration of the different design principles of typography, what works together, what doesn’t and how best to utilise them after refining the designs over and over. After this process, one design was chosen, so I went away to write the code to design the website, which was the most fun part about the whole project.

The layout of the home page was to include a main article, a second smaller article and five short articles you’d find a snippet of the story before being directed to a different page to continue reading. I decided to employ a huge 108px size headline to greet the reader when they first load the page as the headline, using the Martel font. The body text typeface would be Martel also, with the author and lead in Raleway to contrast and differentiate the sections. I borrowed the idea to use the line breaks from the Guardian and Financial Times among others to partition the date and author from the rest of the piece and also place some white space between them for structure and positional purposes.

Also I went with a quite distinctive hierarchy and my font sizes and line heights demonstrate that, all lines were parallel and could read across and not affect readability. I then used different shades of grey to also produce a contrast, especially on the hover functions over links, with the sidebar and smaller headlines and leads in the sans-serif Raleway font, using a bold font to grab attention, and upon hovering over the links they would change to a lighter shade of grey – indicative of a clickable link, a modern online device. The line breaks were again employed as dividers between the headlines and to aid in establishing the end of the mini-articles once expanded and collapsed.

 

 

The main page as it loads on screen, with the collapsed side article right

On the main article page, due to time constraints, I rushed to submit the assignment on time – I forgot to remember to keep the word count per line down for readability purposes. However, I implemented a scrolling sidebar that scrolls with the user down the article, much like The New Yorker or the Telegraph employ on their sites.

 

The article page with scrolling sidebar articles

The last modern device to port for websites was that the website itself had to be responsive so that it would fit on smaller resolutions (tablet, mobile, etc). It was built in the bootstrap framework so hidden commands in the CSS were used to basically hide any elements in large resolution and in reverse hide any large elements in the smaller resolution, which also impacted on the readability and layout of the pages.

Summary

So to summarise, in making this website using only typography design devices, there is still a lot to consider. Remembering these devices can only aid in the design of a web page albeit for a company or personal use, and these rules and guidelines carry over into every iterative design process. I was also taught how to approach the entire process from the start with the research phase, to the iterative and reiterative process and how it is the key step in the design of anything. The devices used, including space, contrast, alignment, structure, leading, size, weight and hierarchy are all key typographical design elements and acknowledging and respecting these, along with colour and imagery, will aid and improve the design in any website.

Leave a Reply

Your email address will not be published.