{"id":3012,"date":"2020-02-10T14:01:25","date_gmt":"2020-02-10T14:01:25","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=3012"},"modified":"2023-07-27T15:48:23","modified_gmt":"2023-07-27T14:48:23","slug":"combining-outline-and-filled-text","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/","title":{"rendered":"Combining outline and filled text"},"content":{"rendered":"<p>When it comes to designing an effective website, the typography is essential. From the landing page hero area, to the banner advertisements and general page content, the right text and font is essential for attracting attention, and making sure that your website is easy to read and understand. Some specific types of fonts can be incredibly effective, especially for the headings and titles. And you can even combine the style of the fonts, to create an unusual, striking effect. This includes combining outline and filled text for web-page headings. So how can you use this effectively to create a professional result? Well, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we build websites specifically tailored to the requirements of companies and businesses across Manchester and the North West, including <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-blackburn\/\">Blackburn<\/a> and <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-chorley\/\">Chorley.<\/a> We provide the perfect <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/persuasive-web-design-to-increase-sales\/\">web design<\/a> solutions for clients in all areas of business and industry. As a result, we have produced this guide to how to successfully use both filled and outline text together.<\/p>\n<h2>What should you consider when combining outline and filled text?<\/h2>\n<p>Outline fonts are incredibly unusual, and can easily grab attention from your users. By using these as headings in the above the fold content area, you can allow the background design and colour to fill the lettering, piquing the interest of any potential customers. But by combining this with text that is filled, the design effect can be transformed. To use this to create a professional finish, and an effect that suits your overall web design, you could consider:<\/p>\n<ul>\n<li>Stacking the text and alternating from outline to filled effects<\/li>\n<li>Using a sans serif font<\/li>\n<li>Choosing the right colours<\/li>\n<\/ul>\n<h3>Stacking the text<\/h3>\n<p>Stacked text involves positioning each word directly below or above the others, in a way that creates a column effect. This can be a great way to draw the attention of your website users to the text, and to get your message across. Especially above the fold. To increase this dramatic effect, you could consider alternating between filled text, and outline text. This will create an area of contrast, which is sure to attract attention, bu it will also direct the eye down through the block of text.<\/p>\n<h3>Using a sans serif font<\/h3>\n<p>A sans serif font is a type of typography that does not have flourishes or flicks on the end. Instead, each letter is well defined, and there is a small amount of space between each letter. Using an outline font that is sans serif can ensure that the text is easy to read and understand on all screen sizes and devices. As the text combines both filled fonts and outline fonts, a sans-serif typography style can create a more professional result.<\/p>\n<h3>Choosing the right colours<\/h3>\n<p>Outline fonts need to use colour to create an outline that stands out and contrasts with the background, while filled fonts should be filled with an appropriate colour, that suits the background and the overall design. This is another aspect that can help to create a professional finish, which is so important when combining different textual effects.<\/p>\n<p>For more information or advice, or for high quality, professional web design solutions, 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>When it comes to designing an effective website, the typography is essential. From the landing page hero area, to the banner advertisements and general page content, the right text and font is essential for attracting attention, and making sure that your website is easy to read and understand. Some specific types of fonts can be [&#8230;]\n","protected":false},"author":2,"featured_media":2407,"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>Combining outline and filled text - 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\/combining-outline-and-filled-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Combining outline and filled text - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"When it comes to designing an effective website, the typography is essential. From the landing page hero area, to the banner advertisements and general page content, the right text and font is essential for attracting attention, and making sure that your website is easy to read and understand. Some specific types of fonts can be [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-10T14:01:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T14:48:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/07\/open-70835_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\/combining-outline-and-filled-text\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/\",\"name\":\"Combining outline and filled text - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2020-02-10T14:01:25+00:00\",\"dateModified\":\"2023-07-27T14:48:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Combining outline and filled text\"}]},{\"@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":"Combining outline and filled text - 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\/combining-outline-and-filled-text\/","og_locale":"en_GB","og_type":"article","og_title":"Combining outline and filled text - Pumpkin Web Design Manchester","og_description":"When it comes to designing an effective website, the typography is essential. From the landing page hero area, to the banner advertisements and general page content, the right text and font is essential for attracting attention, and making sure that your website is easy to read and understand. Some specific types of fonts can be [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2020-02-10T14:01:25+00:00","article_modified_time":"2023-07-27T14:48:23+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/07\/open-70835_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\/combining-outline-and-filled-text\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/","name":"Combining outline and filled text - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2020-02-10T14:01:25+00:00","dateModified":"2023-07-27T14:48:23+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/combining-outline-and-filled-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Combining outline and filled text"}]},{"@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\/3012"}],"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=3012"}],"version-history":[{"count":1,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3012\/revisions"}],"predecessor-version":[{"id":12540,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3012\/revisions\/12540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/2407"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=3012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=3012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=3012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}