{"id":798,"date":"2020-01-31T08:00:09","date_gmt":"2020-01-31T08:00:09","guid":{"rendered":"https:\/\/www.regexseo.com\/blog\/?p=798"},"modified":"2020-10-28T14:58:03","modified_gmt":"2020-10-28T14:58:03","slug":"understanding-and-using-fonts","status":"publish","type":"post","link":"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/","title":{"rendered":"\ufeffUnderstanding And Using Fonts"},"content":{"rendered":"\n

Understanding And Using Fonts<\/strong><\/p>\n\n\n\n

Even the smallest details matter in the design of a website<\/a>. Typography is one part of this, and more thought than you may realize goes into it. From the size and weight, feelings it may convey, and effect on the responsiveness of a website, there are many considerations that go into choosing a typeface or making any other typographical decision. Each one of these things may make a big impact on your project. 
<\/p>\n\n\n\n\n\n\n\n

\"how<\/figure>\n\n\n\n

Fontgate<\/strong><\/p>\n\n\n\n

Still not so sure about the importance of typography? This surprising font-related scandal might change your mind. That\u2019s right. You may not realize it, but fonts have been at the center of some very high-profile scandals over the years. Probably the most prolific of the font-related scandals of our time, this incident, dubbed \u201cFontgate<\/a>\u201d, occurred in 2017 and revolved around the popular font, Calibri.
<\/p>\n\n\n\n

In 2017, the Prime Minister of Pakistan was under investigation for corruption. His daughter released an email that was meant to prove he wasn\u2019t guilty of the charges. That email was written in Calibri. However, the email supposedly dated from 2006 and Calibri wasn\u2019t widely available until 2007, leading investigators to conclude the email was forged. Eventually, the Prime Minister was removed from office and sentenced to 10 years in prison. If the email that was released had only used a different font, things might have had a very different ending. 
<\/p>\n\n\n\n

Understanding Fonts<\/strong><\/p>\n\n\n\n

Luckily, the stakes are usually not quite as high when you make a typographical decision. Still, there are many important points to consider when choosing the right font for your project. After all, you want to convey the right message to your audience and all the factors discussed below are part of being able to accomplish this. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Feeling<\/strong><\/p>\n\n\n\n

The first factor you may want to consider is the emotion<\/a> that you want to tap into through your design. Typefaces have a psychological effect that is worth considering. Companies know this and that\u2019s why certain choices are made for typefaces, especially in logos or other highly visible places. For example, the cursive script used for the Cadillac logo invites people to think of elegance and luxury, while the Lego logo is made up of bubble letters that feel playful and make it more appealing to children. 
<\/p>\n\n\n\n

The feelings evoked by a certain typeface should also be considered when designing a website or working on a similar project. Businesses usually want to convey professionalism and stability, so they might choose a well-recognized font like Calibri or Times New Roman. But more creative enterprises might want to shake things up with a font that\u2019s edgy or modern and choose something like Valencia or Century Gothic. When deciding on a font based on the feeling it evokes, consider who your audience is as well as the way you want to present yourself. For a children\u2019s website, you\u2019ll want something friendly, fun, and colorful, but also easily legible. However, if picking a font for a news website, it\u2019s best to go with a Times font or other font with serifs. 
<\/p>\n\n\n\n

\"size<\/figure>\n\n\n\n

Font Sizes and Weights<\/strong><\/p>\n\n\n\n

The size and weight of the font you choose may not seem like critical components in your design, but they actually are. Fonts have to work with other elements on the page to ensure everything displays correctly across all the various browser types. The line-height of your font will have a huge impact on your design and the readability of the page where it\u2019s displayed. Also, spacing, icons, headings, images, margins, padding, and more will be impacted by the font size, so it\u2019s not a choice that can be easily changed at a later stage in a project. You\u2019ll want to decide on the size and weight<\/a> early on. 
<\/p>\n\n\n\n

This is another choice for which you should consider your audience, because it\u2019s all about the user experience. An important factor in UX design is the typographical elements of a website, especially size and weight of the fonts. If the font is too small, it will be too difficult for some people to read. While smaller fonts may be fine for some people, you do want to ensure high readability of your content for the majority of your readers. If the content of the website will attract an older audience, larger fonts will be better to ensure poorer eyesight doesn\u2019t mean low readability. You\u2019ll also want to think about how your audience will access your website. If a majority will come from mobile devices, readability has to be considered with the smaller screens of smartphones in mind. Again, with mobile devices, bigger is usually better. <\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

Responsiveness<\/strong><\/p>\n\n\n\n

Once you\u2019ve made all these design choices, it\u2019s important that the website is actually responsive enough for people to view it. Having a site that displays correctly across all browsers, including desktop and mobile, is critical is today\u2019s competitive online marketplace. If your website doesn\u2019t display quickly and correctly, most users will just move on to the next result<\/a> in their search. So, while choosing a font that is aesthetically pleasing is important to great design, it\u2019s also critical to have a font that doesn\u2019t hurt performance and displays well universally. 
<\/p>\n\n\n\n

Custom fonts require a longer loading time because it takes extra time for the browser to load the custom font files. If using multiple custom fonts, this delay will be even greater and could significantly affect the responsiveness<\/a> of the website. So, what\u2019s the solution to this problem? Variable fonts. 
<\/p>\n\n\n\n

Variable fonts are a single file font that still allows for the weights of the characters to be adjusted. Using these fonts allows multiple styles to be shown on the page while the browser only has to load a single font file. This significantly reduces delays and improves responsiveness. Since not all browsers embrace variable fonts, some users may still not be able to get the full benefits. So, for these users, you\u2019ll also want to serve non-variable fonts to these browsers. 
<\/p>\n\n\n\n

\"Understanding<\/figure>\n\n\n\n

Applying Typography Knowledge<\/strong>
<\/p>\n\n\n\n

All users should be able to fully appreciate your website. Typography is an important part of this. By considering the feelings different typefaces may evoke, the size and weight for fonts, and the effect typographical choices have on responsiveness, your design can effectively enhance the site.


<\/p>\n\n\n\n


<\/p>\n","protected":false},"excerpt":{"rendered":"

Understanding And Using Fonts Even the smallest details matter in the design of a website. Typography is one part of […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"\n\ufeffUnderstanding And Using Fonts - Regex SEO Blog<\/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.regexseo.com\/blog\/understanding-and-using-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ufeffUnderstanding And Using Fonts - Regex SEO Blog\" \/>\n<meta property=\"og:description\" content=\"Understanding And Using Fonts Even the smallest details matter in the design of a website. Typography is one part of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Regex SEO Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-31T08:00:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-28T14:58:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh6.googleusercontent.com\/NzaJgkAZqVqmB-3u6K0tIzoG8XhascKuTQZ6wJqZpYhhv0VwDBqciQVFQU5QpCDGVtIyTFpzIK9zlv_BnOppoqicZZH18HEk1ihl39S-PNJQ-DLtOVDG_XYx_9_50AB_bpugi4V5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Ryan Cecil\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#website\",\"url\":\"https:\/\/www.regexseo.com\/blog\/\",\"name\":\"Regex SEO Blog\",\"description\":\"Your SEO, SEM and SMM Information Source\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.regexseo.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/lh6.googleusercontent.com\/NzaJgkAZqVqmB-3u6K0tIzoG8XhascKuTQZ6wJqZpYhhv0VwDBqciQVFQU5QpCDGVtIyTFpzIK9zlv_BnOppoqicZZH18HEk1ihl39S-PNJQ-DLtOVDG_XYx_9_50AB_bpugi4V5\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/#webpage\",\"url\":\"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/\",\"name\":\"\\ufeffUnderstanding And Using Fonts - Regex SEO Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/#primaryimage\"},\"datePublished\":\"2020-01-31T08:00:09+00:00\",\"dateModified\":\"2020-10-28T14:58:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/#\/schema\/person\/b220b6bf3a0cad7697764580c41eb1ae\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.regexseo.com\/blog\/understanding-and-using-fonts\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#\/schema\/person\/b220b6bf3a0cad7697764580c41eb1ae\",\"name\":\"Ryan Cecil\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/357413bbe05a5d08bb3be027bae233b7?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ryan Cecil\"},\"description\":\"SEO Marketing Manager\",\"sameAs\":[\"https:\/\/www.regexseo.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/798"}],"collection":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":3,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/798\/revisions\/1521"}],"wp:attachment":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}