Web Typesetting Basics

Web Typesetting Basics

A list of some good, basic, easy to implement practices.

Web Typesetting

Body

  • Set body copy first, and make sure you set it relative to REM (so we can make other measures on our site relative too).
  • Acceptable sizes for body copy range from 12-21px. When in doubt, use 16px.
  • Pick a scale, and let that set the sizes for your headings.
  • Enforce line lengths of 75 characters, max. 45 is a good character count
  • Line heights for body copy will range between 1.2 and 1.55, if using acceptable line lengths.
  • on larger screens and for larger type (19-22px), line heights between 1.6-2 become useful.
  • The longer the line length, the taller the line height
  • Use the regular variation and regular weight of a font for body copy, unless there’s a compelling reason not to.

Color

  • Establish distinct, clear, and consistent anchor styles
  • Unless there’s a compelling reason not to, design for your body copy to be dark gray as the base color.  If you want to use completely black text, try using an off-white background.
  • Avoid using light text on a dark background for body copy (though this is just fine for buttons, calls to action, and navigation elements where there’s less to compete with)
  • Always check to see that your color choices are WCAG compliant (AA is a 4.5:1 ratio).

Headings

  • Make sure there’s enough variation between your heading styles that a user can tell what is an H1, an h2, etc. at a glance
  • Reserve H1’s for page titles
  • Header sizes can get quite large but most H1s range from 30px to 72px.
  • Line heights for headers generally range from 1 to 1.4 – the bigger the Heading size, the smaller the line-height.
  • As screens get smaller, both the size of the headings and the line heights ought to shrink.

Rhythm

  • use the equation of (element size * line-height) + margin = multiple to establish a baseline grid height
  • When every element that you’d use in an article has a multiple that is divisible by the baseline grid height, you should have vertical rhythm for the majority of your content.

Performance

  • Keep your font kits to 5 total variations or less, or 100kb or less.
  • Use web fonts to ensure a consistent, attractive and meaningful design effect.
  • Even if you use a “system font” instead of web fonts, set type with care and be aware your design may vary from device, browser, and operating system.
  • Consider using a font loading strategy, and when I say to consider, I mean, implement a font loading strategy.
  • Use a fallback font. You don’t need to go overboard here, 2-3 fonts, max.

Simple Content Models

Content Modeling is not complicated.

Content Modeling is – well, exactly that.  We’re going to basically start writing our site before we even dream of how it’s going to work.  Here’s three simple ways to get started with Content Models.

Start with a conversation

Do you start your sales calls with a deluge of information about your company? No? So why are so many sites organized along the lines of “Kitchen Sink HomePage – About Page – Product Page -FAQ – Contact”?  Writing for the web is not the same as an in person conversation, but the insights you get from talking to real live customers should inform how you organize and write for your site.

Objections!

A web site is the perfect place to get the perfect response to sales objections front and center.  Every single time you hear a pattern of objections you should be figuring out a method to overcome those objections on your site.  If you need a place to start with web copy, look to the things that have held back your business in real life.

Venn Zen

Make two lists: Everything your team wants on the site, and then everything your customer wants on your site.  If there’s a union (things that show up on both lists), congratulations!  Those get top priority.  The next tier of information is what the customer wants, and the last tier (if you even need it) is what you want. Remember: to benefit you, the site must first benefit your customer.

When taken together, these three models form the backbone of an effective site or application.  It also prevents your site from looking, feeling, or being cookie cutter, even before the first sketch is drawn.

Type Systems Part 3

Finishing out our brief look at type systems, we’re going to talk about what to choose.

The short answer is: anything that works.  The slightly longer answer, and I’m sure this doesn’t comfort you much, but just pick something and go with it.

I’ve known designers that only use one type face and just make everything else fit that. And it worked! Most clients don’t notice or care – they see words and letters. Having only one, legible, multi-purpose typeface makes a lot of sense.  You can cut down on cognitive load on a page (how much information a person has to process), and it would keep costs down, and in theory improve site performance. It’s drawbacks are obvious too – it’s probably too limiting for all cases and all of your work will eventually feel the same.

I’ve known designers (and I would fall more into this category) that needed to seriously be restrained from trying too many options because, well, there are thousands of great options out there.  And that can work too! After all, if we believe that every project should be specific to the project, then we ought to try to pick the appropriate solution for that project.

And then, there are some designers (very famous and important designers) that stake out a middle ground: they have a family of favorites that they’ve found are applicable to just about everything.  Massimo Vignelli loved Helvetica as his sans-serif and Bodoni as his serif, and rarely deviated from those.  Jason Santa Maria (who literally wrote the book on web typography) recommends that approach as well.  If it’s good enough for those two, it’s good enough for you.

If you’re trying to come up with a suitable family, it’s a good idea to have at least one and no more than three typefaces per basic category.  This will give you some flexibility but also quickly constrain venturing off into crazy land.

A sample family might be something like this:

Sans Serifs: Futura, FF Meta Sans

Serifs:  FF Meta, Caslon

Slab Serifs: Sentinel, Clarendon

Humanist Sans: Whitney

Monospaced: Input

Coming up with different use cases is actually easier when you’re purposefully constrained, and it’s not as if there aren’t thousands of varying applications and permutations of the list above, or any similarly constructed list.

The bottom line is that the web is still, essentially, a reading interface.  This means that we need to choose how we display text to be read with care, and that requires a well thought out type system.

Type Systems Part 2

Getting down to the nitty gritty of Type Systems.

The reason we call them type systems and not simply type selections are because like a fine wine with medium rare steak (or a hot dog and a bud light), text is meant to be paired to create hierarchy.

Imagine for a second that everything you read on every page of the internet was only black type, in Arial, and 12 pt. in size.  Pretty boring, right? Further imagine that everything was one line height, line length, and one weight (how heavy or light the font appears.) It would be difficult for many people to read (since screens strain the eye and 12pt is relatively small), and impossible to distinguish importance – everything would look uniform.  Our eyes evolved to notice when things are different from our expectations so one font, at one length, line-height, weight, and size would result in a block of text that our eyes would really have a difficult time reading.

How we solve this problem is by defining what kind of type is appropriate for what kind of information.  Generally speaking for web, there are three basic kinds of information:

  1. Display – the dominant text on a page
  2. Heading – orients the eye to start there
  3. Body – The main text of a page.

A display may or may not be a heading element; headings may or may not be a part of the body copy, but body copy is always going to be a primary determining factor.  After all, this is the “steak” of a site – people go to sites to read something or complete actions. If there’s one place to focus on,  it’s body copy.

Interesting tangent here; the importance of your selection is inversely related to the amount of copy you plan to have.  It’s a simple principle, really – the less copy, the more perceived importance of any given word, sentence, paragraph.

From there it’s deciding what pairs well with the body copy type.  “Well” here is obviously subjective and depends on the project.  For instance,  you may need a much higher contrast between body and heading text and so picking two relatively different fonts may make sense.  Here’s an example:  Proxima Nova – a very popular Sans font – paired with Adelle, a popular serif font. The contrast between the two creates an interesting and inviting read.   Or, you may decide that you need a lot of harmony between  body and heading text, so picking a pre-designed pair like FF Meta Serif and FF Meta (a sans-serif version meant to pair with FF Meta Serif) makes sense.

Last,  with Display text,  I’d urge caution and lots of discretion.  These elements are going to be big, bold, and visually dominant,  so it’s vital that one uses restraint in only using them when and where the design calls for them. On many projects they may not even be necessary. But you may have to incorporate display type if it’s consistent with branding guidelines.  An excellent example of display type is Playfair Display,  which is versatile enough to be used for headings but not a great body copy type.

Type Systems, Part 1

Shhh.  Don’t tell anyone.  Visual concept is not why someone comes to your site.

Type Systems

If not for the visual concept, why do people go to sites on the web?

People use your site for one of two general reasons: To read (or view, or listen) to what is there, or to complete a task, like purchasing a ticket for a flight.

The latter general reason – completing a task – is far too complicated to get into today.  Rest assured however that this is very important to consider for any web project.  The former – to read what is there – means that the way the actual text is laid out means more to the success of your site than most other visual considerations.  And, by way of standards,  this is what I look for first in evaluating designs.

A type system is the result of the deliberate choices a designer makes to display text across a site.  The reasons a designer might choose one type face over another might be:

  • legibility : some fonts are made for big displays but would be unreadable at smaller sizes
  • history: like all designs, fonts have very human reasons for being, and connote the historical periods they were created in or meant to imitate
  • availability:  there are some fonts that are common to nearly every computer, many freely available fonts and even more fonts you’ll need a license to use.  The budget plays a big role here
  • performance:  Fonts must account for a variety of weights, styles, and usage.  Loading all the possibilities is a big drag on performance as it’s usually many files (which means many HTTP requests) and each file is quite large (since they must display all of the necessary glyphs like uppercase A-Z, lowercase A-Z, and numbers)
  • branding standards:  whatever font/s are chosen must be congruent with the overall brand of the organization that is publishing the site.

On a typical web project, it’s not uncommon for there to be a font selected for Header elements and another for body copy, and in addition to the concerns above, a designer needs to be aware of how each would pair with the other.

This is only the beginning of talking about maybe my favorite part of web design.  For more, check out Typekit’s excellent (and free!) resource here, or consider purchasing the amazing work of Yesenia Perez Cruz at Mijingo.