[ NEWS ]

Ten years ago, Oliver Reichenstein famously – well, famous to web developers – wrote, “web design is 95% typography.” Ten years on, the quote still rings with a lot of truth. Despite all of the innovation in video and interactivity and animation, the internet is still very heavily text based and you have to sift through articles and think pieces and paragraphs to get the information you need. This is why it’s so important to treat typography as a user interface and use it as a way to lead people through your content. In the past ten years, web has changed – best practices have been updated, there are new CSS elements with which to play, and trends in typography have never been cooler.

Everything on a webpage needs to have a purpose. Images need to tell a story and reflect page content, text needs to be concise, clear and informative, and the layout of both needs to help the user find what they need. To make good, legible and easy-to-use websites, there needs to be a typographic boilerplate where the cross-browser optimization, line-height, font size, and font is all laid out. From there, the heading tags all need to be set up and establish the visual hierarchy of the site—and they don’t hurt SEO either. Paragraphs, meanwhile, are what can make or break the legibility of a website and you need to always keep the gestalt principles in the back of your mind when laying them out. Word-breaks, indentions, line-height, and links can all be taken care of with CSS3; however, these properties need to be thought out to work at every resolution.

What makes web typography tough is the fact that it needs to be readable and look good at every device width and resolution. Just because the double space on the desktop looks great, doesn’t mean it’s going to translate well to the iPhone or Galaxy if you’re not using the correct relative units. Cross-browser and device compatibility need careful back ups for font optimization and legibility at different sizes. Media queries, em, rem and viewport width and height are how we combat responsive design issues and keep within good typographic design practices while allowing the user to find what they need quickly and efficiently.

But web typography isn’t as boring or as rigid as it sounds. Once you have a core understanding of basic typographic design theory and how it applies to web design, there is so much you can do now for websites. There are more webfonts now than ever before and not just serif and sans serif. Handwritten, watercolor, and script fonts don’t need to be made into a .png to be used on a website anymore and their popularity is skyrocketing. Any font that isn’t a webfont can be utilized via @font-face but there are some downsides to that. Namely load time and the font being free to download from your website if you aren’t careful with it.

And it’s not just the different fonts that are exciting. With new properties in CSS like blend-modes gaining traction, your type can stand out in ways it never could before. We can look forward to new trends utilizing blend-modes, animations and transitions to bring attention to content while still giving the user the information he or she needs. Meanwhile, new trends in design are subverting magazine style articles for websites that almost feel tangible and using handwritten typography to make your computer screen feel somehow organic. UX is more interactive than ever before and with web applications, phone apps and the rise of material design, typography isn’t stagnant like it would be in print. It’s dynamic and needs to evolve based on the content and the information you want to convey.