Assignment 3: My Little Book Of...

Updated: Jan 18

After familiarising myself with using the Bridgeman and Oxford Art online image libraries outlined in research task 3, I moved on to work on the assignment that concludes this part of the unit. This consisted of the task of creating two small 8 page booklets that would showcase what is considered 'good' or 'bad' typography practice from my explorations in this section.


The question of what defines 'good' and 'bad' typography presented a challenge to summarise the topics in book form, as I have found that effective typography is subjective and varies widely depending on the context of a project. With an idea to produce a book that summarises the research I have written about in my blogs for part 3, I set about to create a pair of simple reference guides for students, with some key quotes and inspirations to help with typography related work.


Planning content


To start generating some initial ideas, I created word clouds in my sketchbook by exploring the relationships between the words 'good', 'bad' and any other concepts connected to typography as a subject. Then, through listing areas of content that I could pull from my part 3 research and blogs, I could make a rough list of objectives for what to include in each book. Not all of the subject areas I have been studying would make it into the combined 16 pages of the two books, but at this stage it was useful to have a written reference sheet of places that I could start pulling content from.

I had decided early on that rather than interpreting the two concepts as opposing, I wanted the books to act as a pair by keeping a connection to each other in ways that combined would show where following or not following conventions can both be done effectively. Although each book would have its own identity, I would still allow myself to have an overlap of some relevant examples of bad typography in the 'good' book, and vice versa.


The content of the 'Good' book would establish the traditionally ordered and controlled rules of typography and the 'Bad' version would represent the rebellious and unconfirming nature of experimentation, showing how typographic rules can be bent and broken effectively. As a combined guide showing both approaches, I also wanted to create a visual design language that carried throughout both books, using the physical design of any artwork and page designs, and also in the editorial structure of the various sections of content. I noted down my intentions for each book in a list as this way to keep as an organised reference point to start from.

Setting out a structure for content in each book.

Having all the relevant information in one place gave me a good enough idea of how many pages each section would need when I set up a rough initial flat plan for my content. This created less of an accurate visual layout at this stage, but outlined the overall intended structure of each book.

A rough initial flatplan, with colour coded sections and some early layout ideas.

I also made mood boards at this early planning stage to keep me thinking about the visual aspects and motifs throughout the development process. Although I would be designing the front and back covers at a later stage of development where these mood boards would be the most relevant, having images present still helped me to keep on track with my initial vision for how the books could look as an object.

Mood boards for good and bad typography
 

Developing layouts


Moving on to decide how I wanted my page designs to be structured. I chose to emulate some of the instructional booklets I have looked at in my research by using a landscape page layout rather than a portrait one. This orientation allows for more horizontal room between the visual demonstrations of techniques and written descriptions, which suits the overall type of content I wanted to include.


When conceptualising a booklet on 'bad' typography, I wanted to showcase examples of bad typography without the book actually feeling badly designed or disorderly, which is a tricky balance to find. In helping with that aspect, I ended up planning the same grid system for both booklets. The 'good' booklet would set the standard format to be used in both booklets as a skeleton I can easily adapt differently for the types of content on each page, and the 'bad' version would distort and break those rules far more often. This way more pages could use experimentation to challenge the standard framework for content while still staying visually pleasing overall.


As the standard page layout for both books, I opted for the 9x9 modular grid based on the golden canon by Jan Tschichold. This gave me opportunity to directly show that effect on the page describing the golden ratio technique in the 'good' book and granted me enough flexibility to interpret the grid differently for each spread. I could use the same grid to create multiple column layouts for text where appropriate or ignore the majority of the grid in the 'bad' book while still conforming to it to highlight important information.


I set up my document in InDesign using margins of 10mm from the page edge (12mm on the inside edge to account for the fold) and a 9x9 grid guide with a 3mm gutter on the inside of the margins.

9x9 Modular grid for landscape A5 paper

Then, by printing out my grid onto paper I made additional flat plans in my sketchbooks for alternative layouts that were more much more detailed than my first ones. Using grey boxes for text block and crossed out areas for images, I was able to create two alternatives for each double page spread that conformed to the grid.

Exploring alternative layout options for "Good typography"

For the 'bad' detailed flat plans, my layouts would be more image led in concept than text based, so the grid was less relevant than the others. It was useful to have as a backup structure for fitting in some text blocks, but the majority of the arrangements for the 'bad' typography book would be freeform.

Exploring alternative layout options for "Bad typography"

With all of my preparations now done, I started the task of bringing all the text and images from my blogs and research together to start fully building pages in DTP software using InDesign.

 

Creating content


Good Typography


I began working through the good booklet in InDesign by starting a document using placeholder text and images based on the strongest of my flat plan variations for each page. Some of these pages needed more adjustments than others and to write about all of the changes throughout development would be a lengthily process; Instead I've used the Readability vs Legibility page as an example of some of the types of adjustments and changes that I needed to make along the way for each spread.

'Readability vs legibility' page development. / Final page designs

Each page received 3 general stages of work; Marking out placeholder text and images, adding and adjusting content from my work in part 3 to fit the page, then any additional artwork and font choices at the end. The initial concept for this particular double page spread called for a row of boxes that stretched across the page from left to right. Although I tried some alternatives with the positions of the images being more central, I returned to the original layout plan in this case as I felt the staggered approach flowed well. Once that was in place, I added some relevant images to the subject of each page in the bottom margin with a soft gradient to create a dreamy and comforting effect.


All of the other pages went through similar development phases, where I stuck to one of my flat plan designs without drastic differences. I found myself more consistently making smaller changes to the text and images to find the best fits and alignments until I found something that I was happy with for each. There were repeated arrangements such as any quotes being assigned to the column the furthest outside of the page and standard paragraph styles that I designed to make the process easier to change. I'm pleased with how the page layouts for the 'good' book ended up, and having the modular grid to conform made it easier for me to maintain cohesion throughout.


Bad Typography


For the 'bad' book, there was less I could initially lay out in terms of text placement as many of the pages were reliant on images to lead the content. In addition, as I was piecing together and sourcing images, I was inspired to have a narrative emerge as the foundation for unifying the book behind a rebellious theme of a character being chased for creating graffiti and rebelling from the traditions of regular typography as represented by an autoreactive police officer.


I created some simple pictogram characters that could appear on each page and progress their own plot, almost in a comic book panel fashion though without any dialogue. I rearranged some of my pages into a new flat plan that would use this idea to lead the reader through a narrative across each page.

A revised flat plan with a new narrative through line.

The troublemaker character was initially a robber in the flat plan, but was soon replaced by a punk to be more fitting to the narrative. I made puppets of the two figures in illustrator and modelled them so that I could easily reposition them into different poses for each page. I enjoyed making these simple characters, and was finding that the age range for this project would be better suited to an earlier teenager for the tongue in cheek style.

With a new direction in place, I posed my illustrator characters to fit each scene of my new flat plan against black and white real world photography backgrounds. I felt this created an interesting contradiction between the crisp simplicity of the main characters and the roughness of the real backgrounds, making a strong visual style for the text to be positioned against as it interacts with each scene.


As with the 'good' booklet development process where many pages went through several variations of design, I've chosen an single spread of content as a case study to give a general overview of how things looked at each stage. The order differs slightly from the 'good' booklet as the images were designed first, text sections were added to complement the main image later on.

Making Mistakes / Breaking the grid development.

This is where I started to run into some issues with developing my new ideas. The visual led approach had departed from my initial ideas to a point that I was struggling to find a foothold for what kind of content would actually be relevant to each page, and eventually I ended up with a sparser and less connected series of advice and quotes just to make sure the pages had reached a finished stage as I had spent too much time deliberating and rearranging concepts to fit the image.


With that said, I do still have a fondness for what I have created, especially where the text blends in with the background and adds something to the story. If I returned to this project I would want to push those kind of ideas further but making a clearer plan for each page on how the characters interact with text in interesting and dynamic ways. This would make up for the lack of cohesion in the 'bad' typography book, which I don't feel was successful as my first due to the sudden change in direction as I lost my way through the later stages development.

 

Cover Designs

The final stage was for me to design covers for each booklet, which was a simpler process to conceptualise now that I had finished look for each of the internal pages. I edited together my preferred designs in photoshop to create the two covers below using textured images and text to create a layered effect through the gaps in the lettering.


My little book of 'Good' typography cover design.

For the good typography book, I used the traditional shapes and styles of the geometry found in the golden ratio as a starting point. Then, by using a gold engraved letting effect for the background against a marble slab, I think I've made something that sets the tone for the structured rules within.

My little book of 'Bad' typography cover design.

For the 'Bad' cover, I extended the story from the inside of the book to feature the ending of the character imprisoned after being judged for his crimes. This is easily identifiable on its own, but sets up the internal story inside the book that explains what led up to the outcome shown on the cover sleeve.


Finally, I made the booklets into digital mock-ups. I would have hoped to also have printed and stapled these booklets together to see how they read at their chosen print size on standard A5 paper with thin card covers, but some technical setbacks with my printer prevented me from doing so for this project. If I return to these at a later point, I hope to print these properly and make adjustments if needed to account for the reading size of text at this scale.

Good Typography Booklet mock-up

 

Reflections


This was a longer running project than I thought it would be, as I still find it difficult to organise my ideas when there isn't a real client to set out the limitations of a brief for me to respond to, especially when developing two titles at once. The 'bad' book proved to be the trickiest challenge as I had left my ideas fairly loose until the story concept emerged later in development, and I would have leaned more into linking the story aspect of that if I had come up with it earlier.


It's interesting how the 'bad' book proved its own rebellious nature and ended up setting itself apart from its counterpart as the idea of having both books as a pair got further apart, although the cover designs still provide the strongest visual links. Of the two, I think the 'good' booklet is the strongest for a balanced and even design, but the bad book succeeds at being more interesting and eye catching of the pair. Despite my reservation about not being able to realise some concepts as fully as I originally wanted to, I'm still satisfied with my overall approach for now and I look forward to receiving feedback for this piece.

 

Bibliography:


Goodreads. Typography Quotes (2021) At: https://www.goodreads.com/quotes/tag/typography (Accessed 12/01/22)


Hughes, K. (2017) 6 embarrassing examples of bad kerning At: https://www.creativebloq.com/typography/5-embarrassing-examples-bad-kerning-91412894 (Accessed 12/01/22)


Kidadl. (2021) Typography Quotes All Graphic Designers Need To Read At: https://kidadl.com/articles/typography-quotes-all-graphic-designers-need-to-read (Acessed12/01/22)


Mockups-Design. (2021) Landscape brochure mockup At: https://mockups-design.com/landscape-brochure-mockup/ (Accessed 12/01/22)


Readability Matters. Legibility vs Readability (2021) https://readabilitymatters.org/articles/legibility-vs-readability (Accessed 12/01/22)