{"id":3561,"date":"2020-09-09T11:50:12","date_gmt":"2020-09-09T10:50:12","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=3561"},"modified":"2023-07-27T15:13:29","modified_gmt":"2023-07-27T14:13:29","slug":"overlaying-typography-on-busy-images","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/","title":{"rendered":"Overlaying typography on busy images"},"content":{"rendered":"<p>The above the fold content on any website is one of the most important features for any website. This will usually consist of a background design or image, or even a video, as well as a small amount of text, like the header or title, and a call to action button. but if you are using a vibrant and detailed image, how can you effectively overlay typography? Well, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we are Manchester&#8217;s leading <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-macro-imagery-in-web-design\/\">web design<\/a> experts. We work with companies and businesses across Manchester, and the surrounding area, including <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-wigan\/\">Wigan<\/a> and <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-southport\/\">Southport<\/a>, to provide <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/establishing-a-professional-image-in-web-design\/\">web design<\/a> solutions that can help businesses grow. As a result, we have produced this guide to everything you should know about overlaying typography on busy images.<\/p>\n<h2>What are the considerations for overlaying typography on busy images?<\/h2>\n<p>If you want to overlay your website heading or title typography, across a brightly coloured, highly detailed image, there are several things to consider. These include:<\/p>\n<ul>\n<li><strong><em>Achieving the right contrast-<\/em> <\/strong>for any typography to be easy to read and understand, on any device, the contrast between the letters and the background needs to be strong. This allows the shape of each letter and word to be easily discernible even from a quick glance at the screen. With busy background images, achieving the right level of contrast can be a challenge. You should opt for thick, chunky lettering in uppercase. And depending on the colours in the imagery, bold white or black text can be a good choice.<\/li>\n<li><strong><em>The relevance of the imagery-<\/em><\/strong> if you want your imagery to be incredibly noticeable, you should consider the relevance too. This is because the imagery will give the website users their first understanding of your company, and your brand persona. This needs to be relevant to the typography overlaid, as well as your company on the whole. It has been said that images can say a thousand words, so if your busy background imagery is relevant to the title or heading, your website users, and potential customers or clients are more likely to interpret the word correctly, even without paying full attention. This can help create a more positive user experience.<\/li>\n<li><strong><em>The amount of text-<\/em> <\/strong>your title or heading text should not be too long in general anyway, but for busy background imagery, you will need to use fewer words to say what you need. This will make it easier for your potential customers or clients to read quickly, giving them more insight into what you can offer. This does mean that if you usually position a small paragraph of text underneath the header or title, you will need to move this to a different section underneath, as it would be too difficult to read on a busy background.<\/li>\n<\/ul>\n<p>For more information or for professional web design support, get in touch with the experts today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The above the fold content on any website is one of the most important features for any website. This will usually consist of a background design or image, or even a video, as well as a small amount of text, like the header or title, and a call to action button. but if you are [&#8230;]\n","protected":false},"author":2,"featured_media":3245,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Overlaying typography on busy images - Pumpkin Web Design Manchester<\/title>\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.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Overlaying typography on busy images - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"The above the fold content on any website is one of the most important features for any website. This will usually consist of a background design or image, or even a video, as well as a small amount of text, like the header or title, and a call to action button. but if you are [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-09T10:50:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T14:13:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2020\/05\/computer-767781_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/\",\"name\":\"Overlaying typography on busy images - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2020-09-09T10:50:12+00:00\",\"dateModified\":\"2023-07-27T14:13:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Overlaying typography on busy images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Overlaying typography on busy images - Pumpkin Web Design Manchester","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.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/","og_locale":"en_GB","og_type":"article","og_title":"Overlaying typography on busy images - Pumpkin Web Design Manchester","og_description":"The above the fold content on any website is one of the most important features for any website. This will usually consist of a background design or image, or even a video, as well as a small amount of text, like the header or title, and a call to action button. but if you are [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2020-09-09T10:50:12+00:00","article_modified_time":"2023-07-27T14:13:29+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2020\/05\/computer-767781_1280.jpg","type":"image\/jpeg"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/","name":"Overlaying typography on busy images - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2020-09-09T10:50:12+00:00","dateModified":"2023-07-27T14:13:29+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/overlaying-typography-on-busy-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Overlaying typography on busy images"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3561"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=3561"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3561\/revisions"}],"predecessor-version":[{"id":12407,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3561\/revisions\/12407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/3245"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=3561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=3561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=3561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}