Once a way for the typists to earn their daily wages, typography can now make or break a website. Think of yourself as a John Doe for a while; how would you feel when you come across a site with outdated fonts? Or a site, whose homepage showcases repulsive typefaces?
You’d be pissed. Isn’t it?
Expect the same reaction from your site visitors. If your site lacks improved readability, if the fonts are too large or too small, then the visitors won’t be impressed with it. You need an attractive layout and eye-catching design elements on the site, but alongside, you need alluring typefaces too.
Typography in 2015
In 2015, typography is a leading design trend. Not paying heed to it will result in an unimpressive site design. The designers know that very well and keep themselves updated with the latest trends. But just as staying posted is important, so is avoiding mistakes. There are common typography mistakes, which designers need to avoid.
We’ll discuss those mistakes here.
Not using fallbacks
There’s a reason fallback fonts are so useful. Fallback fonts stem from CSS specifications. When designers put CSS codes, they list all the fonts they want the browser to render and separate each font from the other with the help of comma.
The benefit of using fallbacks is the browser will always render them even if it doesn’t support web fonts or if a third party web font supplier goes through any technical glitch. If you don’t want to select the fonts yourself, no problem. The font provider will do that for you. Typekit, for example, helps find the right fallback fonts.
Forgetting mobile typography
Very soon desktop devices will become relics from the past. The design industry needs to take that in stride. When opting for a new design trend, they need to triple check whether it suits mobile devices too or only desktop computers.
Mobile typography is the next big thing. Designers sometimes face trouble deciding on a pixel size. If they go for an absolute size, the fonts might end up being tinier than they should be for a small screen. Sizing with the em unit helps as they are not absolute. If you don’t want to use ems, then use JavaScript media queries. The viewport meta tag is an easier alternative as it helps the site scale in respect to type and screen sizes.
Not considering functionality
Immersing into aesthetic and visual enhancement can be counter-productive. The designer needs to consider the functional aspects too. If the navigational items and other design elements have functionality issues, then no matter how fascinating they look, users will keep complaining about the site.
Desktop and mobile sites are different when it comes to functionality. For example, buttons on desktop sites are designed to be clicked whereas those on mobile sites are designed to be tapped. Such differences pose big challenges to designers.
They need to design a type that discloses its functionality to users. Such a type should be large enough so users could complete an action easily. Since Smartphone screens are small and low-contrasting, the active text boxes such as contact forms need to be appropriately large. The fewer the configuration, the better for a site. Otherwise, users might get confused.
Identifying rogue fonts
How to identify them?
The easy way is to stay away from pirate fonts. If you are using them, you are using rogue fonts. And there’s an ugly payoff. Whenever you use a font, there’s a third-party server that grants you permission. If you pay for a font, you are authorized to use it. But before you use it, you need to know the limits of the authorization.
Are you authorized to place the font file on a web server that’s publicly accessible? Read the end user license agreement (EULA) carefully to know what you are legible to do with the font.
Incorrect spacing
If the spacing is inaccurate, the readability aspect of a website would be affected. Imagine you keep the letters big, but the spacing is incorrect. The letters won’t look appropriately juxtaposed. Keep apposite space between them. For a whole paragraph, spare margins and padding so each line of text appears separate from the other.
Keeping the five design trends in mind can help a designer create better fonts and improve a site’s readability and functionality.
Image Courtesy: www.mtgreens.org
