There are five primary factors involved when it comes to designing text that's comfortable to read on the web:<\/p>\n
Generally speaking, for body copy, you should use a serif or sans-serif font designed for large blocks of text. The usual suspects here are font families like Helvetica\/Arial, Times, and Georgia. Avoid fancy script font families, typefaces designed for headlines, and the like.<\/p>\n
When it comes to the size of text on the web, the biggest misstep to avoid is making text too small. Most web browsers default to a font size of Font color is important for one reason: contrast. In order for your text to be readable it needs to have a decent contrast ratio. Be wary of placing light text on a light background, or dark text on a dark background. Not everyone has perfect, or even good vision. As we age our eyes take in less and less light. Just because you can read something doesn't mean everyone can.<\/p>\n The optimal length of a line of text is a matter of some debate, but most people agree that the acceptable range is somewhere between 50-75 characters long, including spaces. You should avoid going over 80 characters long at all costs, as doing so will have a severe impact on the readability of your text. As a general rule of thumb, and depending on the font family being used, you'll want to aim for a width of Like line length, line height is another subjective area, but most people agree that something between 1.2-2 times the size of your text is best. One thing to note here is that, in CSS, the This tip barely scratches the surface of typography on the web, but it’s a start. Get these basics right and your text will be comfortable for the majority of people to read, and the more comfortable people are reading your content the better!<\/p>\n","protected":false},"excerpt":{"rendered":" A comfortable reading experience is key to engaging with your audience.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-77","post","type-post","status-publish","format-standard","hentry","category-ux"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":6,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"predecessor-version":[{"id":151,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/77\/revisions\/151"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}16px<\/code> for a reason; don't go much smaller than that.<\/p>\nFont Color<\/h4>\n
Line Length<\/h4>\n
25em<\/code> to 35em<\/code> as a good starting point, and then tweak things from there.<\/p>\nLine Height<\/h4>\n
line-height<\/code> property will take a value without a specific unit, which makes sure the line height is always relative to the size of the text in question. So, avoid line-height: 1.5em<\/code> and use line-height: 1.5<\/code> instead.<\/p>\n
\n