It's all about everything a Malaysian techie journey!

[PUBLISHING] Grids : Flexible Options


Author: Jacci Howard Bear

Grids : Flexible Options

Choosing the Right Grid Makes All the Difference

Choose a grid based on the content and adjust content based on the grid
The right grid offers the designer flexibility without overwhelming them with possibilities. The right grid also enhances organization and makes it easy for the viewer or reader to understand the content.

There are no right or wrong grids, simply grids that are more suitable for different content and design objectives. Of course that doesn’t help you much when you’re staring at a blank page and a deadline. Here are some “thinking points” to help you plan your grid and your design.

  • Content or Page Elements.
    Is the publication heavy on text or heavy on graphics? Will there be many headlines, rules, illustrations, pull-quotes?
  • Text.
    Look at both amount of text and how it is broken down — long articles, lots of short articles, a mix of long and short articles. How many subheads? Will you use eyebrows, decks, initial caps, and other visual cues?
  • Photos and Illustrations.
    Are there similarities in the type of illustrations or size of photos? Can photos be grouped by size or type? Are there a lot of rectangular elements or many irregularly shaped elements?
  • Complexity.
    Generally the larger the number of grid units (and the smaller the individual units) the more design options are available. However, too many options can destroy the underlying unity that the grid provides.


So, which grid is best? Here are some guidelines (remember, I said guidelines not rules).

  • Lots of text with few graphics — such as a book with long chapters and few or no illustrations — can use a simpler grid. 1 – 3 units, perhaps.
  • A newsletter, brochure, or magazine with many photographs usually requires a grid with many smaller units to give more possiblities for placing and sizing the photographs.
  • Newsletters, because they generally have more text, often use a columnar grid.
    • 1, 2, and 3 column grids are common. Each can accommodate lots of text, especially long articles.
    • 4 or more columns offer greater flexibility for publications with text, photos, and other graphic elements and a mix of long and short articles.
    • Grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout.
    • Newsletter don’t have to be tied to columnar grids. A newsletter consisting of mostly small articles or “news briefs” and photos could use a 6(2×3), 9(3×3), or 12(3×4) unit grid of rectangular or square units quite nicely.


Grids don’t have to limit design
Grids can feel stifling. But they needn’t be.


  1. Layouts based on grids are not appropriate in all cases.
  2. Grids should fit the mix of elements rather than forcing elements to fit the grid.


Elements on your page do not have to be confined to individual grid units. In a five-column grid, 5 narrow columns of text can be hard to read. Try two columns of text, each spanning two grid units with an empty grid unit for accents, photos, breathing room, or adjacent caps. (see previous feature on Finetuning Initial Caps)

 0612resizeResize photos to fill 2-3 or more grid units. You don’t have to always fill the entire grid unit either. Fill 2 1/2 grid units with a photo, leaving some extra white space.

0612bleedGutters and margins are not off-limits. Bleed photos off the  edge of the page. You don’t have to fill every little grid unit. The odd column in a 5 or 7 column  newsletter grid can offer extra “thumb space” along the outer edges. There are many ways to add white space to your designs — leaving some grid units open is one way.

If one grid is good, two could be better
Some publications use mixed grids. A different grid than what is used through much of the publication might be appropriate to present content that varies greatly from the rest of the pages. It is also okay to mix grid systems within the same page.

  • A text heavy newsletter might group all photos and illustrations on a single page. The text pages can use a simple grid. The multiple photos might require a more complex arrangement.
  • Use two different grids to differentiate sidebar or secondary items from primary articles.
  • Mix long and short articles in the same publication using a different grid for each. Or use different grids for feature material and regular recurring departments.





As with any grid system, use it consistently. Let content guide your design and make your grid a partner in your page layout — not a dictator.

This series is only an introduction. But if it has helped you to understand the basics of design grids, given you ideas, or inspired you to find out more — then it’s done just what I intended.

[PUBLISHING] Grids : Consistency & Unity


Author: Jacci Howard Bear

Grids : Consistency & Unity

Tying Elements of a Page Design Together with Grids

For the most part, people prefer organized visual information
Newsletters, magazines, brochures, annual reports, and books often have many visual elements: columns of text, headlines, photos, illustrations, pull-quotes, etc. Grids allow the designer to build page-to-page consistency into these documents.

Readers expect to find page numbers in the same location on each page. When all the text in a given article — even when it spans several pages — has a consistent look, including column width, it enhances readability. Readers often expect to find sidebars, informational text, and other oft-repeated elements in the same place from page to page.


A grid, used consistently on all pages of a multi-page document, makes it easier for the designer to provide the consistent look that readers often expect. A carefully conceived grid system also allows the designer to introduce variations without forsaking readability or consistency. It also speeds layout because it takes the guesswork and “look back to see what we did before” out of where to place elements from one page to the next.


The pages, below, are examples of how you might combine text and graphics in a 7-unit vertical grid (such as for a newsletter). Notice how page 1 (Figure 1) and 2 have a consistent (reversed) layout. Text columns are two-grid units wide. One grid unit provides an extra wide column of space separating the main text from the sidebar elements. Page 3 (right hand page of the 2 page spread, Figure 2) is quite different from the first two pages but if you look at the underlying grid struction (Figure 3) you’ll see that all three pages use the same grid system.

FIGURE 1: left-hand page of newsletter with 7-unit vertical grid


FIGURE 2: two page spread of newsletter with 7-unit vertical grid


FIGURE 3: two page spread showing the underlying 7-unit vertical grid (blue)









Grids can unify a series of dissimilar documents
There are many ways to establish visual unity throughout a series of related pieces. You probably use your logo on all your marketing pieces. You may have color coded brochures for different aspects of your business. Grids are another way to bring unity and cohesiveness to a collection of brochures, sales sheets, display ads, spec sheets, and other elements of your marketing arsenal.

As we said in part 1 of this series, “In a series of single, but related pieces (such as a series of posters or information sheets for a single ad campaign or single product line) a common grid can help unify the separate pieces.” Let your grid help you place repeating elements in the same place from piece to piece. Let your grid provide a consistent guide for mixing graphics and text.

The informational sheets in Figure 4 have a common style for the headline treatments but don’t all use the same number or size of graphics. The 3 unit grid (Figure 5) helps to unify these pieces. This is a fairly simple, straightforward example.



FIGURE 4: 3 informational sheets that share a common 3 unit grid


FIGURE 5: A three unit grid helps unify a series of information sheets containing varied elements





One grid, many designs
Grids have been accused of creating boring, static designs. It’s not the fault of the grid. Used properly, grids can offer a variety of creative design options. Figure 6, below, shows how a 4×4 (16 unit) grid system takes on different lives using the same four graphic images and varying amounts of text.



FIGURE 6: Just a few of the arrangement options using the same “boring” grid.

[PUBLISHING] Grids : Order Out of Chaos


Author: Jacci Howard Bear

Grids : Order Out of Chaos

Invisible Structures: When and Why to Use Grids in Page Layout

0529bThink of the grid as a plan — a plan for your page layout
Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.

A grid is an invisible structure used to guide the placement of elements on your page. Grids don’t appear on the printed piece but their influence may be evident in the widths of column texts, the uniformity of space around photographs, or the consistent placement of repeating elements from page to page in a magazine. They are a series of guidelines that determine the margins of the piece, space between page elements (headlines, body text, photographs, etc.), and let you know where to put things on the blank page.


Before deciding when, why, and how to use a grid you need to know the elements of the grid and how to create it. While it is invisible in the final printed piece, you’ll need to be able to see it during page construction.


In your page layout, you’ve probably set margins. These margins often show up as light solid or dashed lines on the screen. These top, bottom, left, and right margins create a box in the middle of your page. Stop there and you have a single unit grid. Further divide the page into uniform parts and you’ve created a multiple unit grid. You can create a visible grid to aid in page layout using the guidelines feature of your page layout software or by drawing lines or boxes that you place on a non-printing layer of your publication. Often you can “pull” a guideline from the rulers on the sides of page and place them where you want them.


Margins & Grids
Margins define the outside boundary of your page. They frame the content of your pages. Margins may not be equal all around (but are normally consistent from page to page or panel to panel). In most programs you would set the margins when you define the page dimensions (format). You can also adjust the margins “on the fly” by moving the guides on screen (in some programs).

Alleys & Grids
When you divide the interior space of your page into uniform parts the white space between units are alleys. Depending on how you’ve set up your grid the alleys may run horizontally, vertically, or both directions on your page. In some designs this would translate to the white space or “gutter” between columns of text.

Gutters & Grids
In a two page or two panel spread, the gutter is the inside margin. It’s the space on either side of the fold. In some page layout programs the space between two columns of text is sometimes called the “gutter” as well.

0529aGrid Units
Grid units are the primary locations on your page where you will place text and images. They determine placement not necessarily size. That is, if you have a graphic image that is larger than your grid unit, it doesn’t mean you can’t use it. You would use your grid units to help resize the photograph — ideally to fill 1, 2, 3 or more grid units and then to place that image on your page.

Grids provide visual organization
Grids have different uses and may not be appropriate for all situations or all designers. Publications such as magazines and newsletters almost always require a grid. It provides page to page continuity. It also helps speed production because the designer doesn’t have to “start from scratch” laying out and designing each page of the publication.

In a series of single, but related pieces (such as a series of posters or information sheets for a single ad campaign or single product line) a common grid can help unify the separate pieces.


In a single piece that has many disparate elements (blocks of text, headlines, photographs, drawings) a grid can help organize these elements on the page.

[PUBLISHING] Newsletter Design Clinic: Use Fewer Fonts


Author: Jacci Howard Bear

Use Fewer Fonts
Desktop Publishing Rules for How Many Fonts to Use
How many fonts are too many for one project and how do you know where to draw the line? A generally accepted practice is to limit the number of different typefaces to three or four. That doesn’t mean you can’t use more but be sure you have a good reason to do so.

Be consistent in the use of fonts. A different font for every headline, for instance, is confusing and can give your design a cluttered look. You can usually get away with more fonts in longer documents with many different design elements where only two to three different fonts appear on any one page spread.

“Right and wrong do not exist in graphic design.
There is only effective and non-effective communication.”

— Peter Bilak – Illegibility

Select a font for body copy and another for headlines. Use bold, italics, and different sizes of those fonts for captions, subheadings, decks, and other design elements. Depending on the design you might use a third font for initial caps, pull-quotes, or other selected items. You might add a fourth font for page numbers or as a secondary body font for sidebars, but usually two or three are sufficient.

Don’t use more than four fonts in any one publication.
As a general rule, when designing a publication I never use more than four fonts. Realistically, how many do you need? For a newsletter layout, you could use one font for headings, one for body text (which could also be used in italics or bold for captions) and one for subheadings. You may not even need that fourth one.
— Stuart Gardoll’s Desktop Publishing Do’s and Don’ts

It is also wise to not make sudden typeface changes within a paragraph. Use the same typeface for body copy, using only bold or italics to add small amounts of emphasis, if necessary. If greater emphasis is required — create a pull-quote, set that copy in the margin, or create a sidebar using a different font to really set the information apart.

See the supporting illustrations on using fewer fonts for further clarification and tips.

The Bottomline: No hard and fast rule says you can’t use five, six, or even twenty different fonts in one document. However, consistency and readability are important to good design and too many font changes can distract and confuse the reader. Make your font choices carefully and consider how many typefaces will be seen together — longer, multi-page publications, such as magazines, can often tolerate a greater variety of typefaces. For brochures, ads, and other short documents, limit typefaces to one, two, or three.

[PUBLISHING] Newsletter Design Clinic: First Impressions


Author: Jacci Howard Bear

Newsletter Design Clinic: First Impressions

Evaluate Newsletter Design Against Goal of the Newsletter Design

Before you begin to analyze the layout, the writing, the use of graphics and white space of your newsletter design, pick up your newsletter and look at it as if for the first time. Too close to the subject? Ask a friend to help. Before you see the trees look at the forest.

One measure of a newsletter design effectiveness is the first impression a reader has upon seeing it. Does it say boring, exciting, read me now, save me for later, or, don’t bother – there’s nothing important here?.

Without reading more than a few words the nameplate, the choice of layout, the grayness or openness of the design, color and weight of the paper, the balance of text and graphics all give clues as to the value of the content. Or perhaps we should say the perceived value .

Will a new reader perceive value in your newsletter?

Design With Definite Goals in Mind for the Newsletter Design

One goal of good newsletter design is to entice the reader to read the information in the newsletter.

Designers achieve this through choice of layout typefaces and use of visuals.

But those choices should also be guided by other factors such as the purpose the audience and the desired image of the newsletter. The use of provocative images may catch a readers eye but do they represent the image the newsletter client wants to convey? Do they enhance or overshadow the message?

Ask These Questions About the Newsletter Design

Look at the newsletter design from the perspective of the new reader – someone seeing this newsletter for the first time.

  • What is the purpose of the newsletter and who is the intended audience ?

    The purpose and audience should be readily discerned simply by looking at the nameplate and perhaps the table of contents. Does the name of the newsletter or a subtitle tell the first time reader what to expect? Is this a topic that is likely to interest them? Is this a newsletter meant for consumers scholars professionals kids? Is the primary purpose to inform entertain generate sales or promote a cause?

  • Who is sending this newsletter?

    Disclosure can lead to trust. Hiding your identity as the publisher could lead the reader to question the true motive behind this newsletter. Is there a masthead listing the staff company or organization and contact information?

  • What type of image does the newsletter reflect?

    Does the newsletter have a formal or casual look? Does it appear to be carefully put together or simply slapped on paper and shoved out the door? The choice of paper its size and thickness also contribute to the image. Does it look cheap friendly elegant or institutional?

Does your first impression of the purpose sender and image hold true to the intended goal of the newsletter? If there is ambiguity or worse a conflict between the intended goals and what a readers sees at first glance then perhaps the newsletter design needs reworking.

Consistency, Conservation, Contrast and First Impressions
The first lesson of our newsletter design clinic looks at the three C’s of good design. Consistency, conservation, and contrast can also improve the overall appearance and first impression of a newsletter.

  • Is the name of the newsletter or its subtitles consistent with the desired purpose and audience or do they imply something different?
  • Do you want to convey a formal image? A clutter of typefaces and graphics gives an entirely different impression and isn’t consistent with a formal image.
  • A lack of contrast between headlines and text and other elements can give an impression that the contents are boring or uninteresting. Is that the perception you want? Or is there conflict between serious nature of the content and the playful informal look of the newsletter?

Whether it is first impressions or what the reader finds when they dig a little deeper – purpose, sender image, consistency, conservation, and contrast all work together to create an effective newsletter.

[PUBLISHING] Newsletter Design Clinic: 3C


Author: Jacci Howard Bear

Newsletter Design Clinic: 3Cs

Use Consistency, Conservation, Contrast to Improve Newsletter Design
Have you ever looked at a newsletter — yours or someone else’s — and couldn’t quite put your finger on what was wrong with the newsletter design? Look more closely. Does it appear haphazard, thrown together with each page having a different look? Is it cluttered with multiple fonts, photos, and unnecessary clip art? Do the pages appear gray and monotonous?

The first lesson of good newsletter design is to practice the 3Cs:

  • Consistency
  • Conservation (Clutter-busting) 
  • Contrast
In newsletter design, be consistent, cut clutter, and add contrast.


As with any design, these are not hard and fast rules. There is rarely only one way to do something. But follow these guidelines and you can turn a bad or so-so newsletter design into a more eye-pleasing publication. No newsletter can survive without good content but our aim in the Newsletter Design Clinic is to present your content in an attractive, effective package.

Consistency Organizes and Unifies Newsletter Design
Practice Page-to-Page and Issue-to-Issue Consistency
A newsletter doesn’t have to be boring. It can have little surprises pop up. But consistency aids the reader by organizing your words and eliminating distracting clutter. Consistency unifies the many different elements — headlines, text, clip art, photos, captions, short stories, long stories, fillers, etc. — and doesn’t distract the reader from the message.

So what would be inconsistent newsletter design?

  • Different margins on each page.
  • A different typestyle for every headline.
  • Not using the same basic layout on each page or changing the ‘look’ every issue.
  • Clip art and graphics that don’t relate to the newsletter contents.
How do you maintain consistency in newsletter design?


  • Design around a grid.
    Grids help keep elements in the same place from page to page.
  • Use templates and styles.
    Templates, like grids, help keep elements in the same place from one newsletter issue to the next.
  • Use repeating elements (examples. the same header on each inside page; the same end sign on all articles; the same standing header for all recurring columns).

Cut the Clutter With Conservation in Newsletter Design
Eliminate Distracting Visual Elements
A common mistake of new desktop publishers is to overload documents with fancy fonts and clip art in the mistaken belief that it adds interest and makes it less boring. No amount of fancy type is going to make boring words any more exciting. So add interest and excitement by editing and rewriting. Use fonts and artwork only to lead the reader through your publication and illustrate your words.

Conserve valuable newsletter real estate by not filling it up with unnecessary and distracting visual elements. Conserve your readers time and eyesight by choosing type for its readability not its ‘gee whizziness.’

How do you cut the clutter and practice conservation in newsletter design?

  • Use Fewer Fonts. Use no more than three typefaces.
  • Use Frames and Boxes Sparingly. Don’t box every element..
  • Ue Less Clip Art. Limit clip art, photos, graphic accents to one or two per page.

Create Contrast in Newsletter Design With Obvious Differences
Opposites Create an Attractive Newsletter Design
Once you’ve found consistency and eliminated clutter, it is contrast that provides the visual interest for your newsletter. The key is to create true contrast not conflict.
A headline set in the same typeface as the body text has no contrast. Make the headline 2 points larger and it just looks timid — not sure if it’s a headline or not. Make it bold, make it double the point size of the body text, change the typestyle, and you have contrast. Now it looks like a headline. Now it grabs your attention, says read me, and entices you to read the rest of the story.

Achieve contrast through size, alignment, color, shape, and other opposites. Don’t be timid. Type reversed out of a pale blue box has no contrast. Make the box dark blue with that white type and things start to pop. Create contrast by creating obvious differences.

What are some specific examples of contrast?


  • Type Contrast.
    Use a bold sans serif type for headlines and a serif for body text.
  • Size Contrast. Make it big, really big. Use an exaggerated drop cap or enlarge a single piece of clip art to make a statement.
  • Text vs. White Space Contrast. Set text in columns with an extra wide outside margin. White space provides contrast to the columns of text, especially in newsletters with long articles.

Draw by chillicandy

Draw by chillicandy

jefflhlow is my personal initial. I am a fast learner especially in Information Communication Technology and Computing. I grow a deep passion in adopting fast growing technology, ever creative design and ever  changing programming method.

I am active in sports especially paintball had been my great passion. Paintball is the only sports I have always wanted to excel and growth with.

I love my family and putting them first in everything.


Smashing Magazine RSS