Tag: Improve

How to improve your digital typography

Moving from print to digital, there's one obvious and important difference to consider when it comes to typography. Unlike with print, in digital design, your type is not going to remain static. 

"Printed type can be tightly controlled, with the outcome exactly as the designer intended," says Jack Statham, mid-weight designer at Ragged Edge. "But typography on-screen may be rendered with varying levels of detail for different users, depending on their device."

That doesn't mean typography loses its importance, though; quite the reverse. "In recent years, web and app design has rid itself of superfluous decoration and now gives more space to content, and therefore to text," explains Massimiliano Frangi, senior design director at CBA Italy. "So the choice of a great font is now a key element for the success of a web project."

In recent years, web and app design has rid itself of superfluous decoration

Jack Statham

Nowadays, specialist web fonts are optimised to display as cleanly and consistently as possible across multiple devices and screen resolutions. "Often, typefaces designed for print have ink traps and a high contrast in stroke-width," says Statham. "Typefaces designed for the web usually feature more consistent stroke weights, higher x-heights, and more open bowls and counters."

All this means that if your design is going to work, look good, and be legible on multiple devices, screen sizes and orientations, then choosing the right font carefully and displaying it correctly is essential.

Legibility is key

"Just because a typeface is beautiful doesn’t mean it will readable in all sizes," says Martha Lisboa, digital designer at CBA Paris. "So avoid crazy typefaces, condensed styles and letterforms with thin strokes. And be aware that type effects such as shadows or bevels may look great at larger sizes but won’t work on small screens.

"In short, go with something simple and of a standard weight to ensure readability on all devices, especially for long paragraphs of text."

When it comes to typesetting, hierarchy is always important, but it becomes especially so when people are using your interactive design to achieve a goal, says Statham.

"You have a limited area in which to set type and reduced navigation and wayfinding elements," he points out. "So a clear type hierarchy helps a user to quickly find their way around the screen, and acts as a bit of a shorthand for the user to digest the information on screen."

Examples of Fifteen typography

Fifteen’s Nottingham Hospitals website design features a friendly, handwriting style font

Alexandra Lofthouse, senior UX designer at Fifteen, agrees, and reminds us that people don't generally use apps to read massive paragraphs of text. "So text should to be easy to read and digest," she stresses. "This comes down to the tone of voice used throughout the copy, and the typographic style fusing together in an interesting and an engaging way."

And of course, legibility is hugely important in digital. "Especially in long passages of text, the goal is to make typography 'invisible', in that the user is able to pass over a paragraph quickly, without having to focus too hard on each letterform," says Statham.

He advises you "pay attention to paragraph measure; keep them to between 45-75 characters. Provide generous spacing between lines: aim for a minimum line height of 1.5 for body copy. Aim for a slight increase in tracking, to give type room to breathe. And choose a reasonable point size: actual character size varies between fonts, but 16px is a good minimum."

Accessible typography

Colour is also an important consideration when it comes to legibility, he notes. "Backlit screens can increase the contrast between pure black and white, which can be tiring on the eyes, so using a softer black for text or pale grey background can make text more readable. Also there are a few apps, such as Contrast, which we often use to help ensure any colour combinations in a body of text are compliant with current accessibility standards."

Lee Carroll, interaction designer at Seymourpowell, offers similar advice. "Watch out for lack of contrast between text and background colours," he says. "Use the Snook.ca colour contrast checker to ensure the ratio is high enough for a double-A or triple-A standard of accessibility." He also suggests remembering that it might not be the colour alone that needs to change to solve some of these issues, sometimes a thicker weight or bigger text is what’s needed to increase the contrast.

Examples of De Nigris typography

Massimiliano Frangi’s redesign for De Nigris aimed to captivate viewers through its narrative

And all that's just for starters: in 2018, the field is evolving at breakneck pace. "The technology that we use to view type is constantly changing, and so the requirements of type on screen is changing too," says Statham. "Prototypo, for example, has some incredible features in its typefaces which allow you to use one font file for several instances. You might have finer serifs on your headlines than in your captions at smaller sizes, say, or decrease the width of characters on narrower viewports. Browser support is increasing all the time, so we're hoping to utilise this soon."

And staying ahead of this curve also means being on good terms with your more technically minded colleagues, says Dan Bradshaw, design director at TH_NK.

"One of the main differences with digital typography compared with print is that once you’ve designed it, it needs to be built," he points out. "So get friendly with a developer if you're not too familiar with the code side of things, to ensure your designs can be brought to life justas you've laid them out."

This article was originally published in Computer Arts, the world's best-selling design magazine. Buy issue 277 here or subscribe to Computer Arts here.

Related articles:

  • 5 typography trends for 2018
  • 50 top typography tutorials
  • Better web typography in 13 simple steps

https://www.coastalmediabrand.com/feed

Top 5 HTML Tags to Improve Your SEO

Top 5 HTML tags to improve your SEO

All too often people (more often than not they’re designers) ask, do header tags even matter anymore? I know that it can seem like content is content now, and to a certain extent SEO is secondary. Well, I’m going to have to whole heartedly disagree.

While tagging has lost some of its importance over the years, it’s not just about your search engine rankings. It’s also about proper structure a website, and the benefits that it can have.  Those benefits aren’t just for search engines, but also for readers with disabilities. So let’s take a look at 5 HTML tags that can improve your SEO, but also improve your website as a whole.

Title Tag

Title tags are the the simple tags that you put on your page to do exactly what they say. They tell the search engine and the visitor the title of the page. Seems pretty straight forward, right? Well, in it’s simplest form, yes. But for the purpose of optimizing for SEO, there are a few items to keep in mind.

  1. Does the title tag contain the keyword you’re seeking to get ranked for?
  2. Does the tag contain the correct amount of characters? (Google displays 50-60 depending on screen size)
  3. Is your brand also included?

Example:

Meta Description

There are a lot of people out there that will say that meta descriptions aren’t really important to search engines, they will say they’re important to gaining user click throughs. Well, if history has taught us anything, user click throughs, are important to search engines deciding which pages have the best answer to the question a user asks.

So yes, meta descriptions are important. When you’re writing them a few things to remember:

  1. You can now go up to 320 characters in a meta description, but Google generally shows 160 characters on the screen.
  2. Make sure you have your keyword included in the meta description. If searchers are looking for a specific term or item, it should have that in there.
  3. If you’re a local business ensure your meta has a store location (city) in there.

Example:

Header Tag

You may have also heard them called h1,h2,h3 tags. While in many instances header tags are used as style elements on a page, they also have some SEO value, especially H1 tags. I’ve run into instances where the business hadn’t used an H1, just a larger version of their body tag. It certainly didn’t help their SEO.

A header tag, is like the beginning of a book chapter, it tells you what the rest of the page is going to be about. Like your title and meta descriptions, it’s helpful for your H1 tag to have your keyword in it. If you have subheadings, use an H2 or H3 tag. They carry less value, but won’t confuse a search engine about what the page’s main theme is.

I say use h2 or h3, because sometimes the design doesn’t fit one or the other. In this instance I’ll appease a designer who had a stylistic reason for choosing that font over a search engine.

Example:

Alt Attribute

Alt attributes are descriptions of the photo in your blog. While yes, these have SEO value, their main value is to screen readers for the visually impaired. They tell those readers what the image is and what it contains. To enhance your SEO at the same time, it’s often helpful to use your keyword in the alt text.

Example:

Canonical Tag

If you’re like us and you write a lot of content, often you write about the same subject more than once. But within all of that there’s a cornerstone content piece that you want the readers and the search engines to get to. Internal linking can help this, but to really push content that direction using a canonical tag will let Google know, this is the best piece about this subject.

If you have a content piece that is ranking well, you don’t want to cannibalize it with similar or even identical content that you’ve written afterward. Instead, using this tag will tell the bots that this is the content you’re really looking for.

Example:

Conclusion

Tagging your pages properly, especially in WordPress, is a pretty simple way to help your pages rank better. While it’s not a silver bullet in terms of SEO, it’s another tool in your bag to make sure that your website gets found by the visitors you want, for the subject that you want them to find you for.

The post Top 5 HTML Tags to Improve Your SEO appeared first on build/create studios.

https://www.coastalmediabrand.com/feed