IN THIS FINAL installment of our 3-article series on typography, we are going to get our hands dirty and take up a fairly complicated project and design typesets in a circumstance mirroring the real world.
[hr_padding] [notice type="red"] Did you know that this is the third article on a series introducing you to the basics and intermediate levels of Typography? Head over to the first article, and then visit the second one too to get a better idea of what we’re doing in this post.[/notice] [hr_padding] [hr_padding]
Getting hired on a typesetting project
It is going to be a hands-on, real-world experience, so do not take the back seat and read through this. Try, instead, to participate every step of the way and go to a step only after you have finished the last. I have coded this article to make that easy for you. To start, click step 1, and once you are done, click step 2 to reveal it and so on. That way you will not sneak a peak involuntarily.
And before we go on, here is a word about our client of today: he is going to need us to typeset a heavily textual, offline work, covering consistency, readability and overall appearance, and he has several demands that we will learn from him soon. But we shall try to handle it in ways that can be used for either an offline or online work — and for you to get a good picture about on-set typography.
Ready? Dive in! Here is our client walking through the door. We have no idea what his name is, so we’ll just call him Richie.
[hr_top] [hr_padding]Richie’s newspaper typography requirements
Richie is a newspaper editor who owns a local daily called the City Lights Tribune. He needs us to design a newspaper for him, and his requirements are –. Let us hear them in his own words:
[hr_padding] [notice type="green"] “I’m going to need you to typeset my newspaper for me. Use the usual dimensions. I want the title to stand out, but none of that old English typefaces that everybody uses. Go for something different. I like it modern, but not so modern that it loses the touch of a newspaper and people don’t take it seriously.“My articles are going to be of three levels. I’ll have a major headline or two, a few important stories and few unimportant news items. Your typesetting must make that clear. And don’t forget colours! I’ll also need a space for just titles and page numbers for navigation and such. That’s what I need. I’ll leave the rest to your discretion. Do a good job of it!”
[/notice]
So there goes the man out the door. Now let us begin working on his paper. By the usual dimensions he probably refers to the rectangular layout of a newspaper, so we shall disregard specifics for now and head right to typesetting it. We shall be using lorem ipsum as dummy text, so if you have no idea what that is or do not know how to get it, take a look at this article.
When you’re ready, head to step 1.
[hr_padding] [toggle title="STEP #1 - TEMPLATES"] We shall begin by letting you make your version first (keeping Richie’s conditions in mind!) Then, once you have done that, return here and head to step #2 from where you can begin working on the design alongside me.Here is a quick checklist of what you will need to be making:
[hr_padding]- Newspaper title
- Main headlines with sub-headings and body typeface
- Second order headlines with sub-headings and body typeface
- Default news item, including headlines, sub-headings and body
- Colours
And here is a template broadsheet file I created for you to download. I have already equipped it with images and borders, but have left spaces for you to typeset the above-mentioned texts with ease. You can even use a programme as simple as Microsoft’s Paint to get the job done beautifully. For general convenience, I have put it up in .png format. Just right click (or ctrl+click) and ‘save link as…’ below:
[hr_padding] Download Richie’s newspaper layout [hr_padding]Downloaded it? Great, so here is an explanation: The first horizontal bar, right on top, is where the newspaper name goes. The next one has a grey block, which is the image, so wrap your text around it and play with your headline and body for the main story. Moving down a row, we have three blocks: the centre one is for the second order headlines with its body etc., and the sides are for less important stories. Finally the last bit can be anything you like: little asides, perhaps? Or you could use one of the boxes to state what is inside today’s edition using just article headlines? Work it out yourself — and do not forget to choose good colours — then come back and follow me all the way from step #2 below.
[P.S. You can close a step once you're done with it by hitting the minus symbol next to the subheading step# above.] [/toggle][toggle title="STEP #2 - THE TITLE"]We’re going to go top-to-bottom so that’ll give us a fairly good idea of hierarchy when typesetting. First, then, is the title of the newspaper. Now, throughout the process, I will refrain from mentioning exact font-size and other dimensions because that is largely dependent on the dimension of our play area. That would mean you’ll have to keep a close eye on the relative dimension of each element yourself. So, here goes:
Richie is looking to avoid the old English typeface entirely. That would have been a great choice, but to choose something else in its place would be quite a good challenge for us too, so I am going to begin with a basic question: serif or sans-serif?
My idea, since this is print media (and for reasons we have seen in the previous part of this series) is that it is better to go in for a good serif typeface for the body, which means the upper level is going to be sans-serif and the level above that (i.e. the heading) would balance out as a serif font. This is entirely personal taste, but we shall see how things turn out by the end!
I had several options, and I have narrowed it down to the two you see below. (You can just click on the font names to download most of these fonts — which is why I have opted to write off stock fonts altogether.)
[hr_padding]
After much speculation, I have decided to opt for a bold version of the Optimus Princeps typeface for the City Lights Tribune. Incidentally, I am not going to be using Bambi for its weight — I shall explain more in the next step. I worked on the layout and here is what my paper’s title is going to look like:
Alright, that’s looks pretty good. Now I am going to keep that aside and start working on the headline fonts.
[/toggle][toggle title="STEP #3 - THE HEADLINES"]We are going to have three levels of headlines as I explained already; and in this step I am going to work on all three of them, namely, the main headline, the second-order headline and a general headline typeface for all other news items on the paper. And we’re going to worry only about the typefaces on the front page for this project.
Like before, I have a few typefaces in mind, and as you have probably guessed, I’m going to opt for sans-serifs now. I played around with the weights and widths and finally chose these three, in order, for the main, second-order and tertiary headlines. Notice how the first one stands out among the three for it plays on heavier weights and is wider. (Again, click on the fonts to download them; I have personally made sure that they are all free!)
My choice for the main headline is one of my favourite sans-serif thick typefaces, called Alte Haas Grotesk. It’s soft inner curves add to the heavy look it carries, and the reason why I did not choose Bambi, comes in here. Think about this carefully: if you subscribe to the City Lights Tribune daily, then you know you subscribe to it and you do not have to be reminded about it every time you pick up the paper. But, as the typesetter, I need to make sure that what does beckon your eyes is the day’s main news item. In other words, if the name of the paper takes precedence over the main headline, it becomes disturbing to read the paper!
Remember that at any point of time, you can break the serif/sans-serif rule and go ahead and choose a serif font for one of the headlines too. But you just have to make sure you do it perfectly right, or you can wreck the design and turn off your readers.
In this regard, for all second-order news item headlines, I’ll be using the infamous Liberation Serif typeface.
Our last level of headings is going to be set in our beloved Arial. I shall be using the narrow variant, but the exact dimensions will be more relative than discrete, but here is the font itself as eye candy:
Now that we have our headline typefaces set, I’ll move to the body contents and create balancing serif typesets.
[/toggle][toggle title="STEP #3 - THE BODY"] For our main news item as well as our second-order news item/s I have opted for an extremely well-balanced, uniform typeface with an excellent x-height; the typeface, called Angleterre Book, is somewhat Bookman Old Style meets Georgia, and is well-suited for large chunks of fairly tiny sized text.
For our tertiary blocks of news, I’ll narrow down to fit more text into a smaller area, but still keep it legible by reverting to an old classic that you will surely smile at:
Satisfied? Now we’ll quickly go through the last step of our typesetting (we are rather quick, aren’t we?) There we will decide colours and any other leftover stuff.
[/toggle][toggle title="STEP #4 - MISCELLANEOUS"]
We have two more things to discuss: colours and a fallback typeface.
I am going to opt for Arial regular as my fallback typeface. If you have no idea what it means, let us see you work your grey matter and find out — just spot Arial regular on my finished work and there you have it!
As for colours, I played in the sandbox and finally came up with three productive colours to use along with my typesetting. I have put up the details below. Everywhere else, the text is going to be standard black on a white background. I have also mentioned the RGB settings in case you would like to reproduce them.
[/toggle]
[hr_padding]
So, have you taken yourself through the above steps? It is time to take a look at the final product. As your third and final typography lesson comes to an end, and you prepare to brave out the world with your newly found knowledge, here is a final piece of typographical work for you, as part of this three-article series. Click on the thumbnail below. (On the top right corner, you’ll find a tiny grey box. Click it to magnify the image.)
[hr_padding] [pictureframe image="http://vhbelvadi.com/wp-content/uploads/2012/09/Newspaper-typesetting_City-Lights_VHBelvadi.png" align="center" lightbox="true" title="The City Lights newspaper typeset by VHBelvadi.com" link="" width="108" height="164"] [hr_padding]So that ends our fun typography blog/workshop! I hope you have enjoyed it as much as I enjoyed writing it for you. And I certainly hope it will be of use to you at some point of time in the future. As always, if you have any doubts or would like to drop a kind word, you know how to get in touch with me!
The post Everything you need to know about typography: Part III appeared first on VHBelvadi.com.