Web Typography is a cornerstone of any visually appealing website. A good typeface can enhance the readability of a website and make it look legit in front of its visitors. It is the most valuable element of a website and reins above anything else. However, learning the ins and outs of typography can be a daunting task, especially when it’s about mobile. Responsive typography is a concept that the majority of graphic designers finds difficult to deal with. The challenges become all the more prominent when they confront the varying screen sizes and resolutions, thus making them scratch their head perplexedly.
Designing a typography that meets the modern needs and expectations of mobile visitors requires a strong precision and knowledge to deal with the task seamlessly. Creating a web page that flows smoothly on both desktop as well as mobile devices can be a nervy experience for any designer. There are a variety of factors that designers need to keep in their mind such as responsiveness, device specifications, the amount of space available, contrast, and a lot more to make their typography work and look impeccable on a range of devices- desktop and mobile.
In this post, we are going to discuss about some factors that one needs to consider while designing a great looking mobile typography.
- Contrast is important
- Measurement and Readability
- Consider Space
- Don’t Neglect Screen Width
Would you please with a website with a pink background and red text? Of course not, because you can’t read its content. Designing a typography for mobile should not force you to get sidetracked in a bid of doing something creatively. Mobile typography is based on usual principles and standards which you follow while designing a traditional website.
However, it is important to pay attention on the amount contrast one plans to implement for desktop and mobile devices. Try to understand the context your website is being viewed on mobile devices. For example- the majority of people tend to browse websites on the move. This place can be anything- a bus stop, a sunny garden, movie hall, or anything that matters. This implies the importance of higher screen brightness as users aren’t browsing under a controlled environment like home or office. That is why it is critical for designers to understand the significance of using better contrast to allow mobile users access their website effectively under a variety of conditions. Gather.ly website is a great working example that showcases how a great contrast can be achieved. Its text on black shadowy background looks quite amazing and highly readable.
In typography, measurement is actually the length of a line of text. As per the standard practice a line with 45-75 characters is considered suitable to offer an effortless reading experience. For a mobile-friendly website, 40 characters in a single line is ideal. Designers need to establish a sense of harmony between while determining the number of characters need to be included in a line. This will help you pique your visitors interest while reading the content of your website.
Also, avoid making fonts too large or too short to make a logical use of available space on mobile devices. Do not force users to zoom your content and then read it. Alignment is yet another important aspect you need to take care of. Make sure you don’t unnecessarily experiment with alignment and keep it as natural as possible. The reason why I am saying this because people normally have habit of reading text from left to right; and any kind of unexpected change can make them feel annoyed immediately.
As we know that mobile devices have a limited amount of space available, it is crucial to plan the placement of your fonts in a way so that they don’t consume a lot of space. Also, avoid squeezing the characters to give your page a clean and readable appearance. Designers need to strategically deal with the spacing issue if they seriously want to give their design an edge on mobile devices. They can choose to increase the length of margin to make the text fit gracefully on the screen. Mobile users can happily scroll sideways, but definitely mind looking at tightly packed fonts.
In mobile typography, it’s hard to ignore the importance of screen width. Screen width includes both horizontal as well as vertical width. Designers must avoid using large fonts because they eventually end up occupying a lot of space. Large texts also cause breaks which isn’t a nice practice to ensure a quality reading experience.
To Wrap Up
When its about typography for mobiles, consider the type of fonts you are using. Do not choose fancy fonts like Novelty, or Scripts as they look bad on mobile devices. Also, get rid of anything that’s undesirable or create a bad impact on your website. Keep your design as clean and comprehensive as possible to let fonts gain importance.
Mike swan is professional WordPress developer and helps users in converting PSD to wordpress theme services. He loves to share his experiences in web design and web development trends.