Web Design Best Practices: Minimalism & Typography

When talking about design we need to consider text from a designer’s perspective. Text must be legible and readable while fitting nicely with the website’s style. But it also must relate to a hierarchy of content.

Building hierarchies is the “big picture” of a website’s composition. But as you move into typography, you also must create hierarchies related to specific text on the page. In this piece, we’ll explain creating relationships with your headers and how to use white space to make lengthy paragraphs visually digestible.

Headings & Spacing

image00

Web content typically focuses around just a couple of different text elements. Headings range from H1-H6, but most websites only use H1-H4 at most. Regardless of how many heading styles are used, it’s your job as a designer to craft them so that the hierarchy is clearly established.

Space between text is important because it helps to define the page content itself. When users find a new header, they expect to recognize if content is switching to a brand new subject or if it’s within an existing subject. The right combination of size, color, and style of heading text helps to create the right expectations for users.

Negative space between text shows how page content is related. Headers with plenty of space are seen as more dominant while headers closer to paragraphs are seen as related via context. Bottom margins after paragraphs show the relationship between lines of text and where they belong in the hierarchy. It all relates back to crafting a hierarchy of content to visually distinguish between text on the page.

Heading Relationships

Each heading should reflect it’s own unique style, which also complements other styles of text on the page. Crafting brilliant headers gets easier with practice, but white space values should generally behave the same regardless of heading styles.

image01

Square uses a traditional startup homepage layout with plenty of imagery and blocks of text. Headings are a particularly interesting segment of the design because they range from oversized to infinitesimally small. Yet the size doesn’t really matter as much as the relationship to other text on the page.

Notice in the screenshot above how large headings use extra spacing above and below the text. These section headings visually convey a sense of being “on their own,” yet also naturally group together into larger blocks of subheadings and paragraphs.

Each inner block uses subheader text that is much smaller. These internal headers are about the same size as paragraph text, but they stand out with bold text & a darker color. Visually, it’s crystal-clear that these bolded lines of text are still headings (just lower on the visual totem pole).

image03

The amount of space between headers & paragraphs also defines which paragraphs belong to which headers. Similarly, you should insert plenty of space between smaller headers and larger headers. Again, negative space defines hierarchy both in visual design and in typography.

As explained in the free guide Web UI Design Best Practices, remember these points when crafting page headers:

  • A visual hierarchy should be apparent through the use of space, size, color, and/or text style. This should be visible even when standing 3-5 feet away from the monitor. You can also use the 5-second Gaussian blur test to check hierarchy.
  • Keep each subheader close to its first child paragraph.
  • Place pithy headers in close proximity to convey ideas more quickly and clearly.

Lengthy Paragraphs

On the topic of contextual white space, there lies the question of how to design around the common paragraph. Firm, reliable, and found pretty much everywhere, the paragraph is the backbone of every website’s content strategy.

But how content is written varies based on how content is styled. For example, an online news magazine will use different paragraph styles than a smaller gardening blog. The amount of content, length of content, and level of detail all come into play when styling paragraphs.

Try to design with large enough text so that it’s clearly readable 3 feet away from the screen. Text size is very similar to white space in that it’s usually better to design larger than smaller. However, exercise moderation and restraint.

If the text size is too large, then it’ll just take up more screen space and require more scrolling. But if it’s too small it could be unreadable, or visitors will experience difficulty with vertical rhythm as they move their eyes from line-to-line.

Two important things to keep in mind are paragraph margins and line height (the space between each line). The size of text in your paragraphs dictates both of these values because white space depends on size.

image02

Medium is an online blogging platform that does paragraph design right. The text is crisp, readable, and spaced perfectly. As their paragraph design shows, line height values must be large enough to connect to the next line without feeling excessive.

As recommended in the Web Design Trends 2016 ebook, here are some good rules of thumb to follow:

  • Avoid making the line height larger than a typical line of text.
  • The em font unit is perfect for creating uniform sizes across all browsers.
  • Line height should often be a tad larger than font size.
  • Try a font size of 1em combined with a line height of 1.5em-1.75em.

Paragraph spacing can be tricky but it’s an important topic, especially for text-heavy websites. The bottom paragraph margin should be much larger than a typical line of text. Bottom paragraph margins should be large enough that you can visually determine when a paragraph has ended.

Once you figure out a website’s text size, it becomes much easier to play with line height values and figure out margins for spacing. The goal here is clarity and structure. Each new paragraph should be obvious without any doubt. The key is proportional space between each block of text.

As mentioned before, it’s generally safer to have “too much” white space rather than not enough. Just avoid using colossal amounts of space or you’ll end up with a very shallow content density. Keep enough content on the page to be interesting, but not so much that it’s overwhelming.

To learn more about designing for content in web interfaces, check out this piece on how to design the perfect paragraph.

Takeaway

Negative space in typography directly affects the overall composition and smaller page elements at the same time. When designing typography, context is king.

Paragraphs found in the page may need larger margins than paragraphs found in the sidebar. Links in the header could look smoother with extra padding, but links in the footer could look tidier with very little padding. There are no solid rules, only best practices to keep in mind.

Also remember that typography follows along with its own hierarchy just like page structure. Lots of practice will be the optimal way to improve your eyes for quickly recognizing spatial values that fit best into any given web project.

When it comes to designing with space, remember that space as an aesthetic quality takes a backseat to space as a design tool. Space creates relationships, defines hierarchies, and emphasizes content – always keep these in mind when considering how to reduce visual noise.

You can learn more actionable design techniques in the free Web Design Trends 2016 ebook by UXPin. The 185-page guide explains 10 best practices in great detail. You’ll find 165 analyzed examples from today’s top companies.