Typography is an important but often under-represented part of a website’s layout. With so much focus being placed on the presentational aspects of CSS and the use of large images and media that choke bandwidth restraints; it’s nice to occasionally remember that textual content can also make an impact on users and their experience. Content remains king, and a few good fonts can make even the simplest of sites look smart – though not so many that you have to wait for ages for the text to be visible.
Because of this, I’m going to show you a few handpicked examples of sites that make their content look terrific, and why you should consider following their example in your own work. We’re going to take a journey of how elegant typography can make a site shine; looking at the bold, creative, navigational, simplistic and interactive content that makes the designer’s voice speak volumes – so let’s get started!
Beautiful and Bold Typography
With the current trend of big header images, large and bold typography has really become a common part of designing a portfolio. While large background images can certainly help reinforce the heading, it’s important to get your message across with as little effort as possible. All of the following websites use a mixture of impactful large header fonts along with vivid color and simple but effective logos to ensure visitors take note and can grasp the site’s purpose with very little effort. Less is sometimes more, and perhaps replacing large bandwidth hungry images with a simple, well-presented message may help you avoid the need for progress bars and loading dialogs.
Creative Arrangements of Content
Headings grab our attention, but the body of content is what makes us stay. Ensuring that your content is well written and provides all that the user requires is one of the central goals of any web design project. The following websites try to strike a balance between offering just enough content to be useful, and avoiding the risk of information overload. Using color and type to separate sections of content can certainly help you convey a message, and arranging content horizontally and vertically into clearly defined grids can reduce the need for pagination. If all else fails however, progressive disclosure of associated content can help you reduce the visual clutter on a page.
The UX Reader
Navigation, Sitemaps and Signposts
Typography plays an important role in the headers and body of your site’s content, but something no site can function without is a good navigation menu. From the frequently criticized hamburger menu trend, to one page layouts that function as a launchpad to projects or content on a third party site; it’s important to ensure that navigation is easy to use and locate. The following sites present links in a pretty standard way, but their use of color, scale, and structure should inspire you to try a bit harder than simply providing a basic dropdown menu. If nothing else, the examples I have picked use very different methods to help a visitor locate content on the site.
Blake Allen Design
Spacing with Subtle Simplicity
Sometimes in Web Design, the things that aren’t said play an equal role in readability as the things that are. Having a beautiful page with lots of typography flourishes can be good, but if the space between content doesn’t leave enough breathing room, information overload can occur. The following websites use whitespace along with short, snappy, paragraphs to ensure that the user can get to grips with the layout and typographical flourishes with ease. If nothing else, these simple designs make an impact without getting in the way. With enough whitespace on the page, and thought put into how content is portrayed as you scroll, any site can avoid looking messy and uncoordinated.
The Typographic Desk Reference
Where Should You Publish?
The Next Century
Animation and User Interactions
Fresh… Not Canned
At The Heart of Every Website
Content is at the center of every experience online, and this is something no designer should forget. Having bold, visually engaging type shouldn’t be at the expense of a sensible layout. The layout shouldn’t require limitless scrolling or overloading the visitor with too many options. The navigation menu should be easy to identify and organized with information architecture best practices at it’s core. Whitespace should be used to give the user room to breathe (though not too much either). Furthermore, animation should be used to enhance already useful content and be subtle enough to make someone smile, not cringe. If you do all of this correctly, maybe your site will be the next thing showcased in CSS galleries, with other designers admiring how it was put together. It’ll also make for happy users, and that’s what matters most.