Entries Tagged as 'Typography'

The NEW Web Typography at SXSW 2016

Last Sunday (13 March 2016), I had the pleasure of presenting material from my new book The NEW Web Typography, which is coming out late this spring. I had a packed room of a few hundred people attending and then over thirty people came to my book signing immediately after.

I’m working on a revised article as well, based on the talk, but, in the meantime, here are my slides.

 

6 frustrations designers have with developers

We know that developers can get frustrated with designers, especially when the designer designs something that’s impossible to build. But there’s plenty for designers to become frustrated about with developers.

Design is often seen as a ‘soft skill’ that is about an opinion of aesthetics, not hard rules, much less the rigorous logic of code. Yet designers work for years perfecting a craft, not just spouting uninformed ideas. However, being able to explain and articulate the ‘method behind the design madness’ is not always easy, and rarely quick, which leads to numerous project frustrations. Fortunately, there is usually a way to defuse the tension.

01. I designed it that way for a reason

Image source: Cat Donmit on Flickr

The Problem: The designer spends weeks creating meticulously crafted visual comps and spec documents, only to have them seemingly ignored by the developer. Beyond ignoring the specifications, some developers simply allow the browser defaults to stand without change if they are not explicitly stipulated in documentation, not just shown in visual comps.

The designer assumes that the developer will look closely at the comps and try to make them match ‘pixel-perfect’. However, this generally leads to interfaces that feel cramped or poorly organized, despite the best efforts of the designers.

The Solution: Designers should assume nothing, and know that documentation is never enough. A good design guide is the first step toward eliminating this problem, but designers also need to work side-by-side with the developers, regularly reviewing their work to ensure it’s what is intended in a design acceptance review when the developer feels comfortable with what they have done.

02. MVP!?!? It’s all MVP!

Image source: Jugbo on Flickr

The Problem: The developer has a finite amount of time to create the end product, even less for each sprint, so they will prioritize features and functionality based on the ‘minimum viable product’ that will meet the product specifications. Most designers, though, view the product as an integrated whole, not a series of interlocking components. But the MVP is often not defined until the development phase, so it can feel more like developers are making the decisions based on their schedule needs rather than user and product needs.

The Solution: The MVP needs to be defined during the initial phases of the product, and truly be the minimum viable product, not just the easiest to make, for different development phases/sprints. Designers can work to create a product that is built-up in stages, rather than completed all at once. This should also make it easier for developers to plan accordingly.

03. This will take how long?!?!?

Image source: Jon Hathaway on Flickr

The Problem: The designer has spent months planning, researching, and creating designs to meet the user needs, only to be told that it will take much longer than expected due to conflicting project schedules, staff shortages, and the dreaded scope creep.

The Solution: One of the facts of any UI development project is that development comes last, and is generally squeezed in time by the steps before (I have never known the discover, define, or design phases to go faster than planned to give development more time).

One way around this is through Agile coupled with Lean UX to allow development in parallel with design, allowing the developers to get started before the design is completely locked down. This approach is not without risks (design may need to be reconsidered) but generally leads to faster output and happier project managers. And really, isn’t that what we all want?

04. What do you mean “I can’t do that!”?

Image source: Peter Kaminski on Flickr

The Problem: The designer has created a really cool experience, but the developer takes one look at it and proclaims, “That’ll never work.” One reason developers might not be able to do something is because it cannot be done, but more often than not it’s one of two other reasons: 1) it would take too long, longer than the project has, or 2) the developer just doesn’t know how to it.

The Solution: If it can’t be done, it can’t be done, and the designer needs to rethink the solution. If it will just take too long, then the team needs to decide whether to scale back or take the time needed. But, if the developer just doesn’t know how to make it work, the designer will need to show them examples of places where the desired technique is working. I find that CodePen.io is my best go to place when I need to show ‘existing art’ to my developers.

05. Usability testing is NOT optional

Image source: Dopey on Flickr

The Problem: For many developers ‘usability’ means that it works as defined by the requirements. If designers want to test anything, they should do that before the developer spends long hours building the UI to specs. However, only so much usability testing can be performed with paper and clickable prototypes. Often, the most effective usability testing is done during development.

The Solution: Plan usability testing spikes into any Agile project with iterations that feedback into the development of the product.

06. They are telling me how to design again!

Image source: Amy McTigue on Flickr

The Problem: A developer reads one article on usability by Jakob Nielsen, and suddenly they are a usability and design expert. Designers spend years developing their abilities, knowledge, and aptitude. One problem is that, because everybody has an ‘opinion’ about design (informed or not) in some projects – especially where there may be a UX team of one – their voice is often drowned out.

The Solution: This is not an easy problem to solve, as it has more to do with interpersonal and group dynamics than it does with actual logic and reason. The best way I have found to deal with these situations is to simply listen without getting defensive. Let them have their say and consider what they say.

Does what they have to say have merit? Let them know, and then explain why you chose to go the path you did, acknowledging even that you are disagreeing with existing ‘best practices’ as prescribed elsewhere. Often developers want to just feel as if the designer is simply listening to them.

Anything else?

I’ve outlined the six frustrations that I commonly see designers having with developers, and previously detailed the six frustrations developers have with designers. What’s your take on this, and can you add to the list? Please suggest solutions in the comments below for us all to benefit from your experience.

How to classify fonts for the web

There is a power in the ability to name things, and that’s no different when trying to name fonts. Although it will not make you a better designer, being able to call different type classes by their recognized names will always help you describe and choose the right typography for the job.

I’ve been struggling while doing research for my book The New Web Typography to better describe the fonts for designs, in order to better communicate the voice I want for the text. There are actually several different methods for classifying typefaces, none of them perfect, and none that are universally accepted.

Effects and styles

In addition to the type classifications, there are also a number of distinct effects or styles that are commonly applied to typefaces of all different classifications.

These are not specific classifications of fonts, but general styles that are often applied to any class of font. Think of these as adjectives that further describe the font. For example, a font class of transitional serif, might have the distressed and stencil styles applied to it, as with the font Armalite Rifle:

classify web fonts

Although there are many classifications for fonts, the one that matters in web design is the generic font family names as defined in the W3C CSS specification: serif, sans-serif, cursive, fantasy, and monospace.

The W3C system is terse, but it is how we actually refer to the fonts in our CSS code. These, then, are the basic classes I started with.

However, for descriptive purposes, these five classifications leave a lot out. To help better understand the many different styles, I’ve sub-divided each of those basic classifications into fifteen distinct sub-classes, based on the widely accept Vox-ATypI classification system (or Vox system) with a few modifications where it made more sense for web design.

It’s important to note that although these sub-classes are useful for describing your fonts, they are not ever used in code.

01. Serif

Serif fonts – as contrasted with sans serif fonts – include embellishments at the ends of the letter form strokes. Originally intended to resemble the pen strokes of scripted type, they are now used to help space and differentiate the glyphs especially at smaller sizes in print. Whether this works to improve readability is up for considerable debate, especially on screens where resolution is considerably lower than print, but serif fonts can certainly add to the voice of the typeface.

In print, serifs improve legibility by adding by adding more visual contrast between glyphs. However, on most screens – especially at smaller sizes (12px or below) – serifs can tend to blur the letter in lower resolution monitors, making them less distinct and less legible.

Old style

Old style typefaces are the oldest of the serif font typefaces, dating back to the mid-1400s soon after the invention of the printing press. Their differentiating characteristic form other serif fonts is the angled stress of the letters, most noticeable in the lower case e. Goudy Bookletter 1911 is an old style font:

classify web fonts

Transitional

Transitional serif typefaces are the most common serifs in use today, with Times New Roman, Baskerville, and Georgia counted in their ranks. The contrast between thick and thin strokes is stronger than in old style, and they lack the pronounced slant of old style fonts. Baskerville is a transitional serif font:

classify web fonts

Modern

Modern typefaces – also called Neoclassical or Didone – have an extremely pronounced contrast between thick and thin strokes, a completely vertical stress and minimal brackets in their serifs (transition into serif). It is also common for these fonts to use ball shaped serifs at their terminals for added distinction. Didot is a modern serif font:

classify web fonts

Slab serif

Slab serif – also called Egyptian or Mechanistic serif – typefaces have almost no contrast in stroke widths with often heavy rectangular serifs with minimal or no bracketing. These fonts have become especially popular in Web design, especially for headlines, navigation and other text where clarity is important. Arvo is a slab serif font:

classify web fonts

Glyphic

Glyphic typefaces have minimal triangular shaped serifs, to the point that they are easily confuse with humanist sans serif type but could also arguably be classified as serif fonts given their slightly calligraphic nature. Albertus Medium is a glyphic serif font:

classify web fonts

02. Sans serif

Sans serif typefaces lack the flourishes of serifed typefaces and are generally clearer in appearance, although less distinctive in voice.

Grotesque

Grotesque sans serif typefaces have very little stroke weight contrast as compared to other serif and sans-serif fonts. Grotesque fonts include some of the most common typefaces in use: Arial, Helvetica, and Gotham. News Gothic is a grotesque sans serif font:

classify web fonts

Humanistic

Humanistic sans serif typefaces have greater stroke variation than the grotesque, and many designers will find them to be the most readable fonts. Gill Sans is a humanist sans serif font:

classify web fonts

Geometric sans serif

Geometric typefaces are use more basic shapes and angles in their designs. For example, the bowls of letter are generally more perfect circles or squared on a side. They are less useful for body copy, but often used for titles and intro text. Exo is a geometric sans serif font:

classify web fonts

03. Cursive

Most type systems would not include cursive as the major category, instead calling this script or calligraphic fonts. So, while cursive type implies a more formal handwritten font, we include the more calligraphic script style and more informal handwriting style.

Script

Script typefaces – also called calligraphy – mimic ornate calligraphic writing, like one might see on a wedding invitation. Snell Roundhand is a common script font. England Hand DB is a cursive script font:

classify web fonts

Graphic

Graphic typefaces – also called brush script – are less formal handwritten style than script, but still retains a brush or cursive like quality. Think of hand painted signs at a grocery store or in a garage. Knewave is a graphic cursive font:

classify web fonts

Classic Script

Classic script typefaces attempt to mimic the design of older calligraphic fonts, including Blackletter and Gaelic styles, which, arguably, could place them as cursive. However, their use is most commonly for display or decorative purposes rather than to mimic cursive lettering. Plain black is a cursive classic script:

classify web fonts

Handwriting

Handwriting – or hand drawn or casual script – typefaces mimc average human handwriting, either cursive, block letters, or a combination. Daniel is a cursive handwriting font:

classify web fonts

04. Fantasy

Fantasy is a catch all category for typefaces that do no readily fit into any other category. Generally, these fonts are extremely expressive, but usually only for display and unlikely to be useful for body text. That said, it is possible to classify something in Fantasy and other categories. For example, Airstrem could be classified as both cursive, but, because it is heavily influenced by 1950s style lettering is a better fit as a retro fantasy font.

Decorative

Decorative typefaces – also called ornamental – is the most diverse and expressive category, where fonts are specially designed to have a strong visual voice. They are generally best used as a display font, and really work for body copy. Burnstown Dam is a decorative fantasy font:

classify web fonts

Retro

Retro typefaces are fonts meant to evoke the voice of a particular period, especially from the last few hundred years. Retro fonts are generally based on specific type-styles from the period. Airstream is a retro fantasy font:

classify web fonts

05. Monospace

Every monospace character is exactly the same width as other characters in the same font, allowing for consistency in spacing regardless of the exact glyphs used. A monospace font could really come from any of the other categories, but is distinguished by spacing rather than by style.

classify web fonts

What about Symbol Fonts?

Unlike other fonts, symbol fonts, also called dingbat fonts, do not contain alphabetic characters, numbers, and other typographic symbols. Instead, the fonts contain pictograms in their place. In other words, you wouldn’t use these to layout headlines and text, but instead you would use them in place of icons or to display simple diagrams and figures.

classify web fonts

CSS does not contain a generic font family for symbol fonts, and they have not been heavily utilized in web design until recently, where they are beginning to take on an increasing role for creating icon in web pages.

Type styles

These styles might, arguably push the fonts in question into the category of Fantasy, but I find it more useful when designing to use the classification system above and then use the following styles as adjectives to help further refine the fonts class description.

Distressed

Distressed – also called rough or grunge style – text looks as if it has been weathered, eroded, crumpled up, torn, smudged, overly copied, or in some other way physically stressed or aged. Originally, this style developed when designers would literally perform those physical actions on the text, but overtime, many fonts have been developed to mimic that look.

classify web fonts

Handdrawn

Although often confused with handwritten written, handdrawn fonts are meant to resemble serif, sans-serif, fantasy, script or monospace fonts that have been reproduced by tracing their outline by hand. This generally means the lines are slightly wavy and may simply be the outline of the character with negative space or shading within.

classify web fonts

Stencil

Stencil fonts resemble text that has been created using a physical letter stencil, similar to what is often spray painted on boxes. Although typically combined with the distressed effect, you can have stencil fonts that are not distressed and distressed fonts that are not stenciled.

classify web fonts

Typewriter

Typewriter fonts resemble text banged out on a typewriter or daisy wheel printer. While these fonts are often monospaced, that is not a requirement.

classify web fonts

Pixel

Pixel fonts resemble bitmap text that has been enlarged, such that the individual pixels become obvious. This is especially popular for games or where a low-tech voice is desired.

classify web fonts

Shaded/3D

Shaded fonts include a 3D shadow either behind or inside the character.

classify web fonts

Outlined

The font is either only the outline or with a pronounced gap between the outline and the interior fill.

classify web fonts

Rounded

All or most corners in the characters are rounded off, such that there are few, if any, hard angles.

classify web fonts

Squared

All or most curves in the font have been converted to angles.

classify web fonts

QuickPanel: Dyslexia from UX Magazine

Fonts like Dyslexie and OpenDeyslexic claim to have been designed with dyslexics in mind, mostly by weighting the bottom of glyphs heavier than the top. It’s thought that by constantly drawing the eye toward the baseline, dyslexic readers won’t wander or get distracted.

However, there is no evidence that these fonts improve readability for dyslexics. In fact, one study conducted by researchers at the Universitat Pompeu Fabra showed no improvement in readability at all for dyslexics using these fonts. Instead sans-serif fonts like Arial, Courier, Verdana, and Helvetica were most effective, although there is some question as to whether this was just due to familiarity.

There is more to typography than fonts, though. My suspicion is that better typography for dyslexia is also better typography for everybody. We see a general trend in web typography toward designs that focus the reader’s attention on the text. Consider sites such as Medium, which remove visual noise (sidebars, navigation) and use larger type sizes, contrasting type styles, and more white space—especially line height—all of which help dyslexics and the general reading population alike.

Read more: QuickPanel: Dyslexia | UX Magazine.