{"id":62636,"date":"2019-03-12T20:47:07","date_gmt":"2019-03-13T03:47:07","guid":{"rendered":"https:\/\/www.bruceclay.com\/eu\/?page_id=62636"},"modified":"2019-04-01T11:13:35","modified_gmt":"2019-04-01T18:13:35","slug":"type","status":"publish","type":"page","link":"https:\/\/www.bruceclay.com\/eu\/design\/type\/","title":{"rendered":"Selecting Typefaces"},"content":{"rendered":"<hr \/>\n<p>Selecting a typeface to complement your logo, to use on your website,<br \/>\nor to print company materials is not as easy as it used to be. Today&#8217;s<br \/>\nmarketer has a wide array of choices when it comes to fonts. While there<br \/>\nare script fonts that simulate handwriting, display fonts to evoke<br \/>\ncertain time periods and symbol fonts that feature no letters at sifall,<br \/>\nserif and sans-serif remain the two most common typefaces when<br \/>\nreadability is key. <\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">The Big Dogs: Serif and Sans-Serif<\/span><\/h2>\n<p>A serif is the small stroke or embellishment added to the end or<br \/>\nwithin a portion of a letter. They appear as the feet on a letter &#8216;A&#8217;,<br \/>\nor the head on a capitalized &#8216;C&#8217;. Fonts that use these embellishments<br \/>\nare called serifs. Fonts that do not are called sans-serif or<br \/>\nwithout-serifs.<\/p>\n<p>Serif and sans-serif fonts are the two most commonly used typefaces,<br \/>\nboth on the Web and in print. Serif typefaces were developed in the<br \/>\nancient Roman times, while sans-serif fonts are fairly new to the game.<br \/>\nEach is suited for its own unique purpose and comes with its own set of<br \/>\nadvantages and disadvantages. You will want to determine your specific<br \/>\ncompany goals before selecting what kind of typeface is best for you.<\/p>\n<p>Designers should keep a close eye on those tiny embellishments<br \/>\nbecause most users have strong opinions on which they find easier to<br \/>\nread. Some users find serif typefaces easier to read in long passages<br \/>\nbecause they believe the serif makes letters easier to distinguish.<br \/>\nOthers believe sans-serifs are easier to read because many sans-serif<br \/>\nfonts have very rounded geometric-looking shapes, making them appear<br \/>\nclearer.<\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">Serif Fonts<\/span><\/h2>\n<p>Serif fonts are standard for companies looking for a more &#8216;official&#8217;<br \/>\nlooking font. Printed materials like newspapers and magazines tend to<br \/>\nfavor the serif fonts; as a result, users are more accustomed to them<br \/>\nand often find them easier to read.<\/p>\n<p>Serif fonts can be classified into four subgroups:<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Old Style<\/strong> \u2014 Old Style serif fonts are characterized<br \/>\n    by their excellent readability and their subtle differences between<br \/>\n    thick and thin lines. Visually, they resemble calligraphy writing.<br \/>\n    Examples of old style typefaces include Garamond, Jenson, Goudy Old<br \/>\n    Style and Palatino.<\/li>\n<li><strong>Modern<\/strong> \u2014 Modern serif typefaces typically have<br \/>\n    extreme contrasts between thick and thin lines and are often less<br \/>\n    readable than other types of serif fonts. They tend to have thin<br \/>\n    lettering and stress vertical lines. Examples of modern style typefaces<br \/>\n    include Bodoni and Century Schoolbook.<\/li>\n<li><strong>Transitional<\/strong> \u2014 Transitional serif fonts are the<br \/>\n    most commonly used serif fonts. They are called &#8216;transitional&#8217; fonts<br \/>\n    because they combine the Old Style serif font with its Modern<br \/>\n    counterpart. Differences between thick and thin lines are more<br \/>\n    pronounced than they are in Old Style, but they are still less dramatic<br \/>\n    than they are in Modern serif fonts. Because they are so widely used,<br \/>\n    they are considered the most &#8216;neutral&#8217; serif font. The most common<br \/>\n    Transitional serif font is Times New Roman.<\/li>\n<li><strong>Slab Serif<\/strong> \u2014 Slab serif fonts are characterized by<br \/>\n    thick, full lines and have a bold, rectangular appearance. They usually<br \/>\n    have fixed widths, which means that each character takes up the same<br \/>\n    amount of space \u2013 like an old-fashioned typewriter. Examples of slab<br \/>\n    serif fonts are Clarendon, Rockwell and Courier.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">Sans-serif Fonts<\/span><\/h2>\n<p>In print, sans-serif fonts are typically, but not exclusively, used<br \/>\nin signs, headings, and other situations where continuous reading is not<br \/>\nrequired. However, on the Web, sans-serif fonts are considered the king<br \/>\nof text because serifs often make small letters less readable on a<br \/>\ncomputer monitor.<\/p>\n<p>Sans-serif typefaces are classified into four subgroups: <\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Grotesques<\/strong> \u2014 Grotesque typefaces, sometimes<br \/>\n    referred to as &#8216;Gothic&#8217;, were named for their ugly appearance. They are<br \/>\n    similar to Geometric typefaces, where their rounded strokes (like on<br \/>\n    &#8216;o&#8217;, &#8216;b&#8217; or &#8216;d&#8217;) appear as perfect circles, with all strokes being a<br \/>\n    constant width. Examples of Grotesque fonts include Grotesque or Royal<br \/>\n    Gothic.<\/li>\n<li><strong>Neo-grotesques<\/strong> \u2014 Neo-grotesque fonts are a refined<br \/>\n    version of their Grotesque cousins. They are considerably more elegant<br \/>\n    and are designed with varying styles and widths. They have virtually no<br \/>\n    distinguishable features at all. Examples of the Non-grotesque fonts<br \/>\n    include Standard, Helvetica, Arial, and Universe.<\/li>\n<li><strong>Humanist<\/strong> \u2014 Humanist typefaces are the most<br \/>\n    calligraphic looking of the sans-serif typefaces, and are considered<br \/>\n    some of the most readable.<\/li>\n<li><strong>Geometric<\/strong> \u2014 As their name would suggest, geometric<br \/>\n    typefaces are based on geometric shapes and have a more modern look.<br \/>\n    They are known for their perfectly round circle lettering. Examples of<br \/>\n    Geometric typefaces are Futura and Spartan.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">Those Other Fonts<\/span><\/h2>\n<p>When it comes to fonts, serif and sans serif aren&#8217;t your only options<br \/>\nbut they are your only options if you want your text to be readable.<br \/>\nWhile the fonts below may be used as accents or for banners, they are<br \/>\nnot recommended for lengthy body text.<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Script fonts<\/strong> \u2014 Script fonts simulate handwriting<br \/>\n    and are much harder to read than most serif and sans-serif fonts. If you<br \/>\n    have to use them, we advise using them for logos or invitations only.<br \/>\n    Examples include Coronet and Zapfino.<\/li>\n<li><strong>Blackletter fonts<\/strong> \u2014 Blackletter fonts were created<br \/>\n    with the invention of the printing press. They received their name based<br \/>\n    on their strong resemblance to blackletter calligraphy. Examples<br \/>\n    include Textualis, Rotunda, Schwabacher, and Fraktur.<\/li>\n<li><strong>Display fonts<\/strong> \u2014 Display fonts are used exclusively<br \/>\n    for decorative purposes, and are not suitable for body text. They have<br \/>\n    the most distinctive designs of all fonts, and may even incorporate<br \/>\n    pictures of objects or animals into their characters. They are usually<br \/>\n    used to depict a certain time period (holidays, historic eras, etc.) and<br \/>\n    therefore have a limited use.<\/li>\n<li><strong>Monospace fonts<\/strong> \u2014 Monospace fonts were originally<br \/>\n    developed for typewriters, and as a result use a fixed width style where<br \/>\n    every character takes up the same amount of space. These typefaces are<br \/>\n    excellent for using columned text. Examples of Monospace typefaces are<br \/>\n    Courier, Prestige Elite, and Monaco.<\/li>\n<li><strong>Symbol fonts<\/strong> \u2014 Symbol fonts contain no letters at<br \/>\n    all. Instead, they consist of symbols (faces, boats, clocks, railroad<br \/>\n    symbols, street signs, etc.). Examples include Zapf Dingbats, Sonata,<br \/>\n    and Wingdings.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">Specifying typefaces<\/span><\/h2>\n<p>Today&#8217;s site designers have an enormous advantage over the designers<br \/>\nthat came before them. They are able to specify typefaces online and<br \/>\ncontrol the visual aspect of their site. This was not always the case.<br \/>\nDesigners were once solely at the mercy of the default fonts<br \/>\nincorporated into a user&#8217;s browser. Luckily, as people became more web<br \/>\nsavvy, page tags were created with the sole purpose of specifying<br \/>\ntypefaces for Web documents. Although the tags enabled designers to<br \/>\ncreate professional-looking pages, they also created cumbersome HTML<br \/>\ncode that was often difficult to maintain and maneuver.<\/p>\n<p>That&#8217;s where Cascading Style Sheets (CSS) come in. Style sheets are<br \/>\nan alternative to page tags and are found in most desktop publishing<br \/>\nprograms, like Quark, PageMaker or Adobe InDesign. They enable sites to<br \/>\nmaintain consistency, making sure that common elements remain the same<br \/>\nfrom page to page. They also help save valuable time by allowing<br \/>\ndesigners to control the design of a page with a single edit.<\/p>\n<p>Style sheets can format your text in the following areas:<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Boldfacing\/ Italicizing\/ Underlining<\/li>\n<li>Type size<\/li>\n<li>Font<\/li>\n<li>Leading<\/li>\n<li>Kerning<\/li>\n<li>Tracking<\/li>\n<li>Color<\/li>\n<li>Alignment<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>It&#8217;s important to note that even if you specify what typeface you<br \/>\nwant to appear, the font will not show up if the user does not have that<br \/>\ntypeface installed on their computer. For this reason, it is wise to<br \/>\nspecify multiple fonts or to end your font command with a generic<br \/>\ncommand, such as &#8216;serif&#8217;. This way, if a user&#8217;s browser cannot find the<br \/>\nexact font you called for, it will at least select a font in the same<br \/>\nfamily.<\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">Web vs. Print<\/span><\/h2>\n<p>Some typefaces are more legible on screen than others. While Times<br \/>\nRoman may be considered one of the most legible on paper, when you put<br \/>\nit on screen, it often appears too small or too irregular looking.<br \/>\nScreen legibility is greatly influenced by what designers call<br \/>\n&#8216;x-height&#8217; (the height of a lowercase &#8220;x&#8221;) and the overall size of the<br \/>\ntypeface.<\/p>\n<p>Most readers prefer long blocks of text to use a serif font. You may<br \/>\nuse either a variation of the serif font or a contrasting sans serif<br \/>\nface for the display type. We suggest using a single typographic family<br \/>\nand varying size for headlines or bylines because it produces a more<br \/>\nconsistent line of text. If you do mix serif and sans serif faces, make<br \/>\nsure to select compatible fonts and try not to use more than one serif<br \/>\nand one sans serif (two fonts total) on a page. In our experience,<br \/>\nVerdana, Georgia and Comic Sans are the easiest fonts to read on a<br \/>\ncomputer screen. Their exaggerated x-heights offer excellent legibility<br \/>\nfor long text meant to be read via a computer.<\/p>\n<h2 class=\"sIFR-replaced\"><span class=\"sIFR-alternate\">Proportional vs. Non-Proportional<\/span><\/h2>\n<p>Is your text going to be placed in columns? Is it important for you<br \/>\nto have all of your text line up evenly? If so, you&#8217;ll need to pay<br \/>\nspecial attention to proportionality when selecting a typeface. The<br \/>\nproportionality of your font will greatly affect how it appears on your<br \/>\nsite. There are two kinds of fonts: proportional and non-proportional. A<br \/>\nfont that uses varying widths is a proportional font, while those that<br \/>\nuse fixed widths are known as non-proportional fonts.<\/p>\n<p>Proportional fonts are considered more professional-looking<br \/>\nand are easier to read, however, non-proportional fonts allow their<br \/>\ncharacters to line up in nice, neat columns. The layout of your site<br \/>\nwill help you determine which is best for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selecting a typeface to complement your logo, to use on your website, or to print company materials is not as easy as it used to be. Today&#8217;s marketer has a wide array of choices when it comes to fonts. While there are script fonts that simulate handwriting, display fonts to evoke certain time periods and [&hellip;]<\/p>\n","protected":false},"author":101022,"featured_media":0,"parent":62554,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"tags":[],"class_list":["post-62636","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<title>Bruce Clay EU - Web Design Typeface Considerations<\/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.bruceclay.com\/eu\/design\/type\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bruce Clay EU - Web Design Typeface Considerations\" \/>\n<meta property=\"og:description\" content=\"Selecting a typeface to complement your logo, to use on your website, or to print company materials is not as easy as it used to be. Today&#8217;s marketer has a wide array of choices when it comes to fonts. While there are script fonts that simulate handwriting, display fonts to evoke certain time periods and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bruceclay.com\/eu\/design\/type\/\" \/>\n<meta property=\"og:site_name\" content=\"Bruce Clay Europe\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-01T18:13:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/design\\\/type\\\/\",\"url\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/design\\\/type\\\/\",\"name\":\"Bruce Clay EU - Web Design Typeface Considerations\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/#website\"},\"datePublished\":\"2019-03-13T03:47:07+00:00\",\"dateModified\":\"2019-04-01T18:13:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/design\\\/type\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/design\\\/type\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/design\\\/type\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design Services\",\"item\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Selecting Typefaces\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/#website\",\"url\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/\",\"name\":\"Bruce Clay Europe\",\"description\":\"SEO and Internet Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.bruceclay.com\\\/eu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>","yoast_head_json":{"title":"Bruce Clay EU - Web Design Typeface Considerations","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.bruceclay.com\/eu\/design\/type\/","og_locale":"en_US","og_type":"article","og_title":"Bruce Clay EU - Web Design Typeface Considerations","og_description":"Selecting a typeface to complement your logo, to use on your website, or to print company materials is not as easy as it used to be. Today&#8217;s marketer has a wide array of choices when it comes to fonts. While there are script fonts that simulate handwriting, display fonts to evoke certain time periods and [&hellip;]","og_url":"https:\/\/www.bruceclay.com\/eu\/design\/type\/","og_site_name":"Bruce Clay Europe","article_modified_time":"2019-04-01T18:13:35+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bruceclay.com\/eu\/design\/type\/","url":"https:\/\/www.bruceclay.com\/eu\/design\/type\/","name":"Bruce Clay EU - Web Design Typeface Considerations","isPartOf":{"@id":"https:\/\/www.bruceclay.com\/eu\/#website"},"datePublished":"2019-03-13T03:47:07+00:00","dateModified":"2019-04-01T18:13:35+00:00","breadcrumb":{"@id":"https:\/\/www.bruceclay.com\/eu\/design\/type\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bruceclay.com\/eu\/design\/type\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bruceclay.com\/eu\/design\/type\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bruceclay.com\/eu\/"},{"@type":"ListItem","position":2,"name":"Web Design Services","item":"https:\/\/www.bruceclay.com\/eu\/design\/"},{"@type":"ListItem","position":3,"name":"Selecting Typefaces"}]},{"@type":"WebSite","@id":"https:\/\/www.bruceclay.com\/eu\/#website","url":"https:\/\/www.bruceclay.com\/eu\/","name":"Bruce Clay Europe","description":"SEO and Internet Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bruceclay.com\/eu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/pages\/62636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/users\/101022"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/comments?post=62636"}],"version-history":[{"count":0,"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/pages\/62636\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/pages\/62554"}],"wp:attachment":[{"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/media?parent=62636"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bruceclay.com\/eu\/wp-json\/wp\/v2\/tags?post=62636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}