Print vs. web part 1: incredible ink

06 Nov 2011 by Espen
22 Comments

Ink is often used to make mirrored pictures of disappointed penguins.

To those of you who don’t know me – and, come to think of it, those of you who do – it might appear as if print design is my favourite subject to write on. Well, maybe you’re right. I am very fond of it. I still relate most of my work to print design and I hope I never unlearn all the kernels of design goodness I picked up in those early days.

Yet here I am, applying myself more than I ever have professionally, co-running a web agency and committing fully to the world of pixels and code. What gives? To straighten out my own thoughts, I’ve decided to weigh up the pros and the cons, spell it out and figure out what it is that makes my designer-sense tingle.

First up, print design. Or magazine design, or graphic design. Whatever you want to call it, I miss it – and these are my reasons why.

Fixed format – one output

Whether it’s a bog standard DL leaflet, a business card or a custom-size magazine, printed items have two things in common: the format is fixed, and any item in a print run is near-identical (if your printer’s any good, that is) to any other item from the same batch. A fixed format means I never have to worry about things like varying resolution, responsive elements or the fold (of course, the term “fold” does originate from newspaper design, but at least in print one knows exactly where it is!).

If I want to use a big background image, for example, I’ll know the exact final dimensions of that image, and I can let it bleed of any edge of the page without considering scrolling, stretching or javascript hacks. The image stays wherever I put it, regardless of who interacts with the design.

One output means, at least in theory, perfect delivery of my message. As long as my artwork is flawless and the printer knows what they’re doing, I can rest assured that every single recipient will receive the exact same experience. In other words, there is no friggin IE6 in the real world.

Typographical control and proper layout tools

Now let me be the first to say that online typography has come a long, long way and we’re in a better place now than we’ve ever been. Still, compared to typography-friendly tools like inDesign (or even Illustrator), working with type online is a massive headache. Even as we’re making huge progress and talented web designers create inspirational contributions every day, there are things that sorely need improving.

1. Kerning and letter-spacing
When setting type, letter-spacing invariably comes in handy to make content fit nicely, getting rid of widows and orphans (not so much an issue online), or perhaps to make the justified text less of an eyesore. Some typefaces require subtle changes to their letter-spacing to increase legibility (the headlines of this very blog are a case-in-point), and certain letter-pairs inevitably require kerning to sort out awkward spacing.

The key word here is subtle, and unfortunately the web doesn’t have it. Though the CSS letter-spacing property works to some degree on headers, intuitive and sophisticated adjustment remains the privilege of print designers.

2. Baseline
Baseline is an even bigger headache in web design than letter-spacing and kerning. In fact, I’l argue that there is no baseline on the web, because of the way vertical distribution of letters is calculated (by means of spacing both top and bottom of each letter). So in order to achieve anything resembling a baseline grid, I have to apply maths, meticulously tweaking every div to make sure it all adds up.

In print typography, on the other hand, the baseline rightly refers to the base of your letters (excluding the ones with curved bases or descenders), and the line-height is equal to the distance between each baseline. All I have to do is define my desired line-height and push that magic button that says “Align to baseline grid” and my type will automatically align, regardless of individual line-height parameters. It also means that if anything is purposefully off the baseline, whatever follows will still snap into place without disturbing the flow of the rest of the layout. Easy.

3. Background grids
I really miss grids in inDesign. Define the page size. Define the number of columns. Define the gutter width. That’s it. The grid is in place, invisibly enforcing unity to my design without interfering with my creativity. If I want an illustration to burst out of the grid or add vertical lines in the middle of the gutters, it’s no problem, because the grid sits in the background and only asserts itself when I want it to.

The grid should only be the underlying, perceived structure of the design, not the actual structure, like it is when using css.

Real deadlines

How many times have you worked frantically on on a website to get it finished on time, only to realise your client hasn’t got any content ready, or has a few more tweaks to make, or needs to run it by their brand guardians one more time, or  isn’t quite sure about that particular shade of orange that you’ve already changed about fifteen times? The project drags on, the launch date seems further and further away and you never get to send that final invoice you desperately need.

In the world of ink, there are real deadlines to worry about. Granted, real deadlines means added pressure all around, but crucially they push projects forward. If I don’t get your content by x, it means the design won’t be finished by y, which means the printers will push the whole thing back by three weeks because their schedule is already full for the rest of the month…

And once it’s printed, that’s it. No final-final-final amends, and no changing of minds. It’s done, and it will cost a lot of money to do it again, so let’s just all work together and make sure we get it right first time.

Final copy with physical limitations

Most web designers have found themselves in the situation where pages – even home pages – are being designed without content up front. In print, however, content is a natural part of the process, as final copy is a necessity in order to go to print, not just an afterthought that’s added post-launch.

It can be hard to get web clients and project managers on board with the idea that content informs design, and that it sometimes needs editing to suit the layout. Problem is, on the web any given layout is potentially infinitely scrollable, so it’s up to you to convey why a 5000 word essay isn’t suitable for the home page. I’m obviously exaggerating, but keeping control over content-gone-wild is easier in print, since the pages themselves are finite. You want more copy? Sorry, but there simply isn’t more space – it’s time to edit.

I love the smell of ink in the morning

If you made it through this rant, I’ll forgive you for thinking I’ve chosen the wrong medium to work with. Designing for print has, after all, some distinct advantages over web design. Whilst some of the technical kinks may get ironed out as the industry evolves, there will never be a substitute for the lovely smell of ink and paper, hot off the press.

But web isn’t all bad, of course. Stay tuned for part two of the epic battle between ink and pixels.

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin a great conversation with questions about chimneys.

Comments

Showing 22 Comments

Leave a comment
  1. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  2. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  3. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  4. Respect Thy Typography | DigitalMofo 15 Mar 2012 at 4:09 pm

    [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  5. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  6. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  7. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  8. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  9. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  10. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  11. Respect Thy Typography 28 Mar 2012 at 6:31 am

    [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  12. Kern » Respect Thy Typography 03 Apr 2012 at 9:59 pm

    [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies likeTypekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  13. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  14. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  15. Looking Back « Creativedesign 20 May 2012 at 4:48 pm

    [...] a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). But with such power comes great responsibility. And even though modern tools give us the [...]

  16. [...] hyphenate and manually add soft breaks to even it out. If you can’t do that (web has it’s limitations), just suck it up. The readability of your content is, after all, more important than forced [...]

  17. Respect Thy Typography | Layout to HTML 12 Jun 2012 at 12:46 pm

    [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  18. [...] hyphenate and manually add soft breaks to even it out. If you can’t do that (web has it’s limitations), just suck it up. The readability of your content is, after all, more important than forced [...]

  19. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  20. [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

  21. Type on the Web « maureenflanary 10 Sep 2012 at 6:25 pm

    [...] blog 8 Gram Gorilla has a great article defining the differences between print vs. web. It addresses fixed formatting, [...]

  22. Respect Thy Typography 03 Oct 2012 at 4:26 am

    [...] It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile). [...]

Leave a Reply