7 great examples of typography in web design

By Tom May

When it comes to the visual design of a website, the emphasis is often on the photography, illustrations or vector graphics. But at the end of the day, most websites are there to be read, so typography is one of the most important things you need to nail.

In this post, we look at some examples of great typography on websites, all new for 2017, and talk to the designers to find out how they went about creating it.

01. Hi-Pointe Drive-in

This restaurant site uses typography as a design element, breaking the grid in places

The Hi-Pointe is a hip, modern spot for burgers and sandwiches in St Louis, Missouri, highlighting local ingredients and located in a former 1980s drive-in.

The website created for the restaurant by local agency Brevity strikes a careful balance design-wise, looking thoroughly modern while incorporating design elements from the 1980s.

And it’s all tied together with its clever use of typography, as Bob Schuster, partner and creative director at Brevity, explains: “On the site, we used typography as a design element, breaking the grid in certain places, and becoming a moving, interactive element in others.”

The primary headings are set in Refrigerator Deluxe from the Mark Simonson Studio. “This captured the nice blend between the industrial and mid-century architecture, along with the modern and friendly vibe we were going for with the brand. I also really enjoy how fat and bold the typeface is. Because of this, it works really well over photography,” Schuster says.

For body copy and other smaller treatments, Brevity used Museo Sans from exljbris Font Foundry. “Overall, it’s just a nice, legible typeface, even at smaller sizes,” says Schuster. “Museo still has a little bit of character that helps it stand well next to the bright personality of Refrigerator and the site design, overall.

“We kept the containers for long-form copy to a narrow width to increase readability and allow other elements on the site like photography, colour, and icons to assist in telling the story.”

02. Chris Biron

This digital designer’s minimal site lets the typography take the strain

A freelance digital designer based in London, Chris Byron collaborates with brands, businesses and startups to shape their digital projects. Currently working with Google Creative Lab, his personal website is beautifully minimal, with bucketloads of white space, so the typography has to do a lot of the heavy lifting.

Byron opted for GT Sectra for the headings and large quotes on his site. “I chose it to really hero my website, because it’s quite an unusual font, which is beautiful and memorable,” he says.

“The sharpness is less common in serif typefaces and makes the font feel fresh and contemporary to me. I also played with 3D rotations on my site and attaching these to the scroll created a real motion and control, allowing the user to be able to play with the typography in a unique way.”

Body copy, meanwhile, is set in <a target="_blank" href="https://www.colophon-foundry.org/typefaces/apercu/" …read more

Read more here:: creativebloq

Leave a Reply

Your email address will not be published. Required fields are marked *