{"id":2941,"date":"2020-01-13T10:18:32","date_gmt":"2020-01-13T10:18:32","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=2941"},"modified":"2023-07-27T15:52:47","modified_gmt":"2023-07-27T14:52:47","slug":"using-narrow-fonts-in-web-design","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/","title":{"rendered":"Using narrow fonts in web design"},"content":{"rendered":"<p>In recent years, the trend for typography has emphasized the saying that bigger is better. From wide, bold text, to unique typography, text used, especially above the fold, is generally large and wide. But narrow fonts, otherwise known as condensed typography, can be equally as effective when used appropriately. But what is a narrow font? And what are the considerations for using narrow fonts in web design? 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\/web-design-goals-for-2020\/\">web design<\/a> professionals. We work with a variety of companies across Manchester, and the North West, including\u00a0 those in <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-blackburn\/\">Blackburn<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-chorley\/\">Chorley<\/a>, to provide high quality web design solutions. As a result, we have produced this guide to everything you should know about narrow or condensed fonts.<\/p>\n<h2>What is a narrow font?<\/h2>\n<p>Narrow font types are also known as condensed fonts. These include typefaces with characters that have narrow widths, as well as fonts with a taller character. There will also be much less space between each character.<\/p>\n<p>These characteristics of narrow fonts mean that for web design, they have developed a reputation of being cramped, difficult to read, or being crowded. But this isn&#8217;t always the case. In fact, these fonts can be stunning and visually appealing, especially when used above the fold. However, these fonts do not make for effective body text, and for the best results, you will need to consider some design tips when using this type of font.<\/p>\n<h3>Important considerations for using narrow fonts in web design<\/h3>\n<p>When using narrow fonts, you should consider:<\/p>\n<ul>\n<li><em><strong>The background design-<\/strong><\/em> for narrow fonts to stand out and be easy to read, you will need to use a background colour or design that allows each individual character to be solid and visible. Heavily patterned backgrounds can distract the eye from the text, especially within mobile web design.<\/li>\n<li><em><strong>The colour of the font-<\/strong> <\/em>the colour you use for narrow fonts will determine how easy the font is to read on all devices. Typically, contrast between dark and light colours, between the text and the background will allow the letters to stay well defined, despite the smaller space between characters. When using a dark background you will need to consider increasing the white-space around the outside of the text, to make sure that attention is drawn into the typography and not away from it.<\/li>\n<li><strong><em>The size of the font-<\/em><\/strong> although narrow fonts are so called because of the narrow structure of the characters, the font tends to be taller than others. This means that when you increase the size of the font, you can create a stunning visual effect, with tall, striking typography.<\/li>\n<li><strong><em>Combining styles-<\/em><\/strong> to give your narrow typography the edge, you can combine design styles including outline typography, bold typography, and 3D typography. This can bring a unique character to your design, and help create a stunning piece of above the fold content.<\/li>\n<\/ul>\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>In recent years, the trend for typography has emphasized the saying that bigger is better. From wide, bold text, to unique typography, text used, especially above the fold, is generally large and wide. But narrow fonts, otherwise known as condensed typography, can be equally as effective when used appropriately. But what is a narrow font? [&#8230;]\n","protected":false},"author":2,"featured_media":995,"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>Using narrow fonts in web design - 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\/using-narrow-fonts-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using narrow fonts in web design - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"In recent years, the trend for typography has emphasized the saying that bigger is better. From wide, bold text, to unique typography, text used, especially above the fold, is generally large and wide. But narrow fonts, otherwise known as condensed typography, can be equally as effective when used appropriately. But what is a narrow font? [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-13T10:18:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T14:52:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/09\/laptop-2443749_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1279\" \/>\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\/using-narrow-fonts-in-web-design\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/\",\"name\":\"Using narrow fonts in web design - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2020-01-13T10:18:32+00:00\",\"dateModified\":\"2023-07-27T14:52:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using narrow fonts in web design\"}]},{\"@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":"Using narrow fonts in web design - 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\/using-narrow-fonts-in-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"Using narrow fonts in web design - Pumpkin Web Design Manchester","og_description":"In recent years, the trend for typography has emphasized the saying that bigger is better. From wide, bold text, to unique typography, text used, especially above the fold, is generally large and wide. But narrow fonts, otherwise known as condensed typography, can be equally as effective when used appropriately. But what is a narrow font? [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2020-01-13T10:18:32+00:00","article_modified_time":"2023-07-27T14:52:47+00:00","og_image":[{"width":1920,"height":1279,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/09\/laptop-2443749_1920.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\/using-narrow-fonts-in-web-design\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/","name":"Using narrow fonts in web design - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2020-01-13T10:18:32+00:00","dateModified":"2023-07-27T14:52:47+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-narrow-fonts-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Using narrow fonts in web design"}]},{"@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\/2941"}],"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=2941"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/2941\/revisions"}],"predecessor-version":[{"id":12565,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/2941\/revisions\/12565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/995"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=2941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=2941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=2941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}