Establish Hierarchy with Size and Scale<\/h2>\n
<\/a><\/p>\n Readable design starts with multiple levels of text. Establishing a hierarchy of thoughts will help users move through the text. <\/p>\n Larger sizes are a visual cue that tells users to read a certain thing first because it is most important. Most users\u2019 eyes will naturally move from larger elements to smaller ones creating a nice visual flow.<\/p>\n Make the most of H2, H3 and H4 tags in the design and create a consistent scale for subheads that can be used to break up large blocks of text. <\/p>\n Creating a scale with consistent text placements and sizes makes it even easier for users to navigate the text. This is true for both long-form content and even short content on homepages, such as Narrative, above. <\/p>\n Note how the homepage has four distinct levels of text in the hero area. There\u2019s a big headline in color, with a short snippet above. Then the body content has a style with an additional bold line for emphasis. Most users will see the words in this order: Headline, bold text, body text, headline snippet due to the weights, size and scale of lettering. <\/p>\n <\/a><\/p>\n While a fun novelty typeface or elaborate script might be a lot of fun to design with, it isn\u2019t always the best choice for the end user.<\/p>\n Readable typefaces are the most likely to actually get read. <\/p>\n Here\u2019s why:<\/p>\n Characteristics of a readable typeface include:<\/p>\n Looking at those characteristics you can see that almost any type category probably includes a readable option. You don\u2019t have to stick solely to serifs or sans serifs; a mix of other typefaces is actually good. Just make sure to test our words you plan to use in that typeface to ensure they are easy to read. <\/p>\n <\/a><\/p>\n Stacking content goes back to hierarchy. But with an extra element \u2013 think about text and non-text elements when stacking content. <\/p>\n If the user sees a text block and an image on the screen, the image is almost always the thing that gets his or her attention first, making it important to stack elements in a way that will help users move through them from the image to the text. <\/p>\n Alzheimers New Zealand, above, uses stacking to get users to the main headline. Note how the text is positioned in the center of the image with three people. Your eye goes to the faces first but then drops to the subtly animated circle with text inside. Then they eye moves to the smaller, more secondary block of text.<\/p>\n And here\u2019s the thing: All of this happened so quickly when you first saw the image that you might not have even thought about it. Most users scan the entire screen in the same manner when deciding whether to interact with the content or not. <\/p>\n <\/a><\/p>\n Really want to make sure users see your content? Integrate text and visuals in a meaningful way. Create a hero image that uses an interesting visual, unusual color pairing or combination of animation and lettering to make users pause.<\/p>\n The mistake that designers sometimes make is separating every element into its own box or space. Play up visuals by integrating them with other elements for a more immersive design. <\/p>\n Octavo Designs, above, has a homepage that you can\u2019t avoid being drawn into. For starters, there\u2019s a very funny-looking cow on a bright colored background. The text is very much a part of the image. (It actually touches the cow\u2019s horns at the top.) This combination of visuals and text draws users into the content, making them want more. <\/p>\n <\/a><\/p>\n When planning the design, think in short bursts. Each page or screen should focus on a single thought and simple, easy to read blocks of text.<\/p>\n Structure and organize thoughts for users in a way that encourages reading:<\/p>\n <\/a><\/p>\n Every design should have a focal point. The focal point is the part of the design that almost every user will see first. It\u2019s often highly visual or stands in stark contrast to other elements on the screen.<\/p>\n In the example above, Abingworth uses a bright pink blob as the focal point. It draws attention because of color and curiosity (what is it?) and because it contrasts with the white, open space on the other side of the screen.<\/p>\n The focal point of the design should be your best image, illustration or animation and relate to key messaging. The focal point should establish what the design is about and why users should care. Because this is the first place users will look, it sets the tone for how (and if) they will interact with the design. <\/p>\n Creating content that users will actually read is more than just text on the screen. It\u2019s a combination of writing and visual elements that draw users in, help them get a glimpse of what the design is about and then decide to keep interacting with it.<\/p>\n While it sounds like a lot, this all happens in a matter of milliseconds. There\u2019s research that says most users have the attention span of a goldfish<\/a> \u2013 8 seconds \u2013 make the most of that time with content that\u2019s easy to read. <\/p>\n Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":" Designing content is more than just making something look great. You have to create a design that people will actually read, and help them engage with the content. Sometimes, that\u2019s easier said than done. People generally have short attention spans, and you shouldn\u2019t expect them to digest every word on the screen. But you can… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":44342,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-44341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t![\"content](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/02\/narrative.jpg?w=900\")
<\/div>\n<\/p>\nPick Readable Typefaces<\/h2>\n
![\"content](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/02\/camp-cody.jpg?w=900\")
<\/div>\n<\/p>\n\n
\n
Stack Content for People Who Scan<\/h2>\n
![\"content](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/02\/alz-nz.jpg?w=900\")
<\/div>\n<\/p>\nPlay Up Visuals<\/h2>\n
![\"content](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/02\/octavo.jpg?w=900\")
<\/div>\n<\/p>\nKeep Lines (And Thoughts) Short<\/h2>\n
![\"content](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/02\/max-choc.jpg?w=900\")
<\/div>\n<\/p>\n\n
Create a Focal Point<\/h2>\n
![\"content](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/02\/abing.jpg?w=900\")
<\/div>\n<\/p>\nConclusion<\/h2>\n