![]() At this point in time, I don’t think there’s any substitute for taking the time to manually assign, construct, and document this kind of spacing. Some of them help you specify and systematize negative space typography, but most of them don’t. There are many tools available to designers to construct and document design decisions and layout. I always advise designers to go back and differentiate the negative space in their type systems with the same care they have applied to differentiating the positive-space components. In a text with multiple paragraphs, lists, and a variety of headlines and sub-headlines, the sizes of text and the spacing between them - the negative space - will be the first thing that communicates structure, before the meaning of the text itself. This follows the structure of most text more closely. The spacing implies that the objects relate to one another in different ways, some clustering together and others standing alone. ![]() In Layout (b), the structure is more complex. In Layout (A), the structure implies that each object relates to one another in the same way, comprising a single group. Here, you more clearly see here how the spaces between these boxes imply structure in two different ways. ![]() ![]() In this comparison, I have indicated the lines of text (and their different weights/densities) with grey boxes. Perceiving structure at the abstract level helps scanners understand the depth and weight of content prior to making a decision to focus more attention on it. Why? Because by varying the space between the lines of text, you make it easier for a scanner to perceive the structure of the page - specifically, what things go with one another and what things support other things. Which is better? (B) is better, every time. Layout (B) assigns variable spacing between lines of text, proportional to the type size and in keeping with the content-based relationships between them. I see it in nearly every piece of design documentation I review, and I see it all over the “live” space - the web, apps, etc. Layout (A) maintains equal spacing among all its lines of text - this is an extremely common convention. It’s negative space typography.īelow is an example of two simple page layouts. Although, once you see it, you can’t unsee it. The entire purpose of paying attention to the subtleties of layout is to ensure that viewers can quickly and efficiently scan information, understand it, and react accordingly.Īnd so, one of those things that first catches my eye in a layout is actually among the subtlest of details. That’s the way it should be, though it often is not so. But he also orders those terms, implying that one leads to the other - understanding first, action second. The way Poulin words this makes clear that, of course, understanding something and reacting to it are two different experiences. Why is this a good definition? Because it differentiates between understanding and action. “Layout is the method by why a graphic designer arranged, places, and composes visual elements which ultimately affects the understanding of, and reaction to, the information.” - Richard Poulin In fact, I was re-reading Design School Layout, by Richard Poulin, the other day and was reminded how good his definition of layout is: All of them have to do with how scannable a page or screen’s layout is. Whenever I review design documentation, there are a few things I look for in the first few seconds. Controlling the space between text styles is as important as differentiating the styles themselves.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |