{"id":345,"date":"2017-03-15T11:32:08","date_gmt":"2017-03-15T06:02:08","guid":{"rendered":"http:\/\/mandmwebsolutions.com\/blog\/?p=345"},"modified":"2018-04-24T15:20:30","modified_gmt":"2018-04-24T09:50:30","slug":"10-mistakes-web-typography-avoid-costs","status":"publish","type":"post","link":"http:\/\/mandmwebsolutions.com\/blog\/10-mistakes-web-typography-avoid-costs\/","title":{"rendered":"10 Mistakes in Web Typography to Avoid At All Costs"},"content":{"rendered":"<ul class=\"no-float-list\">\n<li>\nWeb typography is an inevitable and crucial part of creating stunning designs \u2014 and typography isn&#8217;t just about orchestrating textual styles, there is significantly more to it. However, it\u2019s common to come across blunders that many designers make when it comes to typography. Here are some of those you might want to avoid.<\/p>\n<h2>Tracking<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/tracking.jpg\" alt=\"web typography letter spacing\" width=\"769\" height=\"380\" \/><br \/>\nSimply put, tracking is the space between the letters of a word. Greater tracking means more space alongside words in a particular line. Designers make efficient utilization of tracking to fit words or phrases flawlessly along a specific line. Nevertheless, too much tracking can spoil the readability and legibility of the piece.<\/li>\n<li>\n<h2>Auto Hyphens<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/auto-hypens.jpg\" alt=\"Web Typography with CSS hyphens\" width=\"769\" height=\"380\" \/><br \/>\nMany designers use auto-hyphenation to avoid the column lines from becoming ragged. However, in auto-hyphenation most of the lines in narrow columns automatically attach hyphens, making things torturous for readers.<\/li>\n<li>\n<h2>Base Alignment<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/base-alignment.jpg\" alt=\"Text Alignment\" width=\"769\" height=\"380\" \/><br \/>\nMaintaining a consistent baseline is a great idea while aligning text vertically. It maximizes readability even when the copy is in a different size or typeface.<\/li>\n<li>\n<h2>Headline Kerning<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/headline-kerning.jpg\" alt=\"kerning your headlines\" width=\"769\" height=\"350\" \/><br \/>\nOften confused with tracking, kerning is increasing or decreasing the space between letters. Graphic designers should carefully kern titles in order to eliminate awkward spacing.<\/li>\n<li>\n<h2>Indentation<\/h2>\n<p>A visually appealing copy shouldn\u2019t wrap under the number or bullet, irrespective of whether it\u2019s a numbered or bulleted list.<\/li>\n<li>\n<h2>Leading<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/leading.jpg\" alt=\"Choose leading according to text size\" width=\"769\" height=\"350\" \/><br \/>\nLeading increases readability. An ideal guideline will be 14 pt. for the text size and 17.5 pt. for the leading \u2014 roughly 25 percent greater than the text size.<\/li>\n<li>\n<h2>Orphans &amp; Widows<\/h2>\n<p>If a paragraph ends with a line with just one word, it is termed as a widow. When a widow starts the next column, it is referred to as an orphan. Try not to create widows and orphans to ensure better readability.<\/li>\n<li>\n<h2>Ragged Edged<\/h2>\n<p>Good typography needs time. Don\u2019t just paste the copy into a column without caring for the line breaks or how ragged the copy is. A little effort to manually add soft breaks can greatly enhance the overall appearance of the design.<\/li>\n<li>\n<h2>Justified Alignment<\/h2>\n<p>&#8216;Justify&#8217; was a rage in 60&#8217;s and 70&#8217;s, used to make column structures look orderly. But that was during the prime time of print media. In short, don\u2019t use it in digital era unless required otherwise.<\/li>\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/typography-style.jpg\" alt=\"Justified text Typographic alignment\" width=\"769\" height=\"350\" \/><br \/>\nMany graphic designers prioritize visual effects in a design and set aside the typography part. This breaks the harmony and balance in the design. Typography should be planned in the early stages of the design process. This will improve the quality of the final content immensely.Hope this list will help you keep web typography mistakes at bay.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s very crucial part of creating stunning web designs. Stick to these rules to avoid these common web typography mistakes that can cause misery.<\/p>\n","protected":false},"author":1,"featured_media":351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[53,59,58,50,47,46,60,57,52,51,44,45,48,49,56,42,41,43,55,54],"class_list":["post-345","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-typography","tag-cheap-digital-marketing-agency-kolkata","tag-cheap-facebook-promotion-kolkata","tag-cheap-seo-services-kolkata","tag-digital-marketing-agencies-in-kolkata","tag-digital-marketing-agency-india","tag-digital-marketing-kolkata","tag-facebook-marketing-kolkata","tag-facebook-promotion-kolkata","tag-seo-company-in-kolkata","tag-seo-services-kolkata","tag-social-media-agency-kolkata","tag-social-media-kolkata","tag-social-media-marketing-company-in-kolkata","tag-social-media-marketing-kolkata","tag-social-media-marketing-services-in-kolkata","tag-top-digital-marketing-agencies-in-kolkata","tag-top-digital-marketing-companies-in-kolkata","tag-web-design-company-kolkata","tag-web-designer-kolkata","tag-web-development-company-kolkata"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":4,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":2569,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/345\/revisions\/2569"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/media\/351"}],"wp:attachment":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}