How to discourage me from playing your game (Lagacé, 2016)

Lagacé, S. (2016). How to discourage me from playing your game.  Retrieved from https://mechanteanemone.wordpress.com/2016/06/23/how-to-discourage-me-from-playing-your-game-part-1/

RESEARCH NOTES

First Impressions

• Need a ‘pitch’ early one, e.g., the cover or first few pages à explain basically what the game is about & the general feel
• Consider colour, font size and type, margin size
• Column layouts are incredibly difficult to read on smaller tablets
• There should be easy to identify sections and headings

Readability

• One of the greatest challenges with design of game books is that they are read in a multitude of contexts and ways.
• Lagacé identifies 4 ways game books are read:
  • the leisurely reading done when the book is first received
  • the selective reading the play does to familiarize themselves with the setting and make a character
  • the studious reading the gm does to to prep for the game
  • the frantic reading in the middle of a game session to locate a particular piece of information or interpret a rule
• Help orient the reader using elements such as a table of contents, index, clear headings, summary pages, call-outs, “see page XX,” schematics, flowcharts, text boxes
• Consider small screen viewing —> avoid column layouts, distressed fonts (a.k.a. ripped, grunge or rough), very small fonts, colour page backgrounds, and larger page formats
• Ensure pdf allows page export and copy and paste

While Playing

• Organisation of information for quick reference is essential
• Good visual contrast between headings and main text, legible and well-identified inset boxes make it easier to navigate a game book quickly
• Fully bookmark pdf files into sections
• When writing a table of contents/index, use more general terms the reader is more likely to search for, rather than the terms specific to your game à those new to game are mostly likely to be using the index/contents and they will not know the specific terms
• All play aids should be included in the pdf/book (e.g., in the appendix)

The Elements of Typographic Style (Bringhurst, 2016)

Bringhurst, R. (2016). The Elements of Typographic Style (4th ed.). Vancouver, BC: Hartley & Marks.

RESEARCH NOTES

Horizontal Motion (pg. 26-36)

• Line lengths of 45-75 characters is considered satisfactory for single column layouts à the 66-character line is considered the ideal for legibility
• For multiple column layouts, 40-50 characters per line is more appropriate
• Chose ragged or justified based on what best suits both the text and the page
  • When using justified text, avoid hyphenated line-ends is possible, however, they are still preferable to sloppy spacing. If there are still too many spaces, ragged setting list likely better
  • Ragged text is suited to narrower columns as it lightens the pages and decreases stiffness and will decrease the serious typographic errors more common to narrow layouts
  • Unserifed or monospace fonts often look better ragged (but not always)

Blocks & Paragraphs (pg. 29-42)

• Opening paragraphs must always be set flush left. This indent is superfluous if there is a title or subhead.
• In continuous text, ident paragraphs after the first should be at least one en. One em or one lead are the most common measures. There are other strategies like outdents and ornamentation however indents are the least intrusive to the reading experience.

Size (pg. 45)

• Don’t compose without a scale (the 11,12,14,16,18,21,24,30… etc. scale is more common but others can be used)

Notes (pg. 68)

• If page notes are subordinate details, set them in a smaller size than the main text
• Setting notes in the margin (sidenotes) can be present when needed and are easier to read than footnotes or endnotes. They should be used if appropriate for the text.

Tables and Lists (pg. 70-72)

• There are six key principles to designing tables that are both good to read and to look at:
  • All Latin alphabet text should be set horizontal
  • Condensing or shrinking the text is rarely the right solution to space issues
  • Avoid ornamentation, rules, boxes, dots, etc. when possible to maximise information
  • Guides and dividers (when they are necessary at all) should run in the predominant reading direction à vertically in the case of lists, indices and some numerical tables; horizontally otherwise
  • Rules at the edges of the table separating the first or final column from empty space almost always is functionless
  • The inside of the table must contain an adequate amount of white space

The Textblock (pg. 163)

•  
• If the text is for continuous reading, ensure the column height is clearly taller than the width
• However, remember that very long narrow columns are often associated with quick, unthoughtful reading (e.g., magazines and newspapers). Consider the ratio.

Margins & Satellites (pg. 165-166)

• Folios (page numbers) can be placed anywhere that is pleasing and easy to find à this is typically one of four places
  • The outside header (appropriate for folios accompanied by running heads)
  • The footer, aligned with or slightly indented from the outside edge of the text
  • The upper quarter of the outside margin, beyond the outside edge of the text
  • Horizontally centred at the foot of the page
• The bottom outside corner is almost always the most convenient for flipping pages, especially for larger page sizes (e.g., A4)
• Running heads are usually pointless and should only be considered when necessary (usually for copyright purposes)

Page Grids and Modular Scales (pg. 166-176)

• Use a modular scale if you need one to subdivide the page
• Modular scales serve the same purpose as grids but are more flexible. They are suited to complex and varied content.
• Examples of modular scales are from pg. 168 of Bringhurst

Methods of Justification (pg.191-192)

• Good justification is calculated paragraph by paragraph rather than line by line
• The best settings will depend on the text and font, but a good starting point is:
  • ±3% intercharacter spacing
  • ±15% word spacing
  • Favour word spacing over intercharacter spacing

Author: Nicola D’Andrea (2018)

Thinking with type (Lupton, 2010)

Lupton, E. (2010). Thinking with Type (2nd ed.). New York, NY: Princeton Architectural Press.

RESEARCH NOTES

• Sizes points 9 and 11 are more common for printed text, however, what is appropriate will change with the font. Fonts with a larger x-height, such as Helvetica, can be elegant and readable at 8pt but bland and clunky at 12pt.
• When alternating lowercase and uppercase letters, adjust the leading by selectively shifting the baselines to make the space look more even.
• Never use pseudo small caps – if the text will benefit from small caps, select a typeface that includes specially designed ones
• Non-lining numerals integrate best with blocks of text

Typographic features of text and their contribution to the legibility of academic reading materials (Lonsdale, 2016)

Lonsdale, M. d. S. (2016). Typographic features of text and their contribution to the legibility of

academic reading materials: An empirical study. Visible Language, 50(1), 79-111. 

RESEARCH NOTES

• Found that typographic layout had a notable impact on student performance in academic reading situations with or without time pressure
• Text layout impacted student ability to do the following:
  • Read instructions and questions.
  • Scan text to locate relevant information that answers specific questions.
  • Skim text immediately before and after a key word to get an idea of whether that section contains the right answer.
  • Refer back to the text to make sure the information is accurate.

• Line length and interlinear space (leading) had most significant impact on performance
• The layout associated with the greatest performance included the following:
  • Style contrast between body and heading text
  • Type size of 10.5 points
  • Interlinear space (leading) of 14 points
  • Line length of 70 characters
  • Text left-aligned
  • Single column
  • Wide margins 
  • Paragraphs distinguished by one line space with no indent

Designing Information : Human Factors and Common Sense in Information Design (Katz, 2012)

Katz, J. (2012). Designing Information : Human Factors and Common Sense in Information Design.

Somerset, NJ: John Wiley & Sons.

RESEARCH NOTES

Chapter 4: Structure, Organisation, Type: Hierarchy and visual grammar (pg.113à)

• Flush left-flush right table of content organisations (usually requiring leader rules to be legible) are a tradition that often cause unnecessary confusion à creates white space that separates and groups information unnecessarily; consider other alignment solutions
• When selecting typefaces, consider the original intent of the designer à e.g., do not use ‘book’ fonts like Garamond for large headings as it was designed to be optimal at smaller sizes. This is an example of why it is often important to have a different typeface for headings and body text. Not only does it create visual contrast that aids in identification, few typefaces are versatile enough to serve both functions.
• Legibility of the typeface is always more important than elegance; either make the sacrifice or find a better solution for the text
• The correct font for the job is determined by a balance of legibility, context, connotation and appropriateness

Introduction to information design
(Coates & Ellison, 2014)

Coates, K., & Ellison, A. (2014). An introduction to information design. London, UK: Laurence King.

RESEARCH NOTES

Chapter 3: Structuring Information

• Information should be structured using a combination of a grid and a visual hierarchy
• Achieve visual hierarchy through a combination of scale, weight, tone, graphical elements, space and placement of elements
• [pg. 77-78 has clear examples of how a combination of factors aids communication)
• Provides a method for structuring information:
  • Read through the information/content and ensure you fully understand what it means, what is most important, etc.
  • First establish what logical order things will information need to presented in (e.g., in RPG, in what order to things need to be understood in order to play the game à should everything be chronological, or does some ‘end game’ information need to be understood before reading early game details?)
  • Establish what the audience needs to see first, second, third, etc. This applies to the whole document but also to each individual page and segment.
  • Decide what visual hierarchy elements are appropriate to differentiate between this information
• When planning a grid, group relevant pieces of information together so that the reader can navigate it clearly
• Consider how captions fit into the composition
• It can be useful to deconstruct documents that ‘work’ to understand why they work à recreate the grid, list the hierarchy elements used and list all the levels of hierarchy

Chapter 4: Legibility and Readability

• When selecting body text, look for fonts with a large x-height, and open counters à these are generally acknowledged to be more legible
• Colour coding can be an invaluable tool for aiding the reader in finding most important information, however, there are some considerations.
  • It is important to consider the contrast between the colour and the background (higher contrast is more legible) but also the contrast between different colours used in the composition.
  • Strong contrast in colour also makes the document more legible for people with vision impairments.
  • More than three or four colours becomes difficult to remember
• In our alphabet, the top halves of the letters contain the most distinguishable parts. Furthermore, there is evidence to suggest that proficient readers identify words by the word shape rather than the individual letters, especially when reading body text (this allows us to skim!). Because this is how we understand words, vertical text in Latin alphabets (e.g., English) is very difficult to read and should be avoided unless absolutely necessary.
• All-caps text is substantially less readable than sentence case or lowercase text for the same reason. It should generally be avoided when possible. To draw attention to or emphasise text, consider changing the typeface, colour or weight instead.
• For body text, avoid texts that are too heavy and too light as both impact legibility. If you are unsure of what is appropriate, look for typeface with a specified medium-weight or book-weight.
• Using too many different weights, fonts, and other elements can actually disrupt the hierarchy. It is easier for the reader if there is a clear differentiation but too much differentiation between levels of hierarchy is cluttered and confusing
• When establishing hierarchy a useful guideline (but not a rule!) is try and use at least 2 points of difference between the text. E.g., headings in large bold type, subheadings in smaller, italic type. However, you should not use more points of difference than necessary.
• Paragraph shape also aids readability. Avoid widows and orphans at all costs as they interfere with the flow. A ragged right (left justified) paragraph is usually most readable, however, consider manually adding soft returns to create a better reading rhythm  
• Graphic elements that can used to aid in legibility, structure and readability include:
  • Rules. Rules are lines the designate areas within the design, and can be used to divide, frame and emphasise elements within the space.
  • Dots. Dots and bullet points help create clear hierarchy and section information more effectively.
  • Lines. Lines signify connections and create directional pathways for the eye follow (with or without arrowheads). Dashed lines tend to imply movement.
• Using illustration:
  • Effective use of illustration attracts attention, creates movement and provides contrast. It also suggests personality, mood and tone.
  • Illustration can also be used to create focal points.
  • The rule of hierarchy still applies when using illustration, so it is important to consider how the illustration balances with the textual hierarchy à should the illustration be viewed first, second, third, etc.
  • Drop-in illustrations can break up dense information or highlight key points in the text

Grid systems in graphic design
(Müller-brockmann, 2016)

Müller-Brockmann, J. (2016). Grid systems in graphic design: a visual communication manual for

graphic designers, typographers and three dimensional designers (10th ed.). Zürich, Switzerland: Niggli.

RESEARCH NOTES

Width of column (pg.31)

• There are psychological impacts of line length on reading
• Longer lines are wearying to the eye
• Shorter lines disrupt the flow of reading by causing the eye to change lines too rapidly
• In general, lines which are too long or too short reduce memorability
• An average of 10 words per line is a practical goal for text of any length, however, it is easier to bend and break this rule for shorter sections of text
• If multiple type sizes are used (e.g., body and heading) in the same column, the column size/line length should be what is most appropriate for the bulk of the text (usually the body)

Leading (pg.36-37)

• The readability of long blocks of text can be enhanced by manually increasing the leading
• It is also important with longer texts that they divided into paragraphs and that the distinction between paragraphs is clear

Margin proportions (pg.39-41)

• If the margins are too small, the page will feel overfull. This is also especially problematic if the work is being printed, as the reader will have a negative subconscious reaction to the fact that their fingers obscure the text or pictures
• A type area that is placed too high optically will give the impression that the page is taking flight upwards.
• Margins of the same size create dull, static designs
• A bottom margin that is larger than the top usually balances best
• Müller-Brockmann suggests a ratio of 1:2 top to bottom for a well-proportioned page, however, notes that this is a “luxurious” and expensive layout as it is not the most space effective

Construction of the grid (pg.57-75)

• Even if the text will only appear in one column, it is useful to design with more in mind (e.g., subdivide into 2 columns), in order to add more flexibility for different size images, diagrams, pull boxes, etc.
• This can also be used to create more dynamic layouts (esp. when using images) without sacrificing readability, scanning, etc.
• Vertical subdivisions, each section separated by a margin the height one or two lines of text, can also be useful for image heavy texts
• In general, a page with 8 grid fields (2 col, 4 row) allows illustrations of various sizes and shapes to be accommodated seamlessly [use diagram]. This is a useful starting point, however, the best grid design will also be dependant on the content
• Adding more and more grid fields leads to more and more dynamic designs, however, these are not recommended for a novice document setter, as they become increasingly complex

Solid tint in the grid system (pg.101-103)

• When a solid tint (e.g., a coloured text box) is used within the text book, keeping the both tint area and text area within the standard size of the grid means that the edges of the text will touch the edges of the tint. This is an unsatisfactory result as it looks cluttered and doesn’t give the text breathing room.
• There are two solutions:
  • The solid tint coincides with the grid dimensions but the text block is indented from the edges of the colour area
  • The area of colour is extended beyond the grid dimensions, but the text block remains aligned to the grid
• Which is appropriate will depend on the typeface selection, style and layout, however, it should never be kept as default. [examples in book]

Making and breaking the grid (samara, 2017)

Samara, T. (2017). Making and Breaking the Grid (Vol. 2). Beverley, MA: Rockport Publishers.

RESEARCH NOTES

Making the grid (pg.10)

• Benefits of using a grid system:
  • A method of problem-solving on both a visual and organisational level
  • Introduces a systemic order to a layout à aids with distinguishing different types of information but also easing the user navigation throughout that information
  • Creates visual cohesion among visual elements through consistent spatial proportions and positioning logic
  • Allows enormous amounts of information to be laid out rapidly and cohesively, thus especially appropriate for longer documents (e.g., booklets) and documents with diverse content types

Grid Basics Structure (pg.20-41)

• [pages 22-23 has a good set of diagrams of the ‘anatomy of a page’, and clearly defines and illustrates terminology]
• The modular grid is especially useful for projects involving many different kinds of information.
• It is a column grid with a large number of horizontal flowlines that subdivide each column into rows. This creates cells called modules, which create a flexible set of guides for alignment of elements of different types and sizes. It can also aid in creating dynamic but cohesive pages
• Smaller modules create more flexibility and precision but too many subdivisions become confusing or redundant
• When using a grid, the edges of the elements may span multiple rows or columns but the edges wholly align with the edges of the module [ diagrams on page 34-35 ]
• In a column grid, the images may be of any height but of set number of fixed widths. In a modular grid, the images can be of a set number of fixed heights and widths.
• However, using a grid does not mean that images can’t overlap or cross from one column to another.
• There are some special cases and exceptions to the alignment rules: [see diagram examples  on page 37]
  • Left or right aligned text creates a ragged edge that won’t fill out the columns entirely. The irregularity becomes more obvious with larger text sizes, such as titles. In this case, it is okay to alter the line length somewhat to help optically correct the column
  • Textual inclusions, such as drop-caps and callouts often sit nicer aligned with the margins/not quite in the grid. This is okay because their purpose is to disrupt the regular text structure.
  • Centred text is better aligned to the central axis of the page rather than the exact columns, using the column widths as more of a guideline
  • Bullets should have to the left of the column alignment, as should quotation marks and brackets if the fall at the start of the line of text.
  • Columns of text spanning multiple rows that also include paragraph breaks generally shouldn’t fall exactly on the row guideline. This can create awkward separations.
• Instead of a modular grid, another option is a column grid that also includes flowlines to help subdivide the space [ diagrams and examples page 38 ]
• Flowlines can help anchor certain types of elements (e.g., titles) to set parts of the page, which can help the reader quickly identify search for them
• Folios and runners often fall outside the margins, however, when setting them here they should still align to a column edge, row edge or flowline à this helps integrate them into the overall page layout, which is visually pleasing but also helps achieve the balance between noticeable and distracting. They can also be integrated directly in to the grid
• When using lines, set them to the grid’s alignments not to the associated text elements length
• When using coloured boxes or linear frames, either:
  • Extend the box boundaries to the gutters
  • Slightly indent the text
  • Do a little of 1 & 2
• Whichever option is chosen should be used consistently across the entire document

Building a Grid (pg.42-)

•