Graphic Design *Jail *

is only available on landscape-mode screens.
Sorry for the inconvenience, hope you revisit soon!
Graphic Design *Jail *
Have you ever heard of “illegal design” before and wondered what it means? Are you curious about the “red flags” of graphic design? Do you wanna know what exactly graphic designers are adjusting and deciding everyday? If you answered yes to any of these questions, then this website is for you!
“Graphic Design Jail” is a series of projects that aim to explore and challenge the current do’s-and-dont’s of graphic design. Below are several design decisions, each presented with options that are theoretically right or wrong. From this website you will hopefully learn how the classic design systems work and eventually make your own decisions.


GRAPHIC DESIGN *JAIL*
DEMO 1
TYPOGRAPHY RULES




Stretched Font




The typeface should stay true to its design. If you stretch it, the glyph proportions will become distorted.
When you want a condensed / expanded text in your design, search for a matching variable type.
Width Scale:
30



GRAPHIC DESIGN *JAIL*
DEMO 2
TYPOGRAPHY RULES




Skewed Font




The typeface should stay true to its design. If you skew it, the glyph proportions will become distorted.
When you want an italic text in your design, click on the italic option or find a better match.
Shear Degree:
-30
Italic



GRAPHIC DESIGN *JAIL*
DEMO 3
TYPOGRAPHY RULES




"This is supposed to be a
hanging smart quote."




When you start a paragraph with a quote, make sure to hang the quotation mark toward the edge so the body text is better aligned.
Also, you will need to use the curved (smart) quotation marks instead of straight quotation marks (which function as units of measurement).
Smart Quotes
Hanging Punctuation



GRAPHIC DESIGN *JAIL*
DEMO 4
TYPOGRAPHY RULES




Page 8-12 of that book is riddled
with typos-missing hyphens,
misplaced em dashes, and
improperly spaced en dashes.




This rule may pertain to punctuation, but it remains an essential aspect of design, as precise delivery of the message is crucial.
A guide to proper punctuation can be found ↗here.
First Hyphen/Dash:




Second Hyphen/Dash:






GRAPHIC DESIGN *JAIL*
DEMO 5
TYPOGRAPHY RULES




Poor Font Choice




There are a lot more typefaces available, and there’s no permanent right or wrong font choice.
But a careful consideration of the style / tone and content of your text is essential to the design decision making process.








GRAPHIC DESIGN *JAIL*
DEMO 6
TYPOGRAPHY RULES




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sagittis mauris. Nunc condimentum augue velit, eu rutrum magna fermentum elementum. Aenean sed nibh nunc. Phasellus imperdiet eu lorem nec hendrerit. Vivamus dolor sem, convallis ut pharetra tempus, auctor sed dolor. Morbi bibendum tincidunt neque, id vulputate mi tempor vel. Nam fringilla lorem suscipit, condimentum turpis eget, luctus velit. Proin rutrum erat ligula, quis aliquam nibh tincidunt vel. Etiam vitae velit ac quam commodo auctor sit amet id turpis.

Nunc aliquet, elit eu rhoncus pharetra, purus est laoreet ligula, vitae suscipit elit lacus sit amet nulla. Sed commodo iaculis vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum libero orci, semper sagittis ante venenatis, congue elementum ipsum. Vestibulum luctus nulla in mattis volutpat. Sed vestibulum lorem sapien, nec molestie mauris scelerisque ac. Nunc in nisi lorem. Mauris nec dui augue. Nulla vel purus ut ante condimentum euismod. Quisque feugiat laoreet magna, quis feugiat lorem rutrum sed. Phasellus dignissim mauris elit, eu volutpat elit ullamcorper congue. Ut congue fermentum velit eget aliquet.




Having the right amount of characters on each line is key to the readability of your text.
The optimal line length for body text is usually 50–75 characters per line, including spaces.
Text Source: Readability: The Optimal Line Length
Text Width:
100



GRAPHIC DESIGN *JAIL*
DEMO 7
TYPOGRAPHY RULES




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sagittis mauris. Nunc condimentum augue velit, eu rutrum magna fermentum elementum. Aenean sed nibh nunc. Phasellus imperdiet eu lorem nec hendrerit. Vivamus dolor sem, convallis ut pharetra tempus, auctor sed dolor. Morbi bibendum tincidunt neque, id vulputate mi tempor vel. Nam fringilla lorem suscipit, condimentum turpis eget, luctus velit. Proin rutrum erat ligula, quis aliquam nibh tincidunt vel. Etiam vitae velit ac quam commodo auctor sit amet id turpis.

Nunc aliquet, elit eu rhoncus pharetra, purus est laoreet ligula, vitae suscipit elit lacus sit amet nulla. Sed commodo iaculis vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum libero orci, semper sagittis ante venenatis, congue elementum ipsum. Vestibulum luctus nulla in mattis volutpat. Sed vestibulum lorem sapien, nec molestie mauris scelerisque ac. Nunc in nisi lorem. Mauris nec dui augue. Nulla vel purus ut ante condimentum euismod. Quisque feugiat laoreet magna, quis feugiat lorem rutrum sed. Phasellus dignissim mauris elit, eu volutpat elit ullamcorper congue. Ut congue fermentum velit eget aliquet.




Writing in all capital letters conveys SHOUTING TO THE RECIPIENTS.
It is recommended to reserve the use of all caps for short phrases instead of complete sentences.







GRAPHIC DESIGN *JAIL*
DEMO 8
TYPOGRAPHY RULES




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sagittis mauris. Nunc condimentum augue velit, eu rutrum magna fermentum elementum. Aenean sed nibh nunc. Phasellus imperdiet eu lorem nec hendrerit. Vivamus dolor sem, convallis ut pharetra tempus, auctor sed dolor. Morbi bibendum tincidunt neque, id vulputate mi tempor vel. Nam fringilla lorem suscipit, condimentum turpis eget, luctus velit. Proin rutrum erat ligula, quis aliquam nibh tincidunt vel. Etiam vitae velit ac quam commodo auctor sit amet id turpis.

Nunc aliquet, elit eu rhoncus pharetra, purus est laoreet ligula, vitae suscipit elit lacus sit amet nulla. Sed commodo iaculis vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum libero orci, semper sagittis ante venenatis, congue elementum ipsum. Vestibulum luctus nulla in mattis volutpat. Sed vestibulum lorem sapien, nec molestie mauris scelerisque ac. Nunc in nisi lorem. Mauris nec dui augue. Nulla vel purus ut ante condimentum euismod. Quisque feugiat laoreet magna, quis feugiat lorem rutrum sed. Phasellus dignissim mauris elit, eu volutpat elit ullamcorper congue. Ut congue fermentum velit eget aliquet.




Typically, display fonts are crafted with high stroke contrast, which makes certain parts of glyphs too thin to read at smaller sizes.
Opting for typefaces with more balanced stroke widths can enhance the overall reading experience.


Freight Displaycmp Pro




GRAPHIC DESIGN *JAIL*
DEMO 9
TYPOGRAPHY RULES




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sagittis mauris. Nunc condimentum augue velit, eu rutrum magna fermentum elementum. Aenean sed nibh nunc. Phasellus imperdiet eu lorem nec hendrerit. Vivamus dolor sem, convallis ut pharetra tempus, auctor sed dolor. Morbi bibendum tincidunt neque, id vulputate mi tempor vel. Nam fringilla lorem suscipit, condimentum turpis eget, luctus velit. Proin rutrum erat ligula, quis aliquam nibh tincidunt vel. Etiam vitae velit ac quam commodo auctor sit amet id turpis.
Nunc aliquet, elit eu rhoncus pharetra, purus est laoreet ligula, vitae suscipit elit lacus sit amet nulla. Sed commodo iaculis vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum libero orci, semper sagittis ante venenatis, congue elementum ipsum. Vestibulum luctus nulla in mattis volutpat. Sed vestibulum lorem sapien, nec molestie mauris scelerisque ac. Nunc in nisi lorem. Mauris nec dui augue. Nulla vel purus ut ante condimentum euismod. Quisque feugiat laoreet magna, quis feugiat lorem rutrum sed. Phasellus dignissim mauris elit, eu volutpat elit ullamcorper congue. Ut congue fermentum velit eget aliquet.




Both of the provided methods are appropriate for paragraph separation.
However, using them simultaneously could be perceived as redundant design.
Indentation
Paragraph Spacing



GRAPHIC DESIGN *JAIL*
DEMO 10
TYPOGRAPHY RULES




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sagittis mauris. Nunc condimentum augue velit, eu rutrum magna fermentum elementum. Aenean sed nibh nunc. Phasellus imperdiet eu lorem nec hendrerit. Vivamus dolor sem, convallis ut pharetra tempus, auctor sed dolor. Morbi bibendum tincidunt neque, id vulputate mi tempor vel. Nam fringilla lorem suscipit, condimentum turpis eget, luctus velit. Proin rutrum erat ligula, quis aliquam nibh tincidunt vel. Etiam vitae velit ac quam commodo auctor sit amet id turpis.




Insufficient tracking and leading can result in text that is overwhelming and hard to read.
Vice versa, excessive tracking or leading can slow down reading speeds and create ambiguity in reading order and information coherence.
Tracking:
-5
Leading:
32