Frilly Lizards’ Thoughts

Icon

Inspiration & Feedback on Art & Design. Please participate, share your views on any works of art or design; the artists and designers work you admire that give you inspiration in which ever form or discipline. Thanks you for taking time to read this. I’m interested to hear everyone’s opinion please share yours.

Typography

Typograghy is an area that when embarking on the course I thought I would grow bored of quite quickly, but this is very much the opposite of reality, I’ve really enjoyed this aspect. I love the play on words aspect, and the emotion you can create.

I’ll attempt to post some material I’ve located during my travels but to give you some background on typeface classification I read an intresting article in ‘Dynamic Graphics + Create’ magazine:

Uncommon knowledge: 007

I haven’t done one of these for ages (perhaps for good reason) but then this one just popped into my head so I thought I’d share it. I’ve been thinking about universal rules and how certain principles can work for all sorts of graphic design stuff and I think this is one of them.

(Yes, there’s probably exceptions, but then there usually are with rules.)

Uncommonknowledge07

I’ve heard and read this expressly applied to advertising but I think it can work for almost anything, like the student magazine I’m working on (hence simple headline with photo of hamster). It’s a basic principle, at times ignored: creative heading with creative image – idea overload; “straight” heading with “straight” image – idea underload*.

So: Really interesting image goes with simple words; Oh so clever copy line with straight forward picture; Si Scott typography over…er…nothing probably; that kind of thing. But you probably knew all that.

* Not sure if that’s a word.

Most of what I know about what I do has come from books I’ve read, as opposed to being taught formally. Over the years I’ve noticed that the things that I’ve learned fall into one of two categories: The first being stuff that I didn’t know and was subsequently able to apply in some practical way; the second being confirmation that at least some of the techniques that I’ve managed to work out for myself or with colleagues were actually correct and worthwhile.

This “Rule” falls very much into the latter category; the reassurance coming straight out of the Paul Arden book that my brother-in-law bought me one christmas. Now I’m not saying this approach is always appropriate but, as I’ll try to explain, sometimes it’s just right.

Uncommonknowledge006

Like many of our contemporaries, we kind of fell in love with the Mac when it first appeared in the studio all those years ago. It allowed us to realise our ideas so quickly and output highly finished visuals. Our clients, in turn, loved our visuals, we’d taken all the guess work away. No more marker visuals, no more ambiguity; what we showed them was what they were going to get.

But as time went by the nature of our work shifted from pure design/style-lead to marketing-focused/ideas-lead design and we started to realise that we were having to labour for hours, sometimes days, to get our ideas to look just right on the Mac. On top of the problem of the sheer man-hours involved, our new clients could and often would reject concepts in seconds; the effort:results ratio was way out of kilter.

So we literally went back to the drawing board, employing some brilliant “old school” visualisers to hand render, often intentionally roughly, our concepts. And a few great things happened: the visuals took a fraction of the time to render; we were able to explore more creative routes (meaning “more” as in a greater variety and “more creative” as in more adventurous); and our clients focused solely on our ideas, didn’t get hung up on details and almost invariably approved a concept.

A very small one to start the week and it’s only good for some people:

I’d been working for years, really years, before this occured to me. I don’t know anyone else who does it but on a purely practical, everyday level, it’s dead useful. It’s also so bleedin’ obvious…

Uncommonknowledge005_2

Incidentally, I’ve tried something with this entry. Someone told me to include a microscopic bit of code along with the text from the card so you get that if you don’t want/can’t get the image. Don’t know if I’ve done it right though so if anyone can tell, please let me know.

P.S. Thanks to Alistair for proof reading this entry.

This is a small one but I was reminded of it today when a friend asked me to cast my eyes over some ad layouts he was working on.

Uncommonknowledge004

Unless you’re doing it for a specific effect or are referencing an historic style like these:

Greatideas1 Greatideas2 Greatideas3

it has a tendency to look just plain boring. These, of course, look stunning.

This one should be common knowledge and in a way I feel like I’m stating the obvious. But then I’m also aware that many designers still don’t do this, so for what it’s worth, here goes…

You see, whether we like it or not, most designers are accidental typesetters. Few of us ever set out to be typesetters, but we find ourselves in a time when as part of our daily work we’re knocking out text on our Macs. It can be a big part of our day.

Problem is, lots of us are still doing just that, knocking it out. What do we know about the details of good typography/typesetting? In the old days (ah, the old days…cow gum for goal posts…) we had typesetters to take care of the details for us, details like this:

Uncommonknowledge003_2

Of course, if you’re from the US you might have a liking for the em-rule, but that’s another story.

If you want to find out more about doing it the right way, buy a copy of Hart’s Rules or Copy-editing, or both!

This kind of stuff reminds me of the Fletcher quote, “You can only muck about with language if you know what you’re doing. Otherwise you’re just being sloppy”. I think the same goes for typography.

Now I don’t know if anyone reading this is familiar with James Webb-Young’s little book, perhaps lots of you know it. For that matter I don’t know whether the technique he describes is taught in college. I didn’t discover the book until I’d been working for years, which is a shame because it’s ace. And here’s the fundamental principle around which he presents his technique:

Uncommonknowledge002

JWY goes on to suggest a system for collecting and ordering the stuff you collect. I found adopting it, a) encouraged a more systematic and varied collection, and b) keeps it all together so it’s easier to find later. His Technique for Producing Ideas goes further and has proved invaluable.

The combinations thing goes for everything we do: On one level we combine colours with shapes and typefaces and words, and end up with logos. On another level we take an airmail letter and the idea of love songs and think about love letters, and end up with things like this, despite who the client is.

Uncommonknowledge001

Update: Looking back at this I’ve made it sound like a cure-all, which it isn’t – perhaps I’ve been a tad flippant. But hey, the beauty of the blog is that I can pop back in and fiddle about a bit more, so here goes:

This has worked for me many times, when I’m working on a simple, usually asymmetric* layout. Bold text, simple graphics. Very much in the Constructivist or Swiss styles, or epitomised by the likes of Matter, Zwart, Muller-Brockman. The angle has a tendency to suggest movement, upward in this case, while the horizontal can feel too stable when drama/dynamism is required. Think Suprematist paintings like this more specifically stuff like this or this. Or this.

Is that any better?

* Actually, I really only ever do asymmetric, but that’s another story.

Uncommonknowledge000

I’ve had an idea for something new. I’ve mulled it over, bounced it off a colleague or two and I think it might, just might, be a goer.

You see, every know and then I get the urge to impart knowledge that I’ve accumulated on others, usually younger designers. OK, sometimes it’s reminisciences about PMT cameras and Rotring pens, but sometimes, very occasionally, it’s something that might actually prove useful. Usually, it’s stuff that I wish I’d known when I was at their stage of life/career.

It might be something very small, like The En-rule Rule, or it might be something big, like The Dead Designer Rule. Whatever it is, I give it in good faith and in the geniune hope that it proves useful.

So here we are then: introducing a new Ace Jet series: Uncommon Knowledge, a bit snappier than my original title (but which might serve as a suitable sub-heading), Stuff I wish I’d known much, much earlier in my career.

Perhaps it’ll prove to be a very short series or perhaps I’ll just be telling you things you already know but I’m going to give it a whirl and see how it goes. Let me know what you think.

And I’m going to use John Blyberg‘s brilliant Card Generator to present the ideas. That way, they’ll at least look nice.

I found this interesting article “8 Simple Ways to Improve Typography In Your Designs”, an entry on AisleOne by: Antonio Carusone

8 Simple Ways to Improve Typography In Your Designs

8ways_typography

I wrote this article for Smashing Magazine and it was published last Friday on their site. I’m re-publishing it here for your reading pleasure. Enjoy.

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.

These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we’re going to focus on how to apply them to web design using CSS. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

Measure

The measure is the length of a line of type. To a reader’s eye, long or short lines can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type. The only time a narrow measure is acceptable is with a small amount of text. For optimum readability you want the measure to be between 40-80 characters, including spaces. For a single-column design 65 characters is considered ideal.

Measure

A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line. The code would look something like this:

p {
font-size: 10px;
max-width: 300px;
}

Leading

Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. Leading also alters typographic color, which is the density or tone of a composition.

Many factors affect leading: typeface, type size, weight, case, measure, wordspacing, etc. The longer the measure, the more leading is needed. Also, the larger the type size, the less leading is required. A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.

Leading

This takes some finessing to get the right spacing but here is an example of what the code would look like:

body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}

Hanging Quotes

Hang quotes in the margin of the body of text. By not doing so a quotation mark that is flush with the text will interrupt the left margin and disrupt the rhythm of the reader. Hanging quotes keeps the left alignment intact and balanced therefore increasing readability.

Hanging Quotes

This is achieved very easily with CSS using the blockquote element:

blockquote {
text-indent: -0.8em;
font-size: 12px;
}

The negative indent will vary depending on the typeface, type size and margins.

Vertical Rhythm

A baseline grid is the foundation for consistent typographic rhythm on a page. It allows the reader to easily follow the flow of the text, which in turn increases readability. A continuous rhythm in the vertical space keeps all the text on a consistent grid so that proportion and balance are retained throughout the page, no matter the type size, leading or measure.

Vertical Rhythm

To keep a vertical rhythm in CSS, you want the spacing between elements and the line-spacing (leading) to equal the size of the baseline grid. For example, lets say you’re using a 15px baseline grid, meaning that there are 15px between each baseline. The line-spacing would be 15px and the space between each paragraph would also be 15px. Here is an example:

body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}

This allows each paragraph element to align with the grid, keeping the vertical rhythm of the text.

Widows & Orphans

A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. Widows and Orphans create awkward rags, interrupt the reader’s eye and affect readability. They can be avoided by adjusting the type size, leading, measure, wordspacing, letterspacing or by entering manual line breaks

Widows

Unfortunately, there is no easy way to prevent typographic widows and orphans with CSS. One way to remove them has been mentioned above, but there is also a jQuery plug-in called jQWidon’t that places a non-breaking space between the last two words of an element.

Emphasis

Giving emphasis to a word without interrupting the reader is important. Italic is widely considered to be the ideal form of emphasis. Some other common forms of emphasis are: bold, caps, small caps, type size, color, underline or a different typeface. No matter which you choose, try to limit yourself to using only one. Combinations such as caps-bold-italic are disruptive and look clumsy.

Emphasis

Here are some difference ways of creating emphasis with CSS:

span {
font-variant: small-caps;
}
h1 {
font-style: italic;
}
h2 {
text-transform: uppercase;
}
a {
text-decoration: underline;
}

Keep in mind that the font-variant style only works if the font supports the small-caps variant.

Scale

Always compose with a scale, whether it’s the traditional scale developed in the sixteenth century that we’re all familiar with, or one you create on your own. A scale is important because it establishes a typographic hierarchy that improves readability and creates harmony and cohesiveness within the text.

Scale

An example of a typographic scale defined in CSS:

h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
}

Clean Rags

When setting a block of text unjustified with a left or right alignment, be sure to keep the rag (the uneven side) balanced without any sudden “holes” or awkward shapes. A bad rag can be unsettling to the eye and distract the reader. A good rag has a “soft” unevenness, without any lines that are too long or too short. There is no way of controlling this in CSS, so to achieve a good rag you must make manual adjustments to the block of text.

Rags

Hyphenation can also help with producing clean rags, but unfortunately CSS can’t handle this at the moment. Maybe in the near future we’ll see some control in CSS 3. Not all is lost though. There are some server and client side solutions for auto hyphenation like phpHyphenator and Hyphenator as well as online generators.

Further Resources

Here’s a list of related articles and books to further help you with the details.


About this entry

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

RSS Creative Review

  • An error has occurred; the feed is probably down. Try again later.

RSS V&A

  • An error has occurred; the feed is probably down. Try again later.

RSS Wooster Collective

  • An error has occurred; the feed is probably down. Try again later.

RSS This Hearts on Fire

  • An error has occurred; the feed is probably down. Try again later.

RSS TypeNeu

  • An error has occurred; the feed is probably down. Try again later.

RSS Cool Hunting Design

  • An error has occurred; the feed is probably down. Try again later.
%d bloggers like this: