Web Designing For the Reading Experience

With the rise of web fonts as well as affordable hosted web font services and ready-made kits,

typography is reclaiming its title as design queen, ruler of all graphic and web design.

The allure of well-executed lettering — and, boy, I could spend hours just looking at lettering

portfolios! — can affect the way we view typefaces, because both typography and lettering

share common visual concepts. If we seek only the next most Beautiful Typeface™ all the

time, this habit alone can drive us away from the functional role of typefaces and their

advantages as versatile, reusable and flexible design systems.

A. Project Research :

As you are most likely aware, the main components of a digital experience are content, context

and the user. You probably address all three in almost every design project. But if we focus

exclusively on typography within each of these components, then we’d find a handful of

assessment methods and some considerations that would be useful to take into account and that

would ultimately improve the overall reading experience.

Cover All Typographic Elements : Upon reading the content, think about the structures or

elements you have encountered and list them. Use the list as a starting point for a simple style

guide

Gauge Reading Time : Depending on the situation, estimating reading time can help us

determine the spacing within paragraphs and establish just the right rhythm and reading pace.

If the reading time is long, we could break the text into smaller parts or simply introduce a pull

quote at a strategic point.

Assess Readability and Reading Ease: Automated Readability

Index (ARI). ARI focuses on the number of characters, words and sentences, thereby making it

useful for real-time monitoring. The Flesch–Kincaid Grade Level test, on the other hand,

focuses on syllables rather than characters, thus making it somewhat more processor-intensive

for real-time assessments.

B. Content Strategy, Information Architecture and Micro-copy:

Thinking about the content’s lifecycle protects us from the urge to typeset according to the

latest trend. The next time an article is republished, we can prevent the editor’s rage from seeing

leftover styles that weren’t removed in preparation for a redesign.

Category labels — typically defined by an information architect — can make the web designer’s

life miserable, because the space in a navigation bar or column is limited. I’d bet that at some

point in their career, every web designer has tried to rename or shorten category names in order

to fit the available space. Of course, we could always reduce the font size or choose a condensed

type, but if all else fails, we talk to the information architect to find a solution on their end.

C. CONTEXT LINK

With recent developments in web standards, designers are now building websites that are

getting closer and closer to the ideal of “One Web,” accessible to everyone and everywhere. Even

though achieving such universality with all types of projects is difficult, we know that mobile

doesn’t just mean browsing the web on a smartphone while on the go.

1. Software Concerns

Users on Windows systems with the ClearType rendering engine benefit from well-hinted fonts.

The trouble is that hinting is a time-consuming process, and not all typefaces for the web are

fully polished yet. Therefore, additional testing in Windows browsers should form part of your

regular routine. Keep in mind thateach web font service might deliver slightly different

fonts. A font might yield good results when delivered through one service but look barely

adequate when delivered through another.

2. Hardware Concerns

A problem we are facing across the industry is the diversity of pixel densities; as a result,

typography is not spared either. One interesting solution is to embed graded fonts for different

densities, just as print designers use graded fonts to more precisely control the effects of ink on

paper. Read more about this approach in Oliver Reichenstein’s article “New Site With

Responsive Typography.

3. LETTER LEGIBILITY LINK

Another important test of legibility is how different each glyph is from the other glyphs in a

single typeface. Designers use pangrams, or short test strings, to evaluate and compare

typefaces; for examples, the famous “The quick brown fox jumps over the lazy dog,”

“Handgloves” and “Hamburgefonstiv.”

Editorial Accessories Link

Display and decorative typefaces are appropriate for short text snippets, such as headlines and

pull quotes, because they set the tone and atmosphere and break up long copy (remember the

reading-time assessment from above?). Text typefaces are utilitarian and suitable for long

reading. Reading can get boring after a while, particularly on an attention-hostile technology

such as an Internet-connected computer.

We Have A Responsibility Link

Two important factors should influence your decisions. First, if they don’t like your typographic

choice, a reader can change it via the customization options built into the application or device.

And if they do that, they will usually change it to something more generic, thus ruining your

typesetting altogether. Back in the day, when we combined absolute units for line heights with

relative units for letters in Internet Explorer, even a slight increase in letter size would bring

chaos to thepage.For more views on Web Designing Solutions visit – BuzzTO Web Development

Solution Agency