Now you may think that the average visitor might not notice good typography – at least not consciously. If they’re there to buy trainers for example, the probable front-of-mind thought will be ‘where are my new trainers at?’ They may well not give typography a second thought.
But if a site strikes them as cluttered, with words that are hard to read and jar from a visual perspective, that will register. It could even potentially cause a visitor to avoid your brand in the future.
So what is key to typographical success? In this blog, we’ll take a look at the role of modular scale from a design and development perspective, as well as what should go into your font selection and the importance of ensuring your site is spot on from an accessibility standpoint.
Modular Scale
“Applying modular scale to your font choice is critical in achieving a typographical rhythm to harmonise with your new website layout,” says Darren Barrett, lead digital designer at Un.titled. “Striking this balance effectively means you will have a free flowing site that is uncluttered and allows the eye to rest before moving on to more content. Your site will quickly feel complete and ready for the world wide web.”
What is modular scale? According to Canadian typographer Robert Bringhurst: ‘A modular scale, like a musical scale, is a prearranged set of harmonious proportions.’
The smallest text size used for most fonts on a website is 16 pixels, though in some cases this needs to be bumped up depending on the font family that’s been selected.
So the modular scale can be applied to work upwards to then calculate the size of the headers and subheaders that feature on the webpage.
A term synonymous with modular scale is the golden ratio. Mathematically speaking, two quantities are in the golden ratio if their ratio is equal to the total of the larger of the two quantities. So, put simply, the golden ratio is 1 = 1.618.
As a rule, many web designers will apply the golden ratio to the modular scale as a basis from which to set the rules for their page from a typographical perspective.
Web Development
From a web development standpoint, there are a few ways to implement modular scale.
“We currently use the sass package provided by modularscale.com,” explains Jamie Hunt, Un.titled’s senior front-end developer. “modularscale.com provides developers with a clear and consistent approach when employing a typography scale in order to match font sizing used during the design phase. Modular scale provides us with several utility methods to produce the typography scales necessary. This helps automate the process of working out the correct scale and enables us to match the design and rapidly prototype headings, paragraphs and the like for use during development.”
Accessibility
Another vital consideration which should permeate any typography is accessibility. Websites must cater for all visitors if they are to be successful. This includes visitors with learning difficulties or vision problems.
Important factors when it comes to accessibility include font choice. “You need a font family that compliments layout, design and branding, but is also accessible for all visitors,” says Darren.
Other vital elements are getting word count per line correct, with 22-30 words being advisable, and meeting general usage needs. This would include the suitable use of capital letters and bolding for example.
Though beautiful design is of course important, accessibility is at the heart of what we do in the typography and font space. This all helps when it comes to passing Web Content Accessibility Guidelines.
Un.titled’s recent work with Film Hub Midlands utilised the possibilities of modular scale and the golden ratio, while still prioritising accessibility.
The golden ratio was applied to the base font to help create a legible and engaging user experience.
When it comes to the size and style of the words used on your website, don’t make a rash or rushed decision. You could negatively impact the user experience if you do so.
Want to take advantage of Un.titled’s UX design expertise? Say hello
