How to Prevent HTML Tables from Becoming Too Wide

The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing – and it often is – but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Document Design>HTML

Small Caps in InDesign CS3 and QuarkXPress 7

We previously discussed small caps and the importance of using true-drawn versions rather than computer-generated, “fake” ones. Many of today’s OpenType fonts include true-drawn small caps, making it easier than ever to take advantage of this typographically sophisticated feature, but the OpenType interface in both Adobe® InDesign® CS3 and QuarkXpress® 7 can be a bit confusing.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography>Adobe InDesign

Will the “Real” Garamond Please Stand Up  

Garamond typefaces, in both their American and European flavors, are generally considered ideal book faces. The design is also an excellent choice for most other forms of continuous text. Magazines, newsletters, annual reports, lengthy advertising copy – for example – are all naturals for the Garamond design.

Illuminating Letters (2008). Design>Document Design>Fonts>Typography

Hung Punctuation and Optical Margin Alignment

Even with all the technology at the disposal of today’s designers, in the end it’s what the human eye sees that counts. That’s why hung punctuation is one of the skills to master when you’re ready to add professional finesse to your typography. Learn what hung punctuation is and how to achieve it in the leading page layout applications.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography

Double Spaces Between Sentences…NOT!

Typing two spaces after a period is a relic of the typewriter era that has hung around long past its sell-by date. Here’s how to make sure none of those double-space dinosaurs find their way into your typeset work.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography

Bulleted Lists

Automatic, or manual? No, we’re not talking about transmissions - we’re talking about bullet lists, those frequently used tools for organizing lists of information. Your layout application will be happy to format these lists for you, but for true typographic finesse, it’s time to learn to “drive stick” and call your own shots about bullets, alignment and spacing.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography

Headline Line Breaks

Breaking up isn’t hard to do – just do it right so you don’t lose face. Learn why making the right line breaks in display type is essential for good looks and good sense.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography>Usability

InDesign Shortcuts: Special Characters

The keyboard is rarely the friendliest path to symbols and special characters. Sometimes a bit of menu magic can guide you past the overwhelming Glyph palette. Indeed, the Special Character flyout palette in Adobe InDesign CS3 is a great shortcut to frequently-used characters and will spare your fingers the keyboard contortions.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography>Adobe InDesign

Converting Text to Outline

Powerful design software makes many choices available to graphic designers, but just because you can do something doesn’t always mean you should. For example, sometimes it’s a good idea to convert your text layouts to outline, but sometimes it isn’t. Learn more about this occasionally necessary, often ill-advised practice before you decide whether or not it’s time to convert.

Strizver, Ilene. Upper and lowercase Magazine (2008). Articles>Document Design>Typography>Graphic Design

OpenType Numerals in InDesign and Quark

Today’s OpenType fonts come equipped with a virtual buffet of numeral styles, but all those choices can be a bit much for your design application to swallow. Here’s a practical guide to help you find your way through the maze of oldstyle, lining, proportional, and tabular, in both InDesign and Quark.

Strizver, Ilene. Upper and lowercase Magazine (2007). Articles>Document Design>Typography>Adobe InDesign

Tab Leaders

Does designing a table of contents drive you dotty? Next time, remember to say “take me to your tab leader.” Learning how to use your application’s automated tab leader function is a great way to save time and keep your layouts looking professional, down to the last detail.

Strizver, Ilene. Upper and lowercase Magazine (2007). Articles>Document Design>Typography>Adobe InDesign

Finessing Typographic Details: Positioning Punctuation

Are your characters depressed? When punctuation marks are positioned next to ALL CAPS, it can leave them looking a little low. Even making small adjustments in a character’s position will create greater visual balance and give your layout a “lift,” especially in display sizes.

Strizver, Ilene. Upper and lowercase Magazine (2007). Articles>Document Design>Typography

Yesterday and Today: Remembering the Old Waxing Layout Process

I think of those earlier processes and how they assist my work. Currently, I have a hand-created layout in my portfolio to teach that I understand the printing process from a historical point of view. I am aware of the tight deadlines, as the printer has a lot to do to get my final product accomplished. And worse comes to worse, if my layout program fails, I know how to create a dummy page by hand.

Cobb, Monique. Carolina Communique (2008). Articles>Document Design>History

Why Designers Fail: The Report

Last week I announced a study on why designers fail - exploring the reasons why designers, and people who work with designers, believe designers don’t achieve the results they desire. I presented the results as UIE 13 last week, and as promised here is a summary. Prize winners will be announced soon. Many top reasons for failure are not typically considered design issues, such as collaboration skills, persuasion skills, and receiving critical feedback.

Berkun, Scott. ScottBerkun.com (2008). Articles>Document Design>Assessment

Think Graphic Design Doesn't Matter?

The goal of a graphic designer — in almost every case — is to make things clear and eliminate as much ambiguity as possible. Clarity and ease of use should be the mantra.

Reynolds, Garr. Presentation Zen (2008). Design>Document Design>Usability

How to Match Type Size to Readership

The appropriate type size for a publication depends on many factors but there are some general type size guidelines to follow to insure readability for the main audience of your publication. These are not hard-and-fast rules. The more you know about your readership, the better type size choices you will make.

Bear, Jacci Howard. About.com. Articles>Document Design>Typography

Five Simple Steps to Designing Grid Systems: Subdividing Ratios

Ratios are at the core of any well-designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions.

Boulton, Mark. Mark Boulton (2007). Articles>Document Design>Methods

Five Simple Steps to Designing Grid Systems:

Aesthetics can be measured and more importantly can be constructed. If you want something to be aesthetically pleasing there are steps you can take to make sure it is going in the right direction. Now I'm not saying that 'follow these rules and you will create something beautiful'. What I am saying is that by following a few of these guidelines can go some way into creating something compositionally balanced, which will inherently be more aesthetically pleasing.

Boulton, Mark. Mark Boulton (2007). Articles>Document Design>Graphic Design>Methods

Five Simple Steps to Designing Grid Systems: Grid Systems for Web Design, Part 1

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size - the paper size (or packaging, poster, whatever). Let's say a print designer has designed a magazine. The reader of this magazine can't suddenly increase the font size if they find it difficult to read - well they just move it closer to their eyes I guess. This is just one consideration, there are more but I'm sure you get the point.

Boulton, Mark. Mark Boulton (2007). Articles>Web Design>Document Design>Methods

Five Simple Steps to Designing Grid Systems: Grid Systems for Web Design, Part 2

Fixed width grid design for the web. What is it, how do we do it and how do we implement it? For the purposes of this article, I'm going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I'm not going to. There are just so many resources and books available telling you how to create the CSS layouts you need—I'll touch on it, but I won't be going into too much detail.

Boulton, Mark. Mark Boulton (2007). Articles>Web Design>Document Design>Methods

Five Simple Steps to Designing Grid Systems: Grid Systems for Web Design, Part 3

Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won't find the answers to those questions here. What I'm aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page.

Boulton, Mark. Mark Boulton (2007). Articles>Web Design>Document Design>Methods

Five Simple Steps to Better Typography: Measure the Measure

There is an optimum width for a Measure and that is defined by the amount of characters are in the line. A general good rule of thumb is 2-3 alphabets in length, or 52-78 characters (including spaces). This is for legibility purposes. Keep your Measure within these guidelines and you should have no problem with legibility. Please note that this figure will vary widely with research, this is just the figure I use and it seems to work well as a generally rule of thumb.

Boulton, Mark. Mark Boulton (2007). Articles>Document Design>Typography

Five Simple Steps to Better Typography: Hanging Punctuation

Hanging punctuation is an area of typographic design which has suffered at the hands of certain software products. It's a term which refers to glyph positioning to create the illusion of a uniform edge of text. It's most commonly used for pull-quotes, but I feel the most neglected is that of bulleted lists.

Boulton, Mark. Mark Boulton (2007). Articles>Document Design>Typography

Feeling Your Way Around Grids

During art college I was subjected to a lecture on the Golden Section (who remembers that lecture, come on hands up?), that ambiguous set of rectangles that is requisite art school discussion. During this lecture I was shown slide after slide of seemingly tenuous links between paintings and sculptures, and this set of rectangles. My lecturer at the time seemed as equally uninterested, droning along in self-imposed boredom. What he failed to convey at the time, has taken me over 15 years to even begin to understand. So what is the importance of these boring rectangles and how do they relate to design?

Boulton, Mark. Mark Boulton (2005). Articles>Document Design>Methods

Using a “Strawman” for Page Layout Design

Designing the page layouts for a new or redesigned intranet can be complex. One of the most difficult aspects is creating the first layout. Starting with an empty screen, you need to determine what will go on each page and where it will go. Using a strawman design - a design that is created with the intent of discarding it - can help to overcome many of the difficulties in the design process.

Spencer, Donna. Step Two (2004). Articles>Web Design>Document Design