Much in the same way clothes make the man, clean typography makes great content. Readable content is a huge part of every website. But one important pillar of readable content is quality design.
This post will take a look at modern design trends for common web typography. Design might include basics like font size and font family, all the way through more complex ideas like vertical spacing and line height. Typography design is best understood by analyzing other prominent websites to figure out why their text reads so well on the digital screen.
Clean & Styled Navigation
Every navigation will be styled differently based on each website’s layout. But when it comes to typography some general rules can be applied. For example, clean symmetrical typography can be used to identify similar navigation links as one group.
P’unk Avenue is a great demonstration of large usable navigation. Each link follows a similar design format with a decimal, all-caps link text, and a bit of subtext. Their design may be a little showy but it’s a fantastic example of how to use symmetrical design to your advantage.
Another fantastic design can be found at ServeManager.com. They use plenty of space between each link, along with oversized typography which really stands out against the header. Contrast is bright so it’s very clear these links are primary navigation items.
Usable nav links are created through some contrast and juxtaposition. If your navigation blends into the header then it’ll be more difficult to notice. At a glance it should be blatantly obvious how to navigate through your website. One reliable strategy is to use a larger font with a clean text style that stands out against the background.
Distinguished Heading Text
Page headings can serve different purposes in different circumstances. Typography defines how loud each heading should be, and how much attention will be drawn from the visitor.
One great example is the portfolio of Andrew Elsass. His about page uses a large heading with a fullscreen background to draw instant attention. The page content itself is separated by other headings which are less noticeable but still serve their job well.
Static-content websites have many pages just like this where a main heading sits above other sub-headings. You can make the page headings stand out by using bright colors, icons, backgrounds, borders, or even unique font families. Other sites may prefer to just enlarge the regular page text for a more traditional style.
This technique can be found in many online magazines like Wired. The article heading is large enough to stand out as a headline, but not large enough to take up enormous space on the page.
Headings are meant to denote a break in content. Most designers create styles for h1-h4 tags because it’s unlikely that any website would delve below a fourth sub-heading. Each heading’s style should reflect the level of authority if holds over the entire page. Readers should be able to ascertain which topics are included inside other headers based on design alone.
Font size is the most common design property to communicate hierarchy. But you might consider testing other ideas like bold & thin font weights or even adjusted letter spacing.
Readable Paragraph Text
Every website that includes some content will use paragraphs. Whether they’re only 1-sentence long or written as blocks of text that span the entire page – paragraphs are important. But honestly please don’t write illegible blocks of text because even the Devil himself will cringe.
Formatting is crucial to well-structured paragraphs. But formatting is generated by the style, spacing, and position of typography. For example it’s generally wise to err on the side of larger text rather than smaller. Likewise it’s a good idea to increase paragraph line heights instead of keeping every line tucked close together.
Medium.com is a new blogging platform that uses a similar design style for each blog. Their typography is great for any screen size because it offers enough space between lines and between paragraphs. Users generally won’t mind scrolling a bit more if it means they can read your content easier from a distance.
Anywhere from 2x-5x the line height between each paragraph is a sturdy margin number. A safe bottom margin on medium-sized paragraph text would be 15px-20px. If you want to have space that naturally resizes go for a value in ems.
When it comes to the font choice many designers feel that sans-serif fonts are easier to read on the web. Serif fonts won’t present a problem, so long as they’re sized properly. Paragraph font choice really depends on the type of website.
A lot of online magazines and news blogs will stick to serif fonts as a means of duplicating the style of real-world newspapers. But the vast majority of websites from companies to portfolios and forums will use sans-serif. Just find whatever font works best for each project.
Hyperlinks are one of the few areas in page text which are interactive. Most of the time visitors are reading through your page in a passive state. But hyperlinks require activity(a click) for visitors to access the external URL.
As such you’ll want to design hyperlinks so that they appear “clickable”. Great link design is a lengthy subject but generally explains the difference between static & interactive content. The link hover state should also be noticeable whenever a visitor hovers their mouse over a hyperlink.
Great UX design should inherently convey that text is clickable without any interaction. This is traditionally accomplished using underlines and alternative text colors – but you can get a little obscure with background colors or varied letter spacing.
One example which may be seen as avant-garde is the agency website for DAN Paris. The links found in their top navigation menu have a dynamic underline effect on hover. You’ll notice that a quick underline flashes across the link from left to right. This is certainly a more convoluted example but it captures attention.
Perhaps a more straightforward example is this Codepen entry (above) which utilizes CSS3 animation. The hover effect animates two curly brackets which extend onto either side of the link. It’s a unique effect that will no doubt draw attention from visitors.
If you need more link style ideas browse through some of the popular cloud IDEs like CodePen, jsFiddle, or CSS Deck. Some of the styles may use experimental or poorly-supported code, but they’ll surely evoke new ideas which you can redesign based on each project.
Not every article or webpage contains a blockquote. Yet when they are used it’s a good idea to convey that the text is clearly a quote or copy from somewhere else.
Many designers like to float blockquotes over to the side of paragraphs. These are known as pull quotes which may copy text from elsewhere in the article, or from a person mentioned in the article. Both of these text formats are very similar and should be distinguishable from regular page copy.
Take a look at the detailed Hongkiat post on blockquotes. It covers the gamut of fantastic design ideas from alternative colors to background quotation mark icons. But in many cases simplicity is victorious over excessive design.
The example above is from The Verge which is an online media magazine. Their pull quote style simply uses more visible color which is enlarged and italicized. There’s no distinction between content other than some padding. And in this scenario it works perfectly.
When designing an inner-page text style whether it’s a blockquote or code snippet, aim for clarity through design. Let readers know that the block of text is not a paragraph by adjusting font properties wildly against the website’s traditional style. This is often a great reason to incorporate a second font family so that these blocks will clearly stand out.
Styling Oversized Typography
The trend of oversized text has grown into a modern design phenomenon. All sorts of layouts from parallax landing pages to corporate designs are using oversized typography.
With the release of Google Web Fonts it has become easier to incorporate various custom fonts into a webpage. And with faster Internet speeds there is little downside to including multiple fonts in an appropriate manner.
Big typography is attractive because it can be read much easier. More websites are becoming responsive and more people are visiting websites on their smartphones. These tiny screens can average 2-3 inches wide so it’s nice to support mobile visitors with clearly-legible page text.
Check out the text-heavy design for Illusion Magazine. The layout focuses more on composition, symmetry, and balance between content areas. This is another good example of when oversized typography works best.
Websites that predominantly focus on text will benefit from increased font sizes. Larger page elements will naturally draw attention, so if page copy is an important design feature it’s a good idea to increase the font size to fill out more space.
This methodology is by no means a requirement, but it’s helpful to keep in mind when designing typography for text-heavy websites.
Designing a website from scratch is no easy task. The process includes a lot of abstract ideas like theme, style, and composition. But typography is a much more tangible subject that has more tangible solutions.
Hopefully these trends can be put to good use by designers who are looking to improve their website interfaces. Although solid page content is very important, the aesthetic design of text is often what persuades visitors to continue reading.
Featured image: Janpietruszka