{"id":22058,"date":"2021-11-12T17:08:41","date_gmt":"2021-11-12T17:08:41","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/working-with-typography-for-print-web\/"},"modified":"2021-11-12T17:08:41","modified_gmt":"2021-11-12T17:08:41","slug":"working-with-typography-for-print-web","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/","title":{"rendered":"Working with typography for print & web"},"content":{"rendered":"
\n

When designing for a brand you will always have to consider how to choose a font which will work for both print & web. So what would help guide you to your choice of font that work\u2019s for both?<\/p>\n\n\n\n

Whats the difference between web & print fonts<\/h2>\n\n\n\n

The main difference between fonts for web and print are that web fonts are optimised to be read on screen. This is to do with the resolution of the screen. Screen resolution is usually 100 pixels\/dots per inch (dpi) whereas print would be normally be around 300dpi.<\/p>\n\n\n\n

Traditional fonts designed for prints were designed with ink traps, spaces inside and some letter from the same family would be different depending on the font size.<\/p>\n\n\n\n

Points to consider when choosing<\/h3>\n\n\n\n

1. Size<\/strong><\/h4>\n\n\n\n

Standard sizes for print would typically range between 10 \u2013 12 points, as compared to screen where font sizes would range from 15 \u2013 25 pixels. This is all good for some fonts, but there are certain fonts which at these sizes can appear to be a different size due to the way they are designed.<\/p>\n\n\n\n

\"Working<\/a><\/figure>\n\n\n\n

When this is the case experimenting with different sizes to achieve the best for print can mean that sizes can go below or above 10-12 points. Most printed material such as magazines, newspapers etc can be seen printed below 12 points.<\/p>\n\n\n\n

When considering sizing for screen, fonts can be made bigger due to distance to the screen, but considerations should also be taken for mobile devices which are held at arms length.<\/p>\n\n\n\n

2 Font Characteristics<\/h4>\n\n\n\n

Serif font or Sans Serif Font? When designing for print, Serif or Sans Serif fonts both work for body copy, but when considering a font for body text on a computer a Sans Serif font can work better over a Sans Serif.<\/p>\n\n\n\n

This can also depend on the font chosen, what characteristics does the font have, so the choice of font for a large amount of text needs to be considered carefully.<\/p>\n\n\n\n

Some print fonts will have webfont variation, but even if they don\u2019t some fonts will still work for both or there are fonts which are similar.<\/p>\n\n\n\n

Google fonts similar to Helvetica<\/strong><\/h2>\n\n\n\n
\"Working<\/a><\/figure>\n\n\n\n

Garamond is a good example of where an alternative web version of a font would be more suitable. Using Georgia as a replacement for Garamond on screen can help with eligibility due to the more defined characteristics of Georgia compared to Garamond.<\/p>\n\n\n\n

\"Working<\/a><\/figure>\n\n\n\n

Finding the best fonts for web & print.<\/strong><\/h2>\n\n\n\n

With the number of fonts available to download from sources such as google fonts, dafont.com and font squirrel which work for both print and web can become quite daunting for designers, especially with a majority of the fonts being dreadful. But there are some good examples which can be found. Below is an example of some of the most popular available on Google Fonts.<\/p>\n\n\n\n

Open Sans<\/strong><\/strong><\/h3>\n\n\n\n

Open sans is a sans serif typeface which was designed to be optimised for web and mobile devices, with its clear legibility it can also be used in print with the same effects.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

PT Sans<\/strong><\/h3>\n\n\n\n

PT Sans (Public Type) is an open source font and is one of the most popular fonts used on the web.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Raleway<\/strong><\/h3>\n\n\n\n

Raleway designed to be clear and legible, popular on many websites and available in 18 different styles.<\/p>\n\n\n\n

\"Working<\/a><\/figure>\n\n\n\n

Montserrat<\/strong><\/h3>\n\n\n\n

Montserrat is now becoming one of the most popular fonts for websites and also in print. With its clean design make it not only easy to read but also one of the more attractive fonts available.<\/p>\n\n\n\n

\"Working<\/a><\/figure>\n\n\n\n

Roboto<\/strong><\/h3>\n\n\n\n

Roboto is not only a very legible font to use, but is the most popular downloaded font on Google fonts, with a staggering 6.3 trillion views since it was created. It comes in 12 styles.<\/p>\n\n\n\n

\"Working<\/a><\/figure>\n\n\n\n

PT Serif<\/h3>\n\n\n\n

Another PT (Public Type) font. Designed to be used alongside it other family member PT Sans can become a good Sans Serif Alternative for web & Print.<\/p>\n\n\n\n

\"Working<\/a><\/figure>\n\n\n\n

With many fonts available for use in both situations, this insight hopefully will give some help when choosing fonts for your next project for cross platform designs. As with all type & design decisions, suitability and aesthetics always need to be considered but other considerations need to be adopted when developing your designs for use with digital and traditional design.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"When designing for a brand you will always have to consider how to choose a font which will work for both print & web. So what would help guide you to your choice of font that work\u2019s for both? Whats the difference between web & print fonts The main difference between fonts for web and […]","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-22058","post","type-post","status-publish","format-standard","hentry"],"acf":[],"yoast_head":"\nWorking with typography for print & web - Fifteen<\/title>\n<meta name=\"description\" content=\"Meta description basically means it's a short description for a webpage. It's called a meta tag within the HTML code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with typography for print & web\" \/>\n<meta property=\"og:description\" content=\"Meta description basically means it's a short description for a webpage. It's called a meta tag within the HTML code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-12T17:08:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2021\/11\/typergraphy-for-web-and-print-1.jpeg\" \/>\n<meta name=\"author\" content=\"Kyle Lindsay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kyle Lindsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Working with typography for print & web - Fifteen","description":"Meta description basically means it's a short description for a webpage. It's called a meta tag within the HTML code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/","og_locale":"en_GB","og_type":"article","og_title":"Working with typography for print & web","og_description":"Meta description basically means it's a short description for a webpage. It's called a meta tag within the HTML code.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2021-11-12T17:08:41+00:00","og_image":[{"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2021\/11\/typergraphy-for-web-and-print-1.jpeg","type":"","width":"","height":""}],"author":"Kyle Lindsay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kyle Lindsay","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/"},"author":{"name":"Kyle Lindsay","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"headline":"Working with typography for print & web","datePublished":"2021-11-12T17:08:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/"},"wordCount":711,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2021\/11\/typergraphy-for-web-and-print-1.jpeg","inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/","name":"Working with typography for print & web - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2021\/11\/typergraphy-for-web-and-print-1.jpeg","datePublished":"2021-11-12T17:08:41+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"description":"Meta description basically means it's a short description for a webpage. It's called a meta tag within the HTML code.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2021\/11\/typergraphy-for-web-and-print-1.jpeg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2021\/11\/typergraphy-for-web-and-print-1.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/working-with-typography-for-print-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"Working with typography for print & web"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714","name":"Kyle Lindsay","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","caption":"Kyle Lindsay"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/kyle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/22058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=22058"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/22058\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=22058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=22058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=22058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}