The basics
Let’s start with a basic type spec decision: point size. Generally, you choose a point size for one of two reasons: readability or copy fitting.

InDesign lets you specify point sizes down to one thousandth of a point. From a readability standpoint, though, there’s rarely a reason to choose a fractional point size, 10.5 point, for example. It’s very difficult to discern a half-point size difference in the first place, and if you decide 11 point is too small, 11.5 point probably isn’t going to look much better.

Over the length of a book, a half-point reduction in size could shorten the length of the text enough to eliminate a signature, which could save serious money. Half-point sizes may also occasionally help when setting type in narrow columns.

Leading generally follows suit, although you’ll find half-point leading increments useful more often than half-point type sizes. (As with point size, InDesign allows one-thousandth point leading precision.) But even then a half point of leading will only make a significant difference at smaller text sizes, with the impact being proportionately greater as the type gets smaller. An extra half point of leading in footnotes, for example, can make them easier to read. But above 12 point, experimenting with half-point leading is rarely worth the effort.

However, tiny leading adjustments come in handy when specifying a baseline shift. Baseline shifts are useful for visually aligning two characters, such as top-aligning a small dollar sign next to a price. Creating precise alignments depends on finely graduated adjustments. Like leading, baseline shifts can be a thousandth of a point, although you’ll never need such precision.

These insanely fine increments exist because InDesign uses them internally. When scaling drop caps, for example, it creates myriad minutely different sizes depending on their depth and the text’s size. Leading, likewise, needs to be finely adjusted to vertically justify type to fill a frame from top to bottom. Adobe made this degree of precision available to you, overkill though it may be.

When engineering the InDesign hyphenation and justification controls, Adobe did likewise, offering one-thousandth em increments for kerning and tracking adjustments.

Kerning and tracking
How fine is one thousandth of an em? So fine that you can’t see it. In text, a kerning adjustment this small can’t even be rendered by the typical imagesetter. At display size, when it might be as wide as a strand of hair, it’s too small to make a visible difference. The kerning tables in virtually all fonts specify adjustments no finer than one hundredth of an em.

If you click the Up and Down Arrows in the Kerning field located in the Character panel (Window>Type & Tables>Character), you can alter the spacing between characters in 10/1000 em increments. This is almost always more than fine enough. In fact, I use the Units & Increments section of the Preferences dialog (InDesign [PC: Edit]>Preferences>Units & Increments) to set the Kerning/Tracking to 20/1000 em, or 1/50 em. This becomes the adjustment increment when I use the kerning keyboard shortcuts: Option-Left Arrow key and Option-Right Arrow key (PC: Alt-Left Arrow key and Alt-Right Arrow key). Hold down the Command (PC: Ctrl) key at the same time and InDesign will multiply the effect by five, but I find this too coarse.

The tracking value of each line is unique: 0, –5, –10, and –20 thousandths of an em. Can you tell which is which? It’s not easy, which goes to show why increments of less than 1/100 em aren’t usually very useful. (Answers: line 1: –5; line 2: –20; line 3: 0; line 4: –10.)

The Character panel’s Tracking controls also work in 10/1000 em increments; as with kerning, you can type in any value you want. Although this isn’t very useful for kerning, it can be for tracking. For example, when you’re trying to eliminate a widow (a very short last line of a paragraph), you want to keep tracking changes to a minimum to avoid altering the texture of the whole paragraph. Here, tweaking spacing in 1/1000 em increments may do the trick. In such cases, this minute alteration is multiplied by the number of characters and spaces in the affected text. In a long paragraph, a small tracking change can make a big difference in how lines break, while being basically invisible otherwise.

Regulating character widths
The last control I want to mention is that regulating the set widths of characters. The horizontal and vertical scale of characters (also managed in the Character panel) and the degree of glyph scaling you’ll permit during hyphenation and justification (controlled in the Justification panel, accessed from the Paragraph panel’s flyout menu [Window>Type & Tables>Paragraph]) are controllable in 0.01% increments. Once again, this is overkill. Altering character widths enough to visibly change their appearance is rarely a good idea, but where minor tweaks are desirable, increments of 1% are more than fine enough.

In this 60 pt logo, getting the subscript “2” to bottom align and trademark bug to top align required precise baseline shifts. The “2” was sunk –9.8 pt, while the TM (set at 13 pt) was raised 33.2 pt. Only in fine alignment situations do you need to lead in such tiny increments.

When allowing glyph scaling during hyphenation and justification, you want to keep alterations in character width exceedingly subtle, so you’ll probably be working in a range of about plus or minus 1% in any case. Here, a 0.5% change in the allowable glyph width variation may make a difference, but smaller changes will likely produce very little in the way of better composition.

The only difference between these two paragraphs is that in the lower one, glyph scaling is turned on to allow a maximum character compression of 1%. This difference is virtually undetectable, even in the enlarged samples here.

The point of all of this is that you shouldn’t be intimidated by the exacting values InDesign lets you bring to bear on your type. In type, it’s the little things that count, but that doesn’t mean that everything that’s little counts.

Before

Swing Goth was born out of an attempt to marry partner dancing with modern music. “We dream of a future where dancing with each other is once again the norm, but we’re unlike other partner dancing clubs in that we dance to modern music,” said Brian Gardner, originator and promoter of Swing Goth. Gardner hosts biweekly dance parties and occasional live-music events in San Francisco—Swing Goth’s home—and the activity has spread to New York. “We teach partner dancing based on upper body connection, and we focus on developing a personal style and flair rather than on perfecting cookie-cutter footwork,” Gardner said.

Some of Swing Goth’s events, such as this October’s “Ball of C’thulhu,” feature steampunk bands. Steampunk is a visual aesthetic and literary genre that, like Swing Goth, combines old and new. “I think of it as what would happen if the combustion engine and mass production were never invented,” explains Gardner. Think of floating airships or computers with keyboards made out of typewriters. “Aesthetically, it is said that steampunk is what happens when goths discover brown.”

For the ball flyer, one of the participating bands came up with the tentacles-and-cemetery theme. Gardner took it from there, populating the cemetery with ghouls drawn by a friend or images from the public domain. The flyer will be printed as a 4×6″ postcard to be distributed in clubs, record stores, and the like; and as 8.5×11″ posters to be hung in appropriate neighborhoods.

Gardner likes some aspects of the flyer, such as the tentacles wrapping around the band, but he worries that it looks too wordy and doesn’t like the way the text breaks down into horizontal bars that interrupt the eye’s flow. He’d like a flyer that covered the event details but still gave a feeling of “gentle, dark seduction” between elegant ladies and gentlemen. We asked three designers to create an appropriately seductive—but appropriately spooky—monster mash flyer.

After

DESIGNER: Maria Stephens
www.tigerlillydesigns.co.uk

My immediate impressions of the original design were that it was busy, absent of any real focal point, and lacking impact. I wanted to give it a more professional touch that would complement the reputation of the promoter and musicians.

I began by stripping the poster down to its basics and identifying what the client liked about the current design: colors, central image, and dark mysterious vibe. I then looked at what elements were necessary to the flyer and reordered them in terms of size and location to create a more structured hierarchy. I considered the main focal point of this poster to be the event, theme, and date, and therefore concentrated the design on these areas. I liked the cemetery theme as it has a link with the headline act Abney Park (also a cemetery here in London), as well as being a perfectly fitting theme for this monster mash.

The overall colors of the poster remain dark so that the white, green, and yellow text can really pop in the ultraviolet lighting common in clubs. All the band logos have been displayed using white text in the style of their logos—this will ensure that they stand out in nightclub lighting while complementing the central image rather than detracting from it.

To reinforce the event theme of C’thulhu (a fictional cosmic entity created by horror author H.P. Lovecraft), stylized ethereal tentacles were added crawling out from under a headstone. The tentacles provide a sense of horror and mystery, as well as conveniently creating the perfect frame with which to emphasize the main details of the event. The event name and date appear on the headstone, almost as though they were carved there.

Overall, the final design is a classy, stylish, elegant take on a subject matter (Halloween) that can often be clich© and cheesy.

ABOUT THE DESIGNER
Maria Stephens
www.tigerlillydesigns.co.uk

Originally from the beautiful valleys of South Wales, Maria Stephens has spent the last five years honing her expertise on the streets of London, working her way up through the ranks of design teams and enjoying both agency and client side projects. With a Masters Degree in Graphic Communication, Maria realized that she could have more fun and greater creative freedom working for herself and founded Tigerlilly Designs, a boutique design agency with big ambitions, in 2008.

Since its founding, Tigerlilly has worked with start-up entrepreneurs, blue-chip businesses, charities, and classy individuals on both sides of the pond. Recently, Tigerlilly nurtured a flourishing relationship with Razor Research, an award-winning research agency based in London. This partnership has led to work for well-known brands such as Green Giant, Betty Crocker, and H¤agen-Dazs.

Maria lives in Central London with her boyfriend and her basil plant named Fred.

APPLICATIONS USED: Adobe Photoshop CS4, Adobe Illustrator CS4, and Adobe InDesign CS4

After

DESIGNER: Kwasi Amankwah
www.kwasi.net

This project was very interesting to me because it covered a topic that I truly knew nothing about. Swing Goth was a whole new world, and before I started any designs I spent time learning about the culture. Once I had a good understanding of the scene, I started by coming up with an element to focus the piece around.
I created a drawing that depicted two people heading to the party. The illustration was a composite of all the characters I saw in my research—the female guest, for example, was an homage to one of the band members. The figures and the background were colored in Adobe Illustrator. The blue used was sampled from the original piece, and the line drawing of a graveyard silhouette added a texture to the background.

The toughest part about this project was incorporating all of the different band logos, with each of them using a different font. I decided that a dramatic angle would allow me to incorporate the logos as party information more cohesively. The logos and information were manipulated so that they appear to fit into the same 3D space as the illustration’s people. Changing logo one into a spatial element allows the different fonts to act as a unit while being so different from each other. I set the ampersand in Angelic War, which I thought looked like a nice blend between the fonts used in the Swing Goth logo and the Clockwork logo. For the rest of the copy, I used Helvetica Neue Bold, Light, and Light Italic. It’s a simple font, but with the complexity of all of the other fonts used I wanted to keep the other information as simple and clean as possible.

ABOUT THE DESIGNER
Kwasi Amankwah www.kwasi.net

Kwasi started as an illustrator and moved into graphic design after gaining a background in Adobe Photoshop. After getting his Bachelor’s Degree in Art History at the University of Illinois, he moved to Chicago to attend the Art Institute of Chicago. There he earned his BFA in graphic design, after which he attended the University of Illinois-Chicago for his MFA.

His diverse background and his love and interest in all different styles of art gives him a unique approach to his design projects. While he spends most of his time working on graphic design, he also draws, paints, and belongs to a screen print studio.

After school, Kwasi spent several years on an in-house graphic design team and teaching graphic design at a local college. Kwasi has now moved into the freelance world and started his own company, At Nine Design. Kwasi resides in Chicago with his wife and dog.

APPLICATIONS USED: Adobe Illustrator CS3 and Adobe InDesign CS3

After

DESIGNER: Matt Holley
www.mattholleydesign.com

Having no knowledge of Swing Goth, steampunk, or H.P. Lovecraft, I was jumping into a completely different world blindfolded. The name C’thulhu had little meaning to me until doing the research. This creature was created as a symbol of extreme horror and evil. While the “Ball of C’thulhu” bears the creature’s name, it’s an event filled with fun and fantasy.

Looking at the original poster, there are several elements that are distracting. There’s so much text and so many line breaks that it’s virtually impossible to notice the design. From the cartoon characters to the poorly beveled tentacles, this poster doesn’t reflect the vibrance and quality of this event.

Browns and greens gave me the fall feel I wanted, while allowing me to keep the poster bright, warm, and inviting. I drew my interpretation of C’thulhu as if he were going to a costume party (on paper, then redrawn in Adobe Illustrator). His plaid suit and paisley tie is what he grabbed from Goodwill the night before the ball. He’s positioned on the hardwood floor and is holding a mystical scepter as if he’s the dancing disco ball of the party.

The header text is Oliver’s Barney, which was the perfect thickness for me to apply the wood grain texture to. The leaves echo the warmth and fall feel of the wood. Reprise Stamp was used as the informational text because it’s eroded yet remains as legible as Helvetica. The header and footer text are both set in a triangular shape and give a nice sense of balance to the page. Logos were strategically placed so as not to take attention away from the overall design of the poster. I’ve always loved the look of screen-printed posters, and wanted to give this poster a similar vintage look and feel.

ABOUT THE DESIGNER
Matt Holley
www.mattholleydesign.com

Matt Holley is a passionate freelance designer out of Columbus, Ohio. With a broad range of experience ranging from corporate rebranding to creative marketing and interactive design, Matt brings a clean approach to design and focuses on getting rid of unnecessary clutter. Clean lines, balance, and symmetry are at the forefront of Matt’s design profile.

After graduating from Marshall University with a Bachelor of Fine Arts in Visual Design, Matt moved to Columbus to pursue his design career. While he enjoys corporate design, nonprofits have always had a soft spot in Matt’s heart, as his dad and brother are both ministers. He loves using his talents to glorify God and help local churches grow, and impact their neighborhoods. Matt also enjoys playing music and is part of the Jared Mahone band, a groove-driven soulful pop band in Columbus. He is recently engaged and looking forward to being married to his fianc©e, Krista.

APPLICATIONS USED: Adobe Illustrator CS3 and Adobe Photoshop CS3

The birth of Web standards
In the early days of the Internet (back in 1989), before there were things like search engines, e-commerce, blogs, and social networking, the World Wide Web was a bit of a free for all where each website followed the coding whims of the person who made it. For example, some HTML coders used all caps for their tags to help easily see the difference between tags and content, while other coders used “camelCase” for their tags, and still others used all lowercase letters. In addition, some websites were composed entirely of graphic images placed snugly inside cells of a table and others were made using a combination of graphics, text, and tables.

On one hand, this do-it-yourself coding environment allowed for unlimited freedom and creativity. On the other hand, having no rules to follow frequently resulted in an “anything goes” policy, which often made Internet users frustrated and confused about how they should navigate through a site to find the information they were looking for. To be fair, the Internet did start as more of an information sharing space rather than a place to sell and buy stuff, chat with friends, and express yourself. However, as more people and companies began using the Web to market and sell their products and services, and more kinds of devices (such as handhelds and screen readers for the visually impaired) were being used to access the Web, it became clear that certain coding rules and standards would need to be established to help control all the chaos.

So in 1994, that’s what Tim Berners-Lee did. Berners-Lee, if you didn’t know, is the University of Oxford-educated mastermind who created the Internet as a global information sharing initiative while working at CERN (the European Organization for Nuclear Research) in 1989. Over the next several years, his specs for HTTP, URIs (Uniform Resource Identifiers), and HTML were refined and improved upon as this new technology spread quickly around the world.

By the early ’90s, when many middle-class families owned at least one computer and many businesses had a Web presence, Berners-Lee founded the World Wide Web Consortium (W3C) as an international vendor-neutral group committed to creating Web standards that allowed for device-independent Web access. The W3C’s mission is “to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth of the Web.”

The World Wide Web Consortium
Since the W3C’s founding, more than 100 W3C recommendations for Web design and applications, architecture, Semantic Web, XML technology, Web services and browsers, and authoring tools have been published on the W3C website. There have also been standards proposed for accessibility, internationalization, mobile Web, developing economies, and eGovernment. In fact, in 2009 Berners-Lee launched a new organization called the World Wide Web Foundation to help support and coordinate further development of the Web to benefit humanity.

A few of the early, more monumental W3C Web standards included things such as making uniform HTML/XHTML coding rules, recommending the inclusion of a DOCTYPE in the head of the code, and the promotion of using cascading style sheets (CSS) to separate webpage form (presentation) from webpage content.

The W3C homepage

Here are some specific examples of each early Web standard:

• Uniform HTML and XHTML Coding: To improve the presentation of webpages on Internet-capable devices, standards to HTML and XHTML now follow stricter coding rules to improve the accessibility of pages across browsers (Internet Explorer [IE], Firefox, Opera, Safari, Chrome, etc.); operating systems (Mac, PC, Linux, Unix); and other devices (screen readers, handhelds, printers, etc.) that access the Internet.
• Use of DOCTYPEs: By adding a DOCTYPE tag at the top of the code of all HTML and XHTML pages, the browser can interpret a webpage as an application in the XML programming language and thereby present that data within the Internet-capable device as it was coded. This standard is especially important because XML lets programmers create their own proprietary markup languages through which additional information can be exchanged on the Web.
• Use of CSS: Separating content (HTML) from presentation (CSS) and user interaction (JavaScript, jQuery, PHP, and other programming languages) allows designers, coders, and programmers to simplify their code and consolidate their presentation markup in one place.

Other important standards focus on accessibility issues geared toward making all Web content accessible to the widest possible audience across the widest array of devices. According to the W3C, people with disabilities make up roughly 10% of the Internet’s population. Simple coding changes can often make the biggest impact, such as requiring image tags to include alternate text attributes, link tags to have descriptive title and target attributes, and form elements to use tab order and hot keys to assist with navigation through a site without a mouse or standard keyboard.

In addition to laying out Web standards, the W3C website is chock full of detailed information about HTML, DHTML, XHTML, XML, CSS, JavaScript, jQuery, Ajax, Ruby on the Rails, ARIA, and more. You’ll even find details on browser compatibility, document formats, Web graphic formats, and CSS, as well as more obscure documentation on developing technologies like HTML5 and CSS3 that have yet to be fully implemented across the Web. Definitely spend some time exploring this site. The more you understand about Web standards, the better you’ll be at designing and building standards-compliant websites.

Working with Web standards
Web standards have really helped make the job of building websites easier. This is especially true when you learn the right way to do things from the start. For example, when building webpages, it’s useful to follow a particular logical workflow. First, you get your content on the page and then you mark it up with proper semantic HTML (semantic means that you use the right tags to match the meaning of your content, e.g., “<h1> for Heading 1s”). After that, you add your CSS to style the content, and lastly, you add any JavaScript and other programming languages as needed to create page interactivity and present dynamic data.

One of the earliest and most important Web standards recommended by the W3C is the use of CSS instead of the heavy HTML formatting tags that designers, coders, and programmers used before. With the old method, formatting markup had to be wrapped around every block of text, every graphic, and each object or element displayed on the page. (Imagine managing a 30-page website and having to change all the fonts from Arial to Verdana!) Back then, it would have meant opening and editing every single page, line by line. By contrast, that same change today would only mean editing a few lines in your external CSS file.

Easily link your webpages to one or more external CSS files

With CSS, you can quickly create site-wide styles for the tags used to mark up your content, define custom styles to selectively style elements, and create styles that will automatically be applied to an element’s ID. Not only does CSS separate your presentation markup from your content, it also centralizes all the style information into one discrete location (an external CSS file that is linked in the “” to all the pages in your site) and drastically reduces the file size of your webpages, thereby making your pages load faster in a browser.

Thankfully, nearly all the popular browsers and Web editing software manufacturers are on board with Web standards, each working hard (and competitively) to help provide Web designers, coders, programmers, and Internet users with the best experience they can.

In fact, for several years now, the top HTML and WYSIWYG code editors—for example, Dreamweaver and ExpressionWeb—have supported Web standards by automatically writing standards-compliant code. What’s more, the newest and most popular browsers (with the exception of IE) now render properly coded webpages near identically.

Dreamweaver and ExpressionsWeb write standards-compliant code

Unfortunately, this does not mean that if you use a good HTML or WYSIWYG software program that you’ll be immune from coding errors. The sad truth is that you’ll still have to deal with things like display and compatibility problems with CSS and various scripts, IE-only features, and browser-specific coding issues. The good news is you’re not the only one out there doing it. In all likelihood, someone on the Internet has already figured out the solution to your very problem and is willing to share it. For CSS-related issues, check out the Adobe CSS Advisor (http://bit.ly/6MsXLN).

Adobe CSS Advisor provides solutions to common CSS and browser-compatibility issues

Besides presentation consistency and device independence, another really smart reason to build standards-compliant websites is better search engine optimization (SEO), which can both help improve search engine results page rankings and make the content within the site easier to find for Web visitors. Standards-compliant sites provide a more consistent experience to the widest audience of users across the widest variety of devices and platforms.

Web standards for Flash, HTML5, and CSS3
As cool and interactive as they can be, Flash movies are single objects that are embedded into a webpage, which means that none of the content contained within them can be bookmarked, selected, copied, or saved the way you can with content in a regular webpage. They also can’t contain any meta tag information like keywords or descriptions—which means that search engines can’t index any of the content to help visitors find that content.

As a workaround to building entire sites from Flash, some developers have begun shifting to including Flash modules inside of regular sites and using JavaScript, jQuery, and HTML5 to create page interactivity, both of which are easy enough to learn, standards-compliant, and search engine friendly. For an interesting read on Flash Web standards, visit www.webmonkey.com/2010/02/use_web_standards_with_flash.

HTML5—which is the new and smarter version of HTML—is now starting to be supported by the newest and most popular browsers. HTML5 introduces a bunch of new semantic elements like “