{"id":385,"date":"2010-08-13T17:08:04","date_gmt":"2010-08-13T17:08:04","guid":{"rendered":"http:\/\/localhost\/p2hblog\/?p=385"},"modified":"2025-02-26T11:00:05","modified_gmt":"2025-02-26T11:00:05","slug":"what-is-web-typography","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/what-is-web-typography.html","title":{"rendered":"What is Web Typography?"},"content":{"rendered":"<p>Wikipedia defines <a title=\"Wikipedia.org - Web Typography\" href=\"https:\/\/en.wikipedia.org\/wiki\/Web_typography\" target=\"_blank\" rel=\"noopener\">Web typography<\/a> as anything that &#8220;refers to the use of fonts on the Web.&#8221; The article explains that web browsers controlled the look of fonts and styles until 1995, when Netscape introduced the &lt;font&gt; tag in HTML 2. Now most browsers automatically download fonts and designers have greater freedom to design with type on the web.<\/p>\n<p>Every designer has his or her own method for integrating text in to websites. Some designers do it with their end users in mind and make their text easy to read. Other designers opt to use small text or unreadable fonts because of other design constraints. Personally I would rather not include text than have it unreadable. Learning the following web typography tips and integrating them into your sites you will be able to layout your copy like an expert. All of the tips are very easy to use and easier to implement. The hardest part is remembering to use them.<!--more--><\/p>\n<p>We will cover:<\/p>\n<ul>\n<li>Letter spacing<\/li>\n<li>Line heights<\/li>\n<li>Right and left quotation marks<\/li>\n<li>When to use a serif font vs. a sans serif font<\/li>\n<\/ul>\n<h2>Letter spacing<\/h2>\n<p>If letters do not have enough space between you cannot read them easily. This makes your reader&#8217;s job much more difficult. I find that letter spacing should be one pixel and possibly two pixels for larger fonts. You can see two examples of bad letter spacing below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-387 size-full\" title=\"typo1\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo1.png\" alt=\"web-typography\" width=\"620\" height=\"155\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo1.png 620w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo1-300x75.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>The first one does not have enough space between its letters and the second one shows letters that are spaced out too far. Reading either of these sentences is not easy on the eyes. It requires more thought and occasionally squinting. Take a look at what a properly spaced line looks like below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-388 size-full\" title=\"typo2\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo2.png\" alt=\"web-typography\" width=\"510\" height=\"76\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo2.png 510w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo2-300x45.png 300w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/p>\n<p>There are lots of tutorials out there on how to change character spacing in CSS; here&#8217;s a good one from Hypergurl.<\/p>\n<h2>Line Heights<\/h2>\n<p>Just like letter spacing line heights are also very important in web typography. Line heights refer to the space in between lines in your text. I find that line height should always be set two to four pixels larger than the font size itself. This gives your readers eyes enough room to distinguish one line from the next. If someone has bad eyesight smaller line heights could be devastating. You will see two examples below of bad line heights.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-389 size-full\" title=\"typo3\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo3.png\" alt=\"web-typography\" width=\"234\" height=\"81\" \/><img decoding=\"async\" class=\"aligncenter wp-image-390 size-full\" title=\"typo4\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo4.png\" alt=\"web-typography\" width=\"471\" height=\"201\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo4.png 471w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo4-300x128.png 300w\" sizes=\"(max-width: 471px) 100vw, 471px\" \/><\/p>\n<p>The top example shows a line height that is too small. The bottom example has line heights that are too big. Both examples are bad for readability. This is how it should look:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-391 size-full\" title=\"typo5\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo5.png\" alt=\"web-typography\" width=\"303\" height=\"144\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo5.png 303w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo5-300x143.png 300w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/p>\n<p>The tutorial from Hypergurl, above, also discusses line spacing.<\/p>\n<h2>Right and left quotation marks<\/h2>\n<p>Are you still using out-dated quotation marks? Are your left and right quotation marks the same? Quotation marks were only consolidated for typing devices due to lack of keyboard space. For aesthetic purposes you should use right and left quotation marks. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Quotation_mark_glyphs\" target=\"_blank\" rel=\"noopener\">Wikipedia<\/a> refers to them as \u201csmart quotes\u201d and straight multi-use quotation marks are considered \u201cdumb quotes\u201d in the quote below:<\/p>\n<blockquote><p>Curved and straight quotes are also sometimes referred to as smart quotes (\u201c\u201d) and dumb quotes (&#8220;&#8221;) respectively; these names are in reference to the name of a function found in several word processors that automatically converts straight quotes typed by the user into curved quotes. This function, known as &#8220;educating quotes&#8221;, was developed for systems which lack separate open- and close-quote keyboard keys.<\/p><\/blockquote>\n<p>Let us take a look at straight and curved quotation marks:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-392 size-full\" title=\"typo7\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo7.png\" alt=\"web-typography\" width=\"404\" height=\"25\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo7.png 404w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo7-300x19.png 300w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/><img decoding=\"async\" class=\"aligncenter wp-image-393 size-full\" title=\"typo8\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo8.png\" alt=\"web-typography\" width=\"398\" height=\"44\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo8.png 398w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo8-300x33.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/p>\n<p>When we use curved quotes, it not only looks better it also manages to draw the readers attention into the quote. Curved quotes are preferred in print work as well. The HTML code for left quote is <strong>&amp;ldquo;<\/strong>, and the right quote is <strong>&amp;rdquo;<\/strong><\/p>\n<h2>When to use a serif font vs. a sans serif font<\/h2>\n<p>You may not know the difference between sans serif and a serif font. Serif fonts have accents (which often look like dots) added to the strokes of the characters. Sans serif is the opposite and each of their characters are clean.<\/p>\n<p>You can see examples of the two font types below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-386 size-full\" title=\"typo9\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo9.png\" alt=\"web-typography\" width=\"550\" height=\"180\" srcset=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo9.png 550w, https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2010\/08\/13170804\/typo9-300x98.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>A Serif font is often used for a headline or title, as those fonts guide the eyes as you read the sentence. Text in a Serif font also often looks fancier and more attractive. Sans serif fonts are easier to read and therefore most often used for text in the body of an article on the web.<\/p>\n<h2>Conclusion<\/h2>\n<p>If you read this entire article chances are that you are looking for a way to improve your typography on the web. If you apply each of the four tips we have shown you to your text you will be better off for it. Your readers will be able to read your text easier in a short amount of time. They will thank you for it by returning to read your content again and again.<\/p>\n<p>If you have additional web typography tips we would love to hear about them in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wikipedia defines Web typography as anything that &#8220;refers to the use of fonts on the Web.&#8221; The article explains that web browsers controlled the look of fonts and styles until 1995, when Netscape introduced the &lt;font&gt; tag in HTML 2. Now most browsers automatically download fonts and designers have greater&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[751,739],"tags":[825,786],"class_list":["post-385","post","type-post","status-publish","format-standard","hentry","category-digital-design-services","category-guide","tag-html-css","tag-ui-design"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"GetDevDone Team","author_link":"https:\/\/getdevdone.com\/blog\/author\/admin-p2h"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/digital-design-services\" class=\"advgb-post-tax-term\">Digital design services<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/guide\" class=\"advgb-post-tax-term\">Guide<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Digital design services<\/span>","<span class=\"advgb-post-tax-term\">Guide<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/guide\" class=\"advgb-post-tax-term\">HTML &amp; CSS<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/guide\" class=\"advgb-post-tax-term\">UI design<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">HTML &amp; CSS<\/span>","<span class=\"advgb-post-tax-term\">UI design<\/span>"]}},"comment_count":"1","relative_dates":{"created":"Posted 16 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on August 13, 2010","modified":"Updated on February 26, 2025"},"absolute_dates_time":{"created":"Posted on August 13, 2010 5:08 pm","modified":"Updated on February 26, 2025 11:00 am"},"featured_img_caption":"","series_order":"","featured_image_urls":null,"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/c67d54df2c6849e5b7af3126c36fe55b10f9d6a14b227d14b35af6c027abb195?s=96&d=mm&r=g","author_position":null,"reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"the-dos-and-donts-of-great-and-effective-blog-design","name":"The Do's and Don'ts of Great (and Effective) Blog Design"},"next_post":{"slug":"5-good-and-bad-logo-redesigns","name":"3 Good and 5 Bad Logo Redesigns"},"related_posts":["turn-your-wordpress-site-into-a-powerful-e-commerce-store-with-woocommerce","choosing-a-payment-gateway-for-your-shopify-store-5-essential-tips","why-a-custom-shopify-theme-is-the-best-option-for-image-reliant-businesses"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=385"}],"version-history":[{"count":7,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/385\/revisions"}],"predecessor-version":[{"id":24796,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/385\/revisions\/24796"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}