Collect and understand content

Content-out approach requires from designer to first obtain some texts, pictures, video or audio also known as content type. Since I want to keep it simple, I’ll stick to text as a primary content type in this article.

After collecting all your content, the obvious next step is to actually read it and understand it. The more you learn about what you are trying to give a meaningful form to, the better the result. If you can’t understand the content you are working with — the design will be too generic. That’s simply because you can’t typographically pronounce particular ideas and images if you don’t get them.

Once you get to know the content you are designing, you can better determine the context — time, place, concurrent activities, people and devices.

Letters

Now that you know your copy, you can start choosing typeface(s) that support it. At this point, it is wise to learn more about the author(s) of the text and use their personal attributes such as educational background, narration style or sound of voice. Use information about the author as an additional reference for the typeface selection.

Create a list of the most important terms or phrases from the text and use those in a typeface preview panel. Check for weird kerning if any and avoid typefaces that technically don’t support your text (At the time of this writing, kerning is not conveniently supported in CSS). Rinse, repeat.

After you selected the typeface (even if you’re still not quite okay with it), deal with font-size and micro white space, i.e. leading and margins. Up to this point you’re designing for the full range, so it is very important to have these common design elements covered.

Basic layout

Responsive design methodology (which I’m sure you have heard of by now) introduced breakpoints — resolution increments based on the most popular screen resolutions. Breakpoints are fundamental to creating master layouts.

The easiest approach to build responsive layouts is to first design a common denominator content unit, for instance a paragraph, a list, a table or an image. Whichever you chose, be sure it covers the most important content on a page. If you are confident enough, add a headline to that list and design the whole group.

If you’re targeting the 320 pixels as the lowest value (Apple iPhone portrait orientation), your content unit should be then designed to fit such a tiny space. White space around the text column serves two purposes. The first role is pure typographical — to provide a rest-place for readers’ eyes and the fingers that are holding a device. Secondly, it helps you establish the gutter — an empty space that shapes columns — which you’d use later on with wider layouts.

My personal favorite 320 vertical grid is 20 + 280 + 20 pixels for text pages (or 10 + 300 + 10 for applications, but I digress)

Grouping content

It is wise to group similar content into a few major groups in HTML, for instance: the page specific content + the site-wide content. Then branch the page specific content into the primary and the supplementary content, and so on.

Here’s an example: If the primary content in a news article, then the page specific content are headlines and the leading image, the article text and (pull)quotes. In that case, the supplementary content is meta-data (author, publishing/modification date, categories, tags etc.), a list of comments (with authors, gravatars, comment bodies etc.), rating tools, sharing tools, a list of related articles (with or without image thumbnails).

You can easily see from the list how easy it is to create semantic groups. Use those groups as a building elements of your master layouts.

Both on smart-phones and tablets, the secondary content would probably fall “under” the primary content. But instead of linear image positioning inside the text in the primary content area on the smart-phones layout, you can float images left and right on the tablets layout to create more interesting flow.

On each next layout, place sideways the portion of the page that was formerly pushed “under” and reuse the left and right page margins as new gutters.

On simple vs. rich designed

There are a number of differences between mobile and desktop layout, but the one rarely considered is that mobile screen provides a better focus once your attention is inside the screen. In mobile browser, you can’t tell anything about the content of pages in other “tabs”. There’s no room for such information, because every pixel counts.

On small screens, the currently watched content doesn’t have to fight for a reader’s attention by unnecessary decorations. On desktop screens, we’re able to multi-task and hence we unconsciously compare things and shift focus. On tiny screens we can’t do that. That’s why we can get away with less rich visuals on mobile in favor of clarity and simplicity.

On divitis

Sadly, I have seen many inexperienced developers (even the famous ones) using pretty harsh language against their peers using non-semantic markup. I can remember I did that more than once in my early days.

Only hand-curated design/developer’s blogs work well with very little backward compatible markup for layout. The rest of the World, especially sites we build for clients — not to mention heavy-weight database driven systems — would simply break without a help of some extra markup here and there.

You are allowed to use as many non-semantic divs as you need, but always question yourself whether you really need it, or is there a better solution.

…

If you happen to be in Zagreb on Thursday, January 19th 2012. I’m giving a 15-minutes presentation on this topic; More info about the event.

If you missed the Zürich conference, there are still some tickets for Paris Web in October 2011., where I’ll hold a Typography for Programmers workshop.

Now that we have web fonts available, we can avoid image replacement and apply virtually any font to a plain HTML with a little help of @font-face rule.

Another problem with HTML text is how lines of text break. If you aim to create a particular rhythm to your copy, you’d probably want to control the length of each line. Naturally, you can use <br /> to push the text into another line.

However, to enable natural flow of text on mobile screens which are narrower than the desktop horizontal text block offset, you simply add @media query to your CSS:

@media (max-width: 480px) {
    .your-particular-selector br { display:  none; }
}

Please note that you should leave an extra space behind each <br />. This way when it’s removed with CSS for mobile devices, you won’t end up with weird results, for instance Lorem ipsumdolor sit amet,consectetur:

Lorem ipsum<br /> dolor sit amet,<br /> consectetur...

With the new age of web typography, many designers jumped into the bandwagon, using all this newly available typefaces. But the abundance of options available is actually a pitfall.

Strong sense of typography is still mandatory. Additionally, we still have a number of technical limitations in the digital space (but that’s a topic for another occasion). Let’s discuss the common mistakes and how to avoid them.

Always observe the typeface in a context

When a famous designer suggests her favorite type in a blog post or interview, almost instantly there is a flood of the suggested type on the Internet.

However, we must first understand the personal style of each web/graphic designer, so we can perceive their choice in a given context. You’ll get the most of designer’s favorites if you observe her work done with this particular typeface.

Display fonts won’t work well at small sizes

Most of the display fonts look really great at larger sizes, say 36px and up. But many Great Lookin™ typefaces can’t be used for body copy or even subheadings. You’d have to pair those with something more readable at small sizes, i.e. 12-16px.

Beautiful typeface?

Beautiful Typefaces™ usually have a personality, triggering emotional reactions by nature. Sometimes the form and style are more important than the content, but in reality this is quite rare.

Communication with a personal touch on high-profile news sites is not the best of ideas. Journalism should be neutral, but not necessary in Helvetican sense. Some smart alternatives are typefaces that are common enough to a broad audience, so they don’t distract the communication.

On choosing something different

Phantastic display font™ that is too similar to body/subheadings font — looks odd. The exception are fonts from the same type family (see further in the article). If you want Something Different™, use a contrast that’s obvious, not just a small shade.

There is a thin line between perfect balanced and saturated

Meatball Sundae: “A meatball sundae is the unfortunate result of mixing two good ideas.”

It’s still seen so often: mix and “match” of typefaces that are all fighting for their attention. The reason why type families work well is because the type designer’s intention was to create a compatible set(s).

Not all type from the same designer will work well together. Make sure you have read the manual, i.e. what a font designer had to say about each of his pieces. Designers in fact quite often explain how to combine their type with other kids and what works best.

The checklist

Because this is what you’re here for, right?

Preparation

• List all content/user interface elements, for instance: title, subheading(s), lead, egida, summary, paragraph, list, table, comment/quote, pullquote, caption, infography, link(s), buttons, input(s), textarea, …
• Design the grid: horizontal and vertical rhythm based on content elements
• Establish the baseline (common denominator) and the size hierarchy (element proportions)

by this time you’d have a pretty good idea about what you need in terms of style…

Selecting

1. Find the single type family, the one that can handle the hierarchy and support both display chunks and general readability. Some great examples of such superfamilies are Typonine Sans, Proxima Nova or Meta Serif. Test with the real content.
2. If that fails, choose two type families (one for display, another for body text), that the type designer have explained will work well together. Test with the real content.
3. If that fails, choose two type families that a savy graphic or web designer explained will work well together. Test with the real content.
4. If that fails, do some experiments yourself. Test with the real content.

We weren’t aiming to teach them CSS or any coding techniques for that matter. We were after explaining technical limitations on the web. It was all about a few important points, live explained with Typetester and presented in a form of a checklist (PDF, 24KB).

The group was already familiar with the design theory. I was quite astonished how well they handle typographic vocabulary. They were, on the other hand, disappointed by the fact that there’s only quite a few fonts they can use for body copy in order to cover the majority of visitors.

The students were interested in learning about progressive enhancement of a web page with image/Flash replacement methods. Once I explained structural layers and how site mechanics work in general, they asked a couple of smart questions, which lead to an interesting discussion. Mission accomplished.

Jon Tan’s article Flipped Types was a great help to explain the major difference in approach when designing for print vs. web.

The summary of the morning is best explained by one of the students’ genuine eureka conclusion:

“Oh, God! So it basically means, we have to think about many different scenarios when designing for web?”

They are showing off their grid and maratz.com joins the party.

For the geek in you, turn off JavaScript and reload the Ezadar cover.

Typetester user Jason from Robbinsville asked:

Why are some font sizes in the typetester drop down size list in red and others not?

The highlighted values in font size drop-down match the ones in Photoshop.

Those values are also known as Typographic scale. Mark Boulton wrote a series of short articles on the topic. Here’s a quote from Five simple steps to better typography – Part 4.

In the sixteenth century, European typographers developed a series of typeface sizes, a scale (the musical analogy is a good one – stick with me). As shown in the diagram they are sizes we’re are all familiar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hundred years. In fact, they are the default font sizes in many applications (give or take a few.).

So, what’s so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.

There are times when those so-called “ugly fonts” work extremely well.

And if the target group loves Comic Sans, they are going to get the Comic Sans. Using particular font or avoiding it — based on a personal preference is utterly ridiculous. That is not designing, that is creating an artwork.

Use what your users love. Use what communicates best.
Even if that’s Comic Sans. And try to live with it.

Global line height is usually set to html or body element. In this quick lesson, we’ll use a line height of 1.5.

* { margin: 0; padding: 0; }
html { font: 62.5%/1.5 "Lucida Grande", Verdana, sans-serif; }

You’ll also notice that we reset margins and paddings globally with the universal selector.

Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to element’s line height ensures correct vertical rhythm.

ul, ol, dl, p { margin-bottom: 1.5em; font-size: 1.2em; }

Most often—for various reasons—you don’t want to set font size of a block-level element that by default must have block-level children, like for instance unordered list must have. You would instead specify font size for list items, definition terms and definition descriptions:

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl, p { margin-bottom: 1.5em; }

Now we only have to redefine bottom margin of lists to 1.8em. It is calculated by simply multiplying element’s line-height by child element’s font size (1.5 × 1.2em = 1.8em)

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl { margin-bottom: 1.8em; }
p { margin-bottom: 1.5em; }

Use the same principle when dealing with other elements: headings, tables etc., and within a minutes a sound vertical spacing will be accomplished. Still hungry? Head on to Compose to a Vertical Rhythm.

Addenum

This article is also available in Russian. Big thanks goes to Errant.

The base font size of the TT is 10px, which means 1em is 10px, 1.2em is 12px and so on.

The ems for the screen are actually multipliers of the document’s base font size. The good practice is to set document’s font size to 10px (or if you want it to be resizable by the Internet Explorer users, set it to 62.5%).

body { font-size: 62.5%; }

Once you fix your global sizing (which is 16px by default in most of today’s graphic user agents), it’s easy to multiply textual elements with ems.

body { font-size: 62.5%;  /* 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }
...

The reason behind setting the body element’s font size to 10px, is the ease of multiplying everything else with round number 10. If we’d set font size to 16px (or 100%, or not set it up altogether), the 1.1em would be 17.6px, which is pretty nasty number to work with, since the screen can’t display 0.6 of a pixel.

Still not convinced? Try calculating what would be font size in ems, if we’d want our heading in 18px?