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.

WordCamp Round Up

Notes and shout outs from an awesome WordCamp STL 2015

WordCamp STL is one of dozens of WordCamps around the world and the local version of the global WordCamp. I had the pleasure of presenting this year but it’s a conference I try not to miss if I can.  For only 25 bucks,  you get a t-shirt, great swag, and an unparalleled learning environment where you can find anyone who is interested in what you can bring to the WordPress community.  In other words, it’s Web Geek Christmas.

This year’s event was 2 days of programming starting with a keynote recording of Cain and Obenland in the Morning.  Then, 4 blocks of 4 presentations each of 30 minutes.  From Lucas Lima I learned a ton more about project management, which is always valuable. From Heather Acton, I got valuable insight into financial planning for my company.

Then I spoke.  My partner Justin Chick, my mother, and my wife came for my talk, which helped calm me down.  I still had a ton to cover and probably talked too fast for a good chunk of it, but at least I started off at a reasonable pace.  The feedback I got was overwhelmingly positive,  which is great!  If anyone didn’t like it, they didn’t let me know.

We broke for lunch and then the break neck pace continued.  In the afternoon I learned about the amazing work Cam Barnett is doing moving school systems over to WordPress, saving taxpayers boat loads of money, providing a better solution to their real problems,  and ultimately,  making schools better at their core job – teaching and cultivating kids into great adults.

Then I learned about how to fundamentally alter how to use WordPress with a great talk on the REST api, which is hopefully coming to WP core soon.  I wasn’t able to make the after party at the City Museum or much of the Community Day, which held a kids workshop and helped build a site for HandsUp United, but I learned a ton and met so many wonderful people.

I’m more sad about the great presentations I couldn’t make, like Sara Cannon’s UX Talk, Drew Bell’s talk on the rat hole of CSS Specificity, Christoph Trappe’s on authentic storytelling, Joe McGill’s on Atomic Design principles in WordPress, and Megan Harris’ on content marketing.

Far and away, the people in the WordPress community are what make it so easy for me to do what I do and make better sites for my clients.  Thank you so much to everyone who attended, volunteered, presented, sponsored or otherwise make things like WordCamp possible!

I’m looking forward to next year already, but my experience at WordCampSTL has encouraged me to begin submitting my presentation to more WordCamps.  I’m a little leery of it – the best part of WordCamps are that most of the presenters are local – but I feel like the reaction I got means that I have something to share.

 

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.