Different font styles separate different page elements visually
The innovative font of their slogan establishes the Royal Drawing School as an artistic institution. Notice how the italics in the ghost buttons set them apart from roman links in the top navigation bar.
The bizarre font for the heading of the Tomas Bata University's home page enhances the mysterious future-predicting theme, but the site switches to something more legible for the important links.
Here wildly varying type styles work surprisingly well together
Aquatilis Expedition wildly varies the use of its typography, with a customized brand logo, loud header, and coloured body content that makes full use of the black background.
We'll end with Drexel University, whose typography seems simple but actually works on different levels. The site uses both the text's size and composition to create a visual hierarchy, gently guiding the user's eyes through the words and onto the call-to-action.
Conclusion
Since vision is our dominant sense, how a word looks is just as impactful as what it means. It might seem easy to neglect typography in favor of gorgeous background images or flashy animations, but doing so is neglecting an advantageous opportunity.
To start designing websites that are as visually stunning as the ones shown, feel free to start prototyping in UXPin. Once you start a free trial, the collaborative design app comes loaded with hundreds of typefaces, 1000+ custom elements, and dozens of rich UI libraries. No code required.
Words: Jerry Cao
Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform.
