Understanding Cascading Styles in Print and Web

First let me start by saying that particularly if you only work with short texts, having a solid understanding of how styles cascade is pretty optional. That’s true of both print and web. Yes, even if you’re writing your own CSS it’s still common to not quite have a grasp of what the term cascade means. So that’s the job I’ve given myself in this piece—to explain something that’s fundamental to working with long texts, simple and straightforward, but largely misunderstood. I’ll not get into any of the technical specifics just yet, but start with the theory.

Using Type, set in Prelo

I also realize I’m using the words Cascading and Print somewhat provocatively in the title, since most don’t associate the two. I do it not to confuse, but to get you, the reader thinking about what CSS-defined styles and InDesign’s Character and Paragraph Styles have in common, specifically, how they cascade one into another.

Styles depend on one another

When I start some typographically-heavy piece of design, I generally begin by taking appropriately representative content and determining the scale and measure of the body copy in relation to the overall document hierarchy, the same for other text elements, layout features and grid dimensions, etc.. This is the play stage, and I think it’s here, as well as during testing and production, that understanding and creating interdependent styles properly can save lots of time.

The first paragraph style you set up should be the most common case, body copy. It’s here you specify the font family, size, text alignment (flush left, justified, etc.), first line indent value, and so forth. The second style you create might be a version of the above, but without the first line indent, for a crisp start at the top of a chapter or subhead. This you’ll base on the first style, meaning it inherits (or implicitly gets applied to it) all the stuff you specified in the first style. Next, you might create a block quote style based on one of the above styles, with space before and after, indents on either or both sides, italic applied, etc.. When testing, should you need to adjust the size slightly, or change to a different font family, you change it in one place, and it updates everywhere the dependent styles are applied. That’s what cascade means—the general style rules apply down through every specific instance.

Change the underlying style, they all change.

What’s the rule, and what’s the exception?

The rest of the theory behind setting up complex typographic systems really comes down to the above question. From here the task is to plan how you’ll specify as little as possible in as few places as possible, so that implementing a minor change to the design is a manageably quick process. Thursday’s post on creating and applying and generally using cascading styles will be a much more practice-based discussion on macrotypography. Catch you then.

One Comment

  1. Posted January 31, 2013 at 11:08 PM | Permalink

    Thanks. Nicely fundamental, very clear.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 61,381 other followers