Tag: Matter

Web Typography: Why Web Fonts Aren’t a Matter of Opinion

Web typography: why web fonts aren't a matter of opinion.

Website font choices affect more than the design aesthetics.

You’re reviewing the latest mocks for your new website, and you’re not quite sure about the font choices. They look nice, but you wanted something edgier, bolder, something that pops off the page and grabs the visitor’s attention. Should you raise the question with your designer?

We understand why you would want to. After all, your website reflects your business. It’s something personal, and just as most of us would prefer to choose our own clothes in the morning, we hesitate to fully turn over design decisions to anyone else, even the person we hired because of their hears of professional expertise.

But there’s something else you should know before you start basing your decisions on personal preference: your font choice isn’t about you.

It may sound silly to go this deep into a design decision as basic as web typography, but the truth is that your web font decisions need to be based on what is best for your visitors. And that’s not a matter of opinion—it’s a matter of objective research. There actually are good and bad choices for web typography, and making the wrong one can have an impact on how your users engage with your website. Here’s just a few.

1. Serif vs. sans serif fonts.

You know those little flourishes that appear on the edges of letters in traditional typefaces such as Times New Roman? Those are called serifs. Whether or not a font has serifs is one of the most basic distinctions in typography.

Serif fonts used to be the norm, and you’re probably used to seeing them in books, newspapers, and many other print mediums. Sans serif (without serif) fonts have a more modern edge, and proliferated in early websites because of their greater screen readability.

These days, screen technology has improved enough so that serif fonts are more legible online—and in many instances, more legible than their sans serif counterparts. It is acceptable to use either font online, and it can even be a pleasing effect to pair them with each other, such that one forms a header and the other the body copy. But be aware that serif fonts become harder to read the smaller they get, and that in body copy, sans serif characters can sometimes be harder to distinguish from each other.

2. Font hierarchy and readability.

Your web copy should not appear as one gigantic wall of text. This has a negative impact on readability and can lead to fatigue on the part of your users. Instead, use your fonts to break up body copy by establishing clear hierarchies on the page.

Titles, subtitles, and headers should have larger text, while less important data, such as publication dates or bylines can be emphasized or de-emphasized by using a smaller font size than the body copy, different coloring, or style effects such as bold or italics.

3. Body copy legibility.

When it comes to body copy, choose styles that are highly legible. This means absolutely no script fonts. They may look nice in headers, but they will be torture for your readers. Furthermore, keep the font size no smaller than 14pt. Any smaller, and your visitors will strain to read the words on the screen.

When it comes to line length, 40–60 characters is often the ideal length for comprehension, but this is too narrow for body text. Instead, save the 40–60 character widths for headings, and keep line length at a comfortable 650 pixels.

Text alignment is also key. Right-aligned text is terrible, because it goes against our natural reading movements. When the reader’s eye reaches the end of a line and jumps back to the beginning, it takes a few moments longer to find the right line to continue reading. Fortunately, there’s rarely any call to use right-aligned text, so it’s easy to avoid.

Center-aligned text has similar problems, but can be used judiciously for aesthetic reasons. It should never be used for a full piece of content, however. Ditto for justified. While the even line lengths look tempting, the varying spacing between words can add confusion. Instead, stick to left-aligned text wherever possible. It’s easiest to read, and it’s what most users expect.

4. Sizing, weight, and contrast for legibility.

Your visitors need to be able to read your website. If your text is too small, to thin, or too light to read, it’s not doing anyone any favors. And don’t base these assessments on your personal experience, either. Your eyesight might be fine, but someone who has vision problems will struggle even more. Err on the side of greater accessibility, and you won’t risk alienating anyone.

These things are also affected by other elements on a page. If text appears in front of an image or video, or if parallax scrolling means that the text will appear over a variety of backgrounds as it moves down the page, then you need to bear that in mind as you consider design options.

5. White space.

For some business owners, the temptation to fit more words into a space can lead to bad design choices, in particular, crowding out white space. Wide margins are more friendly for readers than narrow ones, and even the space above and below lines of text can affect how easy it is to read.

That includes the space between paragraph breaks and above and below headings. Give your text room to breathe, and your visitors will be more likely to stay on the page even if they have to scroll half a screen down to see your new product video.

Web typography must lead to greater legibility, readability, and usability.

All these restrictions and guidelines can make your options feel limited, but they’re actually good news! You can take a weight off your shoulders knowing that by following these principles, you’re creating a design that follows the rules of good taste and puts your visitors first. The result may not be exactly what you envisioned, but it will help you win over business and grow customer loyalty in the long run. And what’s not to like about that?

The post Web Typography: Why Web Fonts Aren’t a Matter of Opinion appeared first on build/create studios.


Do Website Dimensions Matter for Responsive Design?

Do Website Dimensions Matter for Responsive Design

Design space on websites varies depending on the browser and device. So do website dimensions still matter?

One of the biggest misconceptions about websites is that they appear the same way to all people at all times. The truth is, websites have never been set in stone. While early web designs were essentially designed rigidly with set dimensions for all computer screens, the way those websites were displayed varied from monitor to monitor. And these days, any good website will re-arrange its elements to conform to the screen it’s viewed in.

This reconfiguration capability is known as responsive design, and it’s what allows websites to display properly across computers with varying monitor sizes, as well as the wide array of tablets and cell phone dimensions.

Because of this, it may be tempting to think that website dimensions don’t matter anymore—that you can basically make anything fit wherever you want. But there are still some aspects of your web design that have to conform to basic design constraints. If you don’t, you’re punishing your user with a bad experience. Here are the top 5 areas where website dimensions matter most.

1. Body copy.

Believe it or not, there is a lot of science behind the way we read text. When lines are too long, it adds eye strain and makes it hard to follow. Similarly, when lines are too short, constantly jumping from line to line can cause readers to lose their place.

If you have your body copy spanning the entire width of your screen, it’s going to be hard to follow. You need white space padding, as well as some room for other content areas. But if you’re too narrow, your design is liable to look silly, with a string of text down the middle and nothing to either side.

As it turns out, reading comprehension is best for lines that are about 50 characters long, but they read fastest at about 100 characters to a line. Since 50 characters is far too narrow for most contexts, we recommend the best width for most body copy is about 600 pixels, and then have your design respond to screen size if necessary.

2. Blog titles.

Blog titles have two major restrictions: the number of characters people most like to read, and the number allowed on Google.

Yes, it is tempting to add in more keywords to your blog title, but after about 60 characters Google will cut your title off and your readers won’t be able to see the whole thing. And, as we said earlier, 50 characters is the best length for reading comprehension.

So, use your space wisely to create a concise, gripping title. Then use your body copy for your keywords.

3. Paragraph length.

We’re advocates for long-form content, but that doesn’t mean your paragraphs have to go on forever. Quite the contrary: long paragraphs are harder to read and can be intimidating to visitors.

Instead of giant blocks of text, break your writing into shorter lines. You’re not printing this. You don’t have space constraints.

A few words to a line will do.

4. Navigation Menu length.

Navigation menus are one other area where users sometimes try to stuff too many items. However, there’s only so much space you can fit in the navigation menu. The more items you include—and the more words you use to describe those items—the more challenging it will be to display the menu effectively.

Five or six menu items is almost always plenty. If you need more complex navigation, then work with your web developer to find a usable solution. There are more options than simply cramming more text into the menu.

And when you write menu labels, keep it to one word as much as possible. There’s no need to use “Our Thought Spot” when “Blog” will do just as well. More importantly, your visitors know what a blog is, and they know what they can expect to find there. The more creative you get with your navigation menu, the more confused your visitors are likely to be.

We’ve said it before, and we’ll say it again: Your navigation menu is not a place to get whimsical. It’s the table of contents to your site. Keep it practical.

5. Other text constraints.

Some areas simply don’t have a lot of room for text. Think about sidebars, website footers, or other areas of copy. If you try to fit too much content into these areas, you’re more likely to wind up with a design that has been blown out of proportion. If an area was never intended to have more than a line or two of copy, don’t feel like you need to cram in a full paragraph.

Yes, website dimensions do matter. Just not in the way you think.

So, in the end, responsive design hasn’t done away with some of the set width constrictions of your web design. But doesn’t mean every element of your page is rigid, either. The important thing to bear in mind is that these website dimensions will always depend on your design and how it interacts with the rest of your site.

Be aware of how your website will respond to different conditions, and don’t make design choices that will hinder usability for people on mobile devices, or for anyone with accessibility concerns. By being mindful of the space constraints on your website, you can create a better user experience for everyone.

The post Do Website Dimensions Matter for Responsive Design? appeared first on build/create studios.