Graphic Design Theory #5 - Typography Part 1 (Legibility and Readability)

every graphic designer needs to be good at handling text in their work there are hundreds of rules and considerations to achieve effective typography however none of those matter without first establishing good legibility and readability in your designs in this video we will analyze some great editorial work to learn how professionals balance style and functionality in their typography [Music] you probably heard of legibility or readability or maybe both of them and it is quite difficult to differentiate these two terms or objectives that you as a designer really have to pay attention to legibility is probably the one that you heard most about and the one that most likely makes sense it basically means whether you can read something or not so this is more about whether you're physically able to make sense of some text on a design now there's usually a clear difference between handling body copy which you would have in books and magazines and that's the main textual elements so you could have the intro paragraph or entry paragraph sometimes larger in text size and then you would have the rest of the copy written in smaller size text but then you also have headings titles or chapter titles which are usually much larger in size and formatted differently so to be clear all of these elements will need to be legible so the viewer will have to be able to read them but how you present them really depends on their part that they're playing with in the design while body copy is a longer text that has to be easy to read titles could be always a little bit more playful because they are shorter and they are larger in size so there's more room to play around with them so for instance here on the left side we have a large number which is marking the chapter overlaid by the actual chapter title does this affect the legibility i would say it doesn't because we have a clear contrast between the colors so we have black and red on top of each other very easy to distinguish and also we have a huge contrast in size and even the font used so while the text in black is using a normal sensory font like helvetica we have a condensed boulder font used for the numbers in the background to assure legibility on the right side we have the most standard and most comfortable set of colors used so white backdrop and the black text if you ever use the opposite white text on black background or bright text on darker background that we would refer to as inverted text and it can still work however it is the same colors they are just inverted the design is still going to suffer a bit in legibility so i wouldn't recommend using it for longer set of text like for a book or a magazine while for a poster like this one it could work quite nicely and it can easily stand out and also set the mood or the tone of the design so why would this poster use black background well for some reason whenever we think of jazz it usually is played at nighttime so it has already that connotation in our mind and especially because the text also refers to this as an all-night entertainment it really makes sense but also don't forget on the piano which is the most commonly used instrument for jazz you would have the black and white keys which could of course be represented with white background and black text on top of it however most pianos the actual instruments that the jazz musicians use are black so having a black background and a lot of negative space sets that natural proportion of the instrument and the keyboard on it so understanding all of that really starts to help us to appreciate the composition and the choice of colors on this poster so now that we start to understand how to work with legibility here's a few examples that challenges the concept of making text legible so for instance we have this poster void where we can still read the title and all of those subtitles are secondary information but it is challenging the viewer we have to work a little bit harder to put together everything and we almost have to turn the page around to be able to read things correctly so this composition or layout definitely affects the legibility it reduces it but since there's not a lot of text to go through it is not going to be annoying instead it will be a little bit more of a playful fun exercise to go through the information on the poster or flyer there can be also examples and reason why a designer would choose to mess with characters or fonts like here for instance there's lots of ways that the viewer is challenged to be able to read so the main text is not only divided into several lines but also there's no clear alignment so we have rugged edge on both left and right but more importantly we have even each of the characters broken up or divided into small pieces so all of these are working against legibility however there are also things that are supporting it the size first of all of the text that's used here but also the contrast from the background so black is obviously the highest contrast color used in this design that really stands out from the background even though there again are some confusing colorful shapes behind it and this just goes back to the main and most important lesson to learn once you understand what are the rules in this case that you need to assure legibility the next step is always to start pushing those boundaries so understanding the rules will give you the confidence to push the limits and really challenge your viewers without making your designs annoying or confusing that doesn't mean that you always have to do designs like these again we have very low legibility on this text here or this one where we have certain characters really stretched out not to mention these type of illustrations where the text is not really meant to be read is used more as a graphical element to recreate a portrait or again to convey a certain message but besides using text in these more unconventional ways most of the time you want to really retain legibility so you want to have a very good legibility like in user interface design it has to be very clear the message where users can find certain features and the text also has to set a good hierarchy whether it is black text on by background or inverted text as we've seen before and you as a designer has to think of legibility as a slider that you can adjust so for certain elements like the names of a pizza in this case legibility can be lowered a bit to add that flavor and style to the names while the ingredients and the additional copy below and especially call to action elements like buttons should have much higher legibility achieve mainly in this case by using fonts that are just generally much easier to read before we continue i just wanted to let you know about our creative membership program for a small monthly fee you get access to over 200 hours of adobe certified online training courses master all the tools and skills needed to become a professional graphic designer or illustrator as a pro member you will get mentoring from me and my team access to webinars student forum and creative briefs to help you build an outstanding portfolio pro members can also download the project files for all of our youtube tutorials sign up at yessimodesigner.com memberships and start your free trial today and now let's head back to the tutorial so it's time to talk about readability which is the other way of thinking about how you should present type in your designs and the main difference here compared to legibility is whether your viewer or reader would want to read your designs or the textual elements within your designs so it's not about being able to read it which was legibility it's about whether they would want to read it or not so it is more about their desire whether they want to read your copy or not or how much fun or enjoyment they get out of it while reading it so how can you improve readability you can think of readability as how user-friendly your type is or the ergonomics of your typography and the most effective way to improve readability of your designs especially if you have a lot of text is to have as many entry points as possible we will talk about this later but essentially it is to have these clear points where readers can start reading and on this spread we have many areas where they can start their reading we also have a clear heading or title here we also have another little section there we also have these huge numbers helping us to jump through the text so we can clearly follow the original intended direction or root of the copy and all of these pointers and divisions in the copy helps us to digest the information and go through it without too much effort and the fact that the order of the text here is a little bit all over the place so it's jumping between the pages is not that big of a problem because it actually helps to move the viewer's eye from left side to the right and then back again so it almost gives a little bit of exercise or challenge without again being annoying and that is also a fine balance you have to play with as a designer so you don't want your design to be too boring and have a lot of text in one place but you also don't want your designs to be too challenging to read so here is an interesting example we have a lot of text in this block in the center that's our body copy but we have an entry point which is a drop cap and we also have some pool codes which are breaking up the text and then the main title and intro paragraph here in the center since this is a newspaper we can expect a lot of copy that needs to be placed on a single page and even though we have this big block of text with six columns it is still quite fun thanks to that illustration that is divided by the text and is appearing on the top and the bottom and also by having these negative spaces or pauses within the design that again just helps to create a little bit of playfulness and leave some breathing space for the reader but there is also another interesting detail here the title of the magazine is actually almost completely or at least half of it is hidden behind the illustration and this is also something that you commonly see in magazine covers as well and it relies on the fact that the reader is familiar with the newspaper and they would recognize the title even if it's not complete so again here this is actually blocking legibility we are just physically unable to read that part of the text but in terms of readability this is setting a fun challenge and again can attract the reader's attention because it leaves a blank space here which our mind will have to fill in so while this title in terms of legibility is really weak in terms of readability it is actually quite good because it peaks the interest of the reader and lastly i'm going to show you three examples where both legibility and readability are bad and i have to warn you it might hurt your eyes so here are these examples first we have a signage which is used for london buses i don't think this sign is out anymore i'm sure it's been fixed by transport for london but when it was photographed it clearly had some issues both affecting legibility and readability so the biggest problem is the bad tracking or kerning which caused these characters to get too close to each other in certain places almost turning some of these into ligatures unintentionally ligatures are font pairs which normally are individual characters within a font but we also have really bad separation of important details like stop m divided into two lines or london bridge again divided into two which even with a small measure or line width like here should still be kept together in the same line now what's even worse is that i believe there's even a grammatical error here so this apostrophe i think is a mistake because it was supposed to say roots 43 and 141 but currently it would mean that these numbers belong to this root grammatical mistakes or typos like this would affect mainly the readability because it causes confusion and the reader might actually misinterpret some information and in case of a sign that is about getting from one place to another can be quite a serious problem now the other two examples that we have here are equally bad in terms of legibility and readability as well we have very bad design choices in terms of what colors are used on top of each other what type of fonts are used for certain information the kerning and tracking and alignment of things the unnecessary variety of fonts piled into one design and i could go on i'm sure you can see all of these and i believe for everyone to be able to improve it is just as important to look at these bad examples and analyze them as spending time and looking at good examples that we've seen earlier in this video thanks a lot for watching like and share this video if you enjoyed it don't forget to subscribe and hit the bell icon to get notified whenever we release new videos click on the link on my right and start your membership today to get access to over 200 hours of training courses and personal mentoring by me and my team of creative professionals have fun learning guys and i will see you in the next one [Music]

Channel: Yes I'm a Designer

Views: 17,861

Keywords: Graphic Design Theory #5 - Typography Part 1 (Legibility and Readability), Graphic design theory, #5 - Typography Part 1, readability as a design principle, readability, design principles of graphic design, design theory, graphic design tips, graphic design, master readability in graphic design, graphic design readability, graphic design basics, legibility in design examples, readability in graphic design, graphic design principles, legibility vs readability

Id: 49qd15-q6lU

Length: 15min 7sec (907 seconds)

Published: Mon Aug 09 2021