Almost every time I settle into an online article, I am reminded that the web was first born for physicists. Between every well-thought-out paragraph is found a fat wedge of nothing-at-all. Why? Well to indicate a new thought of course …with all the subtlety of a Large Hadron Collider. These spaces effectively chop the text into what I call “islands of thought” – disconnected paragraphs floating downstream, with only their left-right boundaries holding them together.

How I see line breaks, and now you will too.

However subconscious, these spaces cause a disruption in flow that is completely unnecessary. There is a better way.

The Frugal, Modest Indent

If you can find one, pick up a book and notice its paragraphs. More than likely, the first line of each is indented about 2–4 spaces. The very thorough Jon Tan has written a great article in which he details how this paragraph style evolved in printing. In it, Tan tells us that full line-breaks between paragraphs would require more paper, resulting in increased production costs. It was much more frugal to just use a slight indent. I would argue, though, that there are aesthetic justifications for the indent as well.

As Web Designers are now creating printed publications,
line breaks are coming with them.

A full break is a lot of space to give over to such a minor and repetitive indication. Indents, conversely, are subtle: an indent of 2-4 ems accomplishes the same goal as a full line break. Adjacent paragraphs are allowed share a border, flowing thoughts from one to the next. A full break should only be used when the flow is deliberately broken, either to move on to another thought within a section or just for emphasis.

For example.

When there is very little thematic flow from one paragraph to the next, though, line breaks may still be appropriate. Breaking news stories or brochure-ware pages with disparate copy are both perfect examples where full line breaks may make more sense, while indented paragraphs are most appropriate in long-form text. Basically: Design should be efficient, deliberate and communicative with every use of space.

Bring it all together

More eloquent men than I have fought this battle on the web. Joe Clark, in an article for A List Apart, perhaps says it best:

“Blank lines between paragraphs are a Microsoft Word artifact that are additionally widely used in onscreen text. In book typesetting, they’re a mistake…”

He also provides a very simple way to achieve indents with CSS:

We use p + p here because an indent should only be applied to a paragraph that follows another paragraph. A paragraph that follows a heading, image, or any other element should be visually different enough not to need an indent. Also, use your best judgement as to the amount of indent. I’ve found 2em will usually suffice.

At first, indents on the web tend to look a bit strange, given that they are so rarely seen. In order to retrain your eyes for the transition, feel free to use this (very rough) bookmarklet to reflow any text on any site:

→ Indent It!

Drag it into your bookmarks bar and click it when reading any article, but be warned:
You will never look at text the same way again.

Does the preceding paragraph mean anything to you? Of course not. Be honest: You’re a person who respects your time; you skipped to this paragraph, didn’t you? Or maybe you left, in which case why am I still talking to you? Either way, your impatience illustrates the inherent problem with using Lorem Ipsum: No one reads it.

History for a Dummy

The story of how Lorem Ipsum was derived is dusty, based on conjecture, and mostly unimportant to our point today. Go read it if you are interested, but come on back so we can give it a proper send off. More important to us – right now – is how Lorem Ipsum has historically been used.

At first, it was used to showcase type specimens, and the faux copy is perfectly suited for this purpose. Sometime in the 60s, though, the usage was expanded into what we see today: Designers tasked with a layout – pre-content – incant the ancient words of Cicero into their textboxes and forget about it. Lorem Ipsum is very helpful in this way: its nonsense discourages our natural inclination to read the content, allowing viewers to focus on spacial relationships in the layout, micro-relationships of the type, and aesthetics in general. Upturned thumbs are flashed; projects roll along.

Inherant Problems

There are plenty of process reasons for not using Lorem Ipsum. Most are highlighted well in “Stop using Lorem Ipsum!” by John McGarvey in .net magazine. An excerpt:

“Web designers are kidding themselves if they think they can do their best work without thinking about content from the start. It’s not so much that content is king, but more that content is web design. One won’t work without the other.”

Agreed. But there is a deeper issue: as Designers – especially on the web – we value function over form, and the function of text is to be read. Lorem Ipsum deliberately obstructs this function with gibberish, leaving the tenets of readability to be considered too late in the process (if at all). The result can be pretty, but difficult to decipher.

Cicero strikes again.

Content must be readable. Designers must make content readable. Therefore we need readable, accurate content from the start.

A Readable Alternative

So – obviously – what the Design community needs is another Lorem Ipsum Generator. I call it Tweeking (derived from the term “Greeking”, which is what former print Designers like me call Lorem Ipsum).

Tweeking does not spit out gibberish. Instead, it takes the very readable tweets of your favorite person, arranges it into a linear narrative (excluding RTs), and flows that narrative into paragraphs. Shazam! Readable content for your layout.

The resulting content consumable, but it also picks up the flavor of the tweeter. Designing a site for phycisists? Plug into @ProfBrianCox’s stream of conscience. Crafting a faith-based site? @CSLewisU should work nicely. And if you just don’t “G” an “F”, there is always @kanyewest. These feeds should be laden with the nomenclature and pacing typical of your site’s targeted audience, making this placeholder copy a more appropriate substitute.

But don’t let me hold you up with all these words. Go give it a try.

Caveat Emptor

Tweeking should be a desparate alternative for when you absolutely need to begin Design without real content. Without actual content, you are just creating a sky-pie Design, but at least with this tool you can fill it with something approaching reality. Whatever you do, treat your content with dignity. Never lose sight of the fact that your text must be read, no matter how fancy it is.

• A large number of sites rely on advertising for revenue.
• Web advertising is a whole other industry.
• Ad units are fixed, standardised sizes.
• They are commissioned, sold and created on the basis of their size and position on the page.
• Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions).

If you haven’t already, you really should just go ahead and read Mark’s post, then come on back. We’re going to try to clear this little hurdle right here and now. (Others added some great thoughts, too, including Trent Walton and Andy Clarke.)

A Solution

The current mental model is, as Mark defines: template > slot > ad, with a template here being a page layout, a slot being an allocated place and size for an ad, and the ad of course being the message to be served to a slot. This does not need to break in a responsive environment. We just need to add one more layer to the front:

range > template > slot > ad

A range would be a grouping of templates by a spectrum of resolution widths. This gives us more templates, more slots, and most importantly: more opportunities for revenue. It is important here to not think of a responsive layout as a series of fixed widths, but as a series of ranges of widths. (Alex Morris explains this in more detail here.)

An a example of range breakdowns. Full Size

You can now group your current templates (for most systems) in to a 1024+ range. 768–1023 becomes another set of templates targeted at tablets in portrait, then 480–767 for smartphones in lanscape, and Up to 479 should cover mobiles in portrait. Of course, each site could – probably should – define their own ranges as they like. Then just serve the right ads to the right slots in the templates at the right resolutions.

There is no need to sell the idea of actual fluid ads, or ad placements that adjust for fluid layouts. Just sell more slots on your responsive site.

Why Will This Work…

For ad agencies?

I worked for a couple of years in an ad agency. It was only in their complete neglect of all that is new that I found a niche embracing the web. Agencies – specifically the ad-buying departments – are usually slouching behemoths in the way of tech understanding and/or progress, so mapping a new technique to their current understanding already gives us a huge boost in momentum. (Selling the web design community on responsive layouts is a big enough task; I cannot imagine how many brilliant books it would take from Ethan Marcotte for us to convince marketers to embrace fluidity for their precious creative spots.)

For sites with ad space?

Think of the hero that gets to strut in to the ad-selling office and announce that the available slots have now quadrupled; golden sunlight beaming down through windows shaped like banners and skyscrapers. You could be that person! As we know, current ad space on desktop layouts suffer from a severe amount of user blindness, and when these layouts hit a mobile device, entire ads get cut off. By crafting ad space for these ranges, actual ad effectiveness would be improved. Twice a hero!

In desktop layouts on a mobile, most ads get completely cut off when zoomed in for reading.

Mark also brought up a good point about how responsive ads could hinder sales people: any time spent explaining how they work moves them further from the sale. With a ranged approach, they only need to explain where the ad will show, and how much it will cost to make it show up on other resolutions.

For the web ad industry?

This approach would still comply with the IAB’s efforts, and it could also nicely adapt to services such as Google’s AdWords. There are already sizes out there that would fit nicely on any device or resolution. All that is needed for the web ad industry to embrace responsive solutions is an evolution that is both simple and profitable, which is exactly how Responsive Web Design is currently working its way through the web design industry.

The Missing Piece

Of Mark‘s issues outlined at the top, a ranged approach solves all but the last. Full takeover ads, though, will likely evolve on their own (as they mostly do now). Ad creators will continue to want to push the boundaries, and site owners will continue to decide how far they are willing to go (and for how much cash). This is probably best left unsolved for now.

What this means for designers.

We need a solution to responsive advertising, or else most of our efforts to promote adaptive layouts to large-scale websites will be squashed by cold, hard business reality. There will likely need to be new tools built, old ones adapted, and thousands to convince. But, by defining how we – the web design community that will have to work with these requirements – think this would best be solved, and getting our ideas in early, we can be influential in bringing about a solution that solves everyone’s needs. Afterall, that’s what we do every day, right?

I would love to hear what you think.

I know that “Mobile First” is merely a guide to help us think small and light, but I wasn’t aware that this had ever changed for us web designers. We should always be looking to pare things down to the essentials. Minimalism, though, is not our sole purpose in design. As Charles Eames once said:

“Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.”

In Development, a Caveat

For front-end development, I whole heartedly agree with the “320 and Up” philosophy of building and loading page assets up from the smallest screen experience. I have tried this in building a few responsive designs and it really feels like the best way to build bandwidth-responsible CSS. Development ideology, however, should inform – not dictate – design process.

In responsive web development, though, we do find a precedent for a “Target First” method. Ethan Marcotte, in Responsive Web Design, uses target widths to anchor his percentage calculations for responsive measurements. In a similar way, a “Target First” design approach sets a target experience to anchor our decisions of what should be added or subtracted, diminished or emphasized in each screen context.

Finding Your Target

There are goals for sites that reach beyond simple readability, where a lack of features can actually diminish the experience. I am working on such a project now. Our approach has been to peruse the research and tailor an optimal experience for the most likely user scenarios. Working out from there, we judicially edit and hone for each media query.

If you’ve done the proper research up front, you should be able to define a target experience. Here are some example scenarios:

• A media rich site, where showing various types supporting content is integral, might be best designed for wider screens first.
• An article-centric site that gets most of its traffic by deep links might be best designed mobile up.
• An application that is data driven, showing multiple formats of analysis and their relationships (think of a Bloomberg screen).

Every Screen, All the Time?

We should, really, think of every experience at every part of the project. Right now, tools are just beginning to roll out to help us think across devices and screen sizes, at least at the front-end development level. But even with such tools, there will always be a need to choose a place to start.

By beginning your design focused on a target experience, your first steps will be anchored to where you have the most research, most users, and most needs.

In the footer of this site, those viewing this on screens wider than 800px should notice the words “Look Up for Inspiration”. This is a mantra. You see, I am trying to be the best designer on the planet. I don’t expect I’ll reach that goal any time soon, and it may take more time than I have, but arriving is not really the point.

Everyone should aim highest. Set the controls for the heart of the sun and enjoy the ride.

@UnitInteractive: My First Taste

One random day as an Art Director at a nation-wide ad agency, I woke up from my work-a-day fog unsettled. I had just digested Andy Rutledge’s On Creativity, a great article on how to approach – you guessed it – creative work. His words shined a beacon lighting the way to the kind of work and people I wanted to be around. I started at Unit Interactive a little over a month later, working for Mr. Rutledge and Angela Conlon.

Unit is much more than a web-design shop: it’s a University. In my time here, I have learned a tremendous amount. Being given carte blanche to invent, launch, and run Unify; working with terrifically smart clients; spending each working day with a team that I consider to be one of the very best: these experiences are invaluable to me.

This all built up a debt, though, that I feel can only be repaid by not bowing to comfort. Again, I have felt unsettled, but this time in a positive way. After three years at Unit, I have worked hard to become intrinsic, but also found myself wrapped up in cozy, familiar challenges. If I truly want to be the best, I need to again surround myself with fresh problems.

@MarkBoultonDesign: A Whole New Pie

Mark Boulton Design has long been on my short list of shops I truly admire in the web-design industry. Mark’s focus on design fundamentals as they apply to the web has been foundational for me. The opportunity to work with such a top-notch team in beautiful Wales cannot be passed up, but more important for me: it provides the perfect chance to shake me out of any comfortable places, quite literally.

This last month has tasked my wife (Rhonda) and I with planning a move across the Atlantic. Thankfully, I think Rhonda – a European Historian – may be even more excited than me about this endeavor, and it is our combined enthusiasm that is powering us through the transition. It doesn’t hurt that we spent our honeymoon in the UK, and have been tenderly nursing a dream of living under those very uniquely blue skies ever since. We are truly blessed, and are looking forward to an exciting adventure ahead.

The Sky Pie, and Its Ramifications

I have learned this very important lesson in my life: Dreams are tangible stuffs. This knowledge comes with a burden, though. It begs for action, otherwise it is useless. Sky Pies don’t float by every day, so commit yourself to leap from your cozy little nest and wrangle that tasty bastard to the ground if you ever see one. I can tell you from experience, each one will fill you mightily.

In a small shops – or in lean times like we’re currently experiencing in the U.S. – specialization is not practical. More desirable are the T-shapes: people with deep skills in one area topped by a wide breadth of cursory knowledge in other fields. Generalists such as these are more pliant and ready to bend with any new shift in their employer’s needs.

After working at a five person (at most) shop for three years, I have seen how T-Shapes work well, but I know we generalists can push our skill sets further. Ts leave a lot to be desired; there is a lot of missing knowledge and experience on the sides. A generalist can and should be more rounded. To put a metaphor on it: I strive to be Mega Man. For those of you that didn’t misspend your youth on video games, let me explain…

Standard Geekery

Mega Man (or Rock Man in Japan) is a good robot that fights bad robots, and after defeating them he gains their special powers. Certain powers work best against other bad robots, allowing you to take them down quicker. It was a simple, tight concept that blew my 10-year-old mind: Work work work work work -> gain a power. Repeat.

The mechanics had a snowball effect, and by the end of the game your little guy was unstoppable. If anything got in your way, you just pulled up the right power + bad-ass outfit and blasted away.

Be Mega-Shaped

“A visual designer approaches UX design from one point of view, the interaction designer from another, and the programmer from yet another. It can be helpful to understand and even experience the part of the [the project] that others are experiencing.”
— Susan Weinschenk, The Psychologist’s View of UX Design

Being a great generalist is not really about being Mega – or any other superlatives – but just being changeable and comprehensive. Designers in a small shop succeed through constant learning and adaptation. Our modern connected lives let our brains download a wealth of knowledge at light-speed, or at least lead us to the right resources.

Timelines and scheduling play an imperative role. You don’t have to be ready for attack on all fronts at all times. Plan your projects so that you will have time for research and sync your skill enhancements with the needs of each phase of the project. Feeling light in a particular area? With a few weeks of focus, you can be just shy of an expert. Or, you can let some skills lag while you strengthen others that are more crucial for a particular leg of a project. Attack the current problem until it’s left smoldering, pack up your new skills, and move on.

This is the pattern for being a great generalist: solve every problem with extensive research, maintain the highest, objective standards, and don’t be bound by your current skill set. Critical thinking will be your guide. When a solution is good, you will know it, and trust your knowledge when experience is lacking.

Also, remember that we humans do not keep all our knowledge in our heads. Good information organization will allow you to access other’s expertise when you need it. Bookmark, save, and curate. You’ll only need to recall where to find your resources.

Generalissimo

“No one came shooting out of their mother’s womb with a paint brush or a Bunsen burner or a calculator in their hand. You didn’t come equipped with a Terms of Service agreement or an Operator’s Manual that spelled out exactly what you would and would not be capable of as an adult. You, your skills, your intelligences, are malleable. Changeable.”
— Sean Michael Robinson, Mr. Square and the Curse of Talent

When changing powers, Mega Man is always Mega Man; only the neat costumes and payload change. As a web designer, there are growing opportunities for which you can apply your skills beyond the web: desktop & mobile apps, eReaders, etc. Each one of these has their own unique challenges and triumphs, but all need solutions for what web-pros intrinsically know: great, satisfying experiences supported by future-proof code. Just make sure to never venture too far from what you know well.

In any shop, generalists are forged by need, and some adapt better to this than others. If you find yourself wearing many hats, embrace it! Too often in our education we are taught to specialize, but this assumes that we are a workforce wholly beholden to large organizations with deep pockets. Small business accounts for 80% of the employment in America alone! And the exodus of creative talent from big agencies to smaller shops continues in earnest.

Perhaps it’s best not to think of this process as building any general knowledge at all, but rapidly branching and strengthening specialties as needs dictate. From this perspective, generalization is just residual. Stick to your core disciplines and bring critical thinking to every problem. When you do, you will crush whatever comes your way. Color-coordinated robot outfits are optional.

Go forth and BE MEGA.

Act without doing;
work without effort.
Think of the small as large
and the few as many.
Confront the difficult
while it is still easy;
accomplish the great task
by a series of small acts.

The Master never reaches for the great;
thus she achieves greatness.
When she runs into a difficulty,
she stops and gives herself to it.
She doesn’t cling to her own comfort;
thus problems are no problem for her.

— Lao-tzu
      Tao Te Ching, ch. 63
      circa 6th Century, B.C.E.

Nothing about online interactions are virtual. We have confused speed and ease of use for innocuousness, but the same offenses apply as in the tangible world. We must concede that online interactions of all sort – blog comments, gaming chatter, tweets – count as real social interactions.

Think of your last family gathering [or un-repress it, if you must]. Would it be rude if you invited a stranger over and slunk with them in the corner playing Scrabble for hours? Or consider the last time you were at a coffee shop with a friend. Would drifting into conversations with the table behind you at random intervals show any respect to the person with which you are sitting?

The illusion that online anonymity is a new frontier of antisocial behavior ignores that we’re all strangers until we introduce ourselves. What keeps us, then, from constant adolescent behavior in public? Dignity: it exists on the Internet, too, and it is just as easy to recognize those who are not burdened by it.

Accepting that there is no distinction between meatspace and cyberspace – beyond a whirling slush of molecules – untangles a whole bunch of strange and useless abstractions of what the Internet is: a tool for people to communicate. Acknowledging that online interactions are real and meaningful might just inject some couth back into our lives, so I will wade further into the obvious to say this as definitively as I can:

The Internet is real life. Act accordingly.

I have been aspiring to be an expert for just under 30 years now, creeping ever forward with each bit of knowledge and experience. “Experts” are people with efficient answers and deep explanations. Malcolm Gladwell calls them “mavens” in the The Tipping Point, and correctly observes that one cannot just amass an expertise – a maven must compulsively share.

The following are my three rules on how to become an expert at anything. They have been culled from years of reading and working with experts in various fields (a perk of being a designer), and so far they’ve kept me on course.

Rule #1: Read Your Hero’s Heroes

The first word here is key: Read. Reading is the most crucial tool of any expert. Make time for it every day.

To start, read what interests you in your new field and pay attention to the authors. Find the ones you truly learn from, then track down their sources and read those. Continue this process and you will steadily move closer to the irrefutable truths of whatever it is you want to master.

Be ruthless about your time, though. If you aren’t learning, put the book down / close the tab / move on. You’ll look around eventually and see that your peers are thinning out as you move to the front. Experts should be comfortable in sparse company.

Rule #2: Don’t Just Explore, Conquistador

As you read, put your knowledge to the test and never be content with merely keeping up. Don’t just learn new things, conquer them. Do not move on until this new knowledge feels old hat, and do not put any impetus on this time to produce anything. Practice is another essential tool of expertise.

According to K. Anders Ericsson – the world’s foremost expert on experts – it takes 10,000 hours or 10 years of experience to become an expert at anything. I am not so sure that the task must be so daunting, but Ericsson does have 918 pages published by Cambridge University to back it up. Either way, the time needed for mastery may feel like a lapse in progress, but don’t skip ahead. You’re pushing your knowledge out and building a broader foundation on which to continue stacking more knowledge. You are gaining experience, and it will buttress your newly acquired expertise allowing for solid retention and confident recollection.

Rule #3: Share

Analyzing and reiterating what you have learned also aids retention and will further push you out in front of your contemporaries. You’re not considered an expert if no one is listening to you. By sharing your insights, you will be tested, refuted and ultimately strengthened.

We live in an age of expansive information where anyone can pull up an impressive set of resources while waiting for a train. Experts are our shepherds, and it has never been easier to develop an expertise. Pursue this title and you will soon find yourself the focal point of a room full of expectant minds, ready for you to lead them to the next imperative pasture.

Yes, Even You Can Do It

Quoting Mr. Ericsson:

“The traditional assumption is that people come into a professional domain, have similar experiences, and the only thing that's different is their innate abilities. There's little evidence to support this. With the exception of some sports, no characteristic of the brain or body constrains an individual from reaching an expert level.” – Full Article

So there go your excuses; its only a matter of motivation now.

The English edition was expertly translated by the author of my second favorite book on typography, Robert Bringhurst, but is sadly out of print as of this writing. A decent copy will run you $80 – 150 on Amazon. Please stay tuned to the end of this post to see how we can change that.

In this digest, I have taken the time to excerpt the most enlightening bits. I chose these passages because they struck me with some new insight or solidified some already known rule with sound reasoning.

About the Author

The sub-title, “Essays on the Morality of Good Design”, gives you a good understanding of just how serious Mr. Tschichold takes these matters. Highly influenced by the Bauhaus of the Weimar Republic, Tschichold made his first bold statement with Die Neue Typography in 1921, decrying the staid, serifed, uninteresting layouts of symmetry and building a framework for balanced yet asymmetrical typographical compositions.

Later in life, he dismissed Die Neue Typography as too extreme and fell in love with classic, rational symmetry in design. He went so far as to call Modernism “inherently fascistic.” Tschichold is perhaps most famous for his redesign of Penguin books from 1947 – 1949. The guidelines he created form the basis of most books designed today. He taught many places, but was always a student. To quote Bringhurst from the introduction, “Like every conscious artist, he looked intently and analytically at whatever he admired. He measured early books and manuscripts, recorded dimensions, sketched page shapes and letterforms.”

The Book Itself

The Form of the Book is actually a collection of essays written from 1949 through 1974 by Jan Tschichold and was originally compiled in 1975. Robert Bringhurst translated it to English from the German text in 1991, and he also wrote an enlightening introduction for that edition. Not everything in the book (or these excerpts) is immediately relevant, but the basic principles can still be applied. I have made sure to leave in some artifacts so you can get a feeling for the text, warts and all.

In case you were confused: I’m not a lawyer, so this may be completely illegal. Nevertheless, I plan on keeping these morsels of knowledge up for as long as I can. I figure that as long as the book is out of print, it’s fair game. So now let me get out of the way; I give you The Form of the Book, digested:

“Introduction” — Robert Bringhurst 1991

“Harmonie and Takt are words that appear repeatedly in some of these essays. The latter is often translated, correctly, as tact. But the German word has musical connotations which its English cognate lacks. Takt means measure, rhythm, time in the musical sense.”
p. xi

“Clay in a Potter’s Hand” — Jan Tschichold 1949

“What some may praise as personal styles are in reality small and empty peculiarities, frequently damaging, that masquerade as innovations. … Personal typography is defective typography. Only beginners and fools will insist on using it.”
p. 4

“We cannot alter the essential shape of a single letter without at the same time destroying the familiar printed face of our language, and thereby rendering it useless.”
pp. 4 – 5

“For perfect typography, an exhaustive knowledge of the historical development of the letters used in printing books is absolutely necessary. More valuable yet is a working knowledge of calligraphy.”
p. 5

“Graphic Arts and Book Design” — Jan Tschichold 1958

“In the strict meaning of the word there cannot be anything ‘new’ in the typography of books. Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied.”
p. 8

“Selecting a font absolutely in tune with the text; designing a consummate page with harmonically perfect margins, ideally legible, with immaculate word and letterspacing; choosing rhythmically correct type sizes for titles and headings; and composing genuinely beautiful and graceful part-title pages in the same key as the text page – by these means, a book designer can contribute much the enjoyment of a valuable work of literature.”
p. 9

“The book designer strives for perfection; yet every perfect thing lives somewhere in the neighborhood of dullness and is frequently mistaken for it by the insensitive.”
p. 10

“On Typography” — Jan Tschichold 1952

“Every type shop should have available at least one representative of old-style roman, complete with italics, in all sizes from 6-point upwards, including 9-point and 14-point, and up to 72-point. In addition, there should be a good Fraktur, also in all sizes, at the very least up to 36-pint. It seems to me that a new-style Roman (Bodoni for example) is a less urgent requirement than one of the styles developed during the transitional period (Baskerville for instance) – but there is no argument against Walbaum roman, which I consider superior to Bodoni, since more restrained. A good slab-serif, as well as a good sanserif, is probably necessary. Yet when a selection is made, one has to keep in mind the fonts already available in order to avoid inherently disharmonious mixtures.”
pp. 16 – 17

“A precondition for satisfactory finished work and for pleasant readability is the correct typesetting of each single line. Most typesetting in most countries is too loose. This defect is inherited from the nineteenth century, whose light, thin and pointed scripts almost demanded word spacing with en quads. Our own somewhat bolder scripts lose their line bond if this wide spacing is adopted. Three-to-em or even more compressed word spacing should be made the rule, unconditionally, and not in books alone. Unless the work consists of unusually long sentences, it is also unnecessary to increase the space after a period.

The beginnings of paragraphs must be indented. Paragraphs without indent (unfortunately the rule in Germany, and only there) are a bad habit and should be eliminated. The indention – usually one em – is the only sure way to indicate a paragraph. The eye, on reaching the end of a line, is too inert to recognize a tight exit – and in works without indents, even that frequently has to be produced as an afterthought from a flush ‘last’ line. In order of importance, legibility and clarity have to come first; a smooth contour of the typeset page is of lesser importance. Therefore, typesetting without indentions is to be dismissed as an error.”
p. 17

“On the other hand, roman capital letters must always and under all circumstances be letterspaced, using a minimum of one-sixth their body size. This number, however, is no more than a general guide, since the spaces between capitals have to be balanced against each other according to their optical values.”
p. 18

“Today more than ever before, simplicity is the mark of nobility in any piece of masterful work. If you have ever had a chance to observe a real master at work, you may have marvelled at how quick and easy everything looked. He seemed to ‘shake it out of his sleeve’. Laboriously trying first this, then that, is the way of a novice.”
p. 19

“It is doubtful that a graphic artist who cannot also set type can come up with a good and useful typographic design. Planning and execution must go hand in hand.”
p. 19

“Consistent Correlation Between The Book Page & Type Area”
— Jan Tschichold 1962

“Harmony between page size and the type area is achieved when both have the same proportions. If efforts are successful to combine page format and type area into an indissoluble unit, then the margin proportions become functions of page format and overall construction and thus are inseparable from either.”
p. 42

Ideal margin proportions 2 : 3 : 4 : 6. p. 44

”… the height of the type area equals the width of the page: using a proportion of 2 : 3, a condition for this canon, we get one-ninth of the paper width for the inner margin, two-ninths for the outer or fore-edge margin, one-ninth of the paper height for the top, and two-ninths for the bottom margin. … The key to this positioning of the type area is the division into nine parts of both width and the height of the page.”
p. 45

“Only much later, during the Renaissance, books were produced that were delicate as well as lightweight and handy. Little by little books appeared in smaller formats and proportions which are still conventional today: 5 : 8, 21 : 24 [Golden Section], 1 : √3, and the quarto format, 3 : 4. As beautiful as the ratio of 2 : 3 may be, it cannot serve for any and all books.”
pp. 46 – 47

“Even the division into ninths, while no doubt the most beautiful, is not the only correct one. Dividing in to tweflths we get … a larger type area when compared with figure 5. p. 51

“The lines should contain from eight to twelve words; more is a nuisance. The broader margins resulting from division by nine permit a slightly larger type size than does the division by twelve. Lines with more than twelve words require more leading. Typesetting without leading is a torture for the reader.”
p. 57

On Your Marks

There is plenty more knowledge in the book, but I have neither the time nor permission to post it all here. Instead, I ask that if you care about typography, or you recognize the growing need to for this kind of knowledge in the ranks of digital publishers, please do as I have done and contact the good people of Hartley & Marks to let them know that this book needs to be put back in to print. It is ever relevant and necessary, and there is a growing market. This is the best contact info I have for them (from their site), and I will post others means if I get them. Thanks!

Hartley & Marks Publishers Inc.
1008 Western Ave. Ste. 301
Seattle, Washington
USA 98104
tel 1.800.277.5887
pbdesk[at]hartleyandmarks[dot]com

Contact info for Canadian, European, and Asian offices available on their site.

If you care about the well-being of those around you, or if you just don’t want to have to share your zombie shelter, please feel free to use this signage appropriately: Download the PDF [352kb]. It is 8.5" x 11" and ready for print on any run-of-the-mill printer.

Be safe. Be prepared.

At even the most reputable agencies churn seems inevitable. Just under three years ago I found myself staring at the abyss of unemployment, but through determined effort and whole lot of blessings I was able to jump to a much more ship-shape employer a mere month after my last agency began it’s descent. Avast! Start building your life raft now! My vessel consisted of just a few simple parts:

• First, I built a buoyant foundation of experience. I identified the most relevant, interesting aspects of my discipline and dove into them with gusto. In my case, this meant specializing in web design (which led to application design as well).
• Next, I fashioned a rudder of books and online resources. My anxious energies were plenty to convert any idle hours into deep studies of craft and perfection (or pursuit thereof), led by many new-found heroes of web-design. These salty resources helped me find my sea-legs:
  • A List Apart
  • Design View
  • Signal vs. Noise (by 37signals)
• Finally, I weaved a sail of the best, most recent work I had - no student work, and nothing over a year old (I have heard that 6 months should be the furthest back, but this really depends on the nature of the work you do). Where I felt I was lacking, I worked with some fellow castaways to invent exciting work to help us all strengthen our rigs.

Your life raft should be built and maintained in prosperity in case of emergency. Art=Work, for example, is a large part of my raft, keeping me motivated to grow, learn, and showcase my progress. I also work to build my Twitter profile and make friends – not contacts – among my peers.

Do not wait until your skies darken to start building. A life raft is in no way disloyal to your current employer, nor is it a sign you are looking to jump ship. A life raft should be a measure of your current career health, mixed with only a bit of insurance.

Brighter Times

By specializing and following my passions in the spare time that inevitably crept in during the lean times, new routes became obvious to me. In fact, while digging in to a brilliant little article, I found a little shop that has been nice enough to employ me ever since.

Since those fateful days, all my co-workers who fell to the sea found sunnier beaches. I kept in touch with as many as I could, and we all helped each other in those treacherous waters. In our conversations, I heard their uncertainty but was heartened by their positivity and confidence.

If you are out there in rough waters know that you can work your way through this. Steel your efforts and use any free time to build your life raft into a bonfide battleship. You may just discover your own paradise.

So, I am rededicating this site with a new design and a new purpose. We will still talk about design, development, and the like… but I am warning you: it may get weird.

Sincerely, Nathan Ford

My Dad has a contracting business, and he asked if I could help him out with a quick web presence. Usually, I am wary of such favors (surely, most designers can relate), but I thought it could be fun to bring a strong industrial influence to a clean, info-driven design. I am quite happy with the results.