{"id":517,"date":"2019-07-31T09:00:20","date_gmt":"2019-07-31T09:00:20","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=517"},"modified":"2022-06-24T12:10:33","modified_gmt":"2022-06-24T10:10:33","slug":"how-to-choose-website-fonts","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-choose-website-fonts\/","title":{"rendered":"How to Choose the Right Font for Your Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Designing a website is an intense process that entails a lot of hard work. There\u2019s so much to think about, from the <a href=\"https:\/\/qodeinteractive.com\/magazine\/customize-wordpress-website-colors\/\">color scheme<\/a> and logo to the navigation, layout, and text design. But perhaps the trickiest part of designing a website is getting all these different elements to fit into one logical, compact and well-balanced unity.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Website fonts are an important part of that unity. Once they get an overall impression of your website, your visitors will inevitably focus on the text in order to find out more about you and your brand. That\u2019s why, when trying to glue these design pieces together, it\u2019s especially important to <strong>pay attention to your font design<\/strong>. There are tons of <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-for-downloading-fonts-2020\/\">places where you can find quality fonts<\/a>, but you need to make sure that the <strong>typeface you choose is readable, clean and just on the right side of striking<\/strong>, without diverting too much attention from the rest of the design.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-1.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-1.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-1-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-1-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Picking the right font is key to having a good website design, whether your site is a portfolio, a blog, a web store, or a huge corporation website. To help you figure out which font type best aligns with your brand essence, we\u2019ve tried to make this process a bit simpler for you. Here are some things you should consider when choosing the ideal font for your website.[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596057724674{padding-top: 68px !important;}&#8221;][vc_column][vc_column_text el_class=&#8221;qodef-h5&#8243;]<\/p>\n<h2 class=\"qodef-h4\">1. Start from the basics<\/h2>\n<p>[\/vc_column_text][vc_column_text]When it comes to website fonts, there are so many things to look into, and it can get real overwhelming real fast. That\u2019s why it\u2019s best to start from the very basics before going any further.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Should you go for Serif or Sans:<\/strong> this is one of the elementary font category classifications. Based on the Roman alphabet, <strong>Serif typefaces are characterized by a decorative stroke<\/strong> located at the end of the vertical and horizontal strokes of the letters.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text css=&#8221;.vc_custom_1562673680390{padding-left: 25px !important;}&#8221;]Some of the most famous serif fonts include <a href=\"https:\/\/www.fonts.com\/font\/monotype\/times-new-roman\" target=\"_blank\" rel=\"noopener noreferrer\">Times New Roman<\/a> and <a href=\"https:\/\/www.fonts.com\/search\/all-fonts?ShowAllFonts=All&amp;searchtext=georgia\" target=\"_blank\" rel=\"noopener noreferrer\">Georgia<\/a>. <strong>The Times New Roman font<\/strong> in particular falls under the category of <strong>classic web-safe fonts<\/strong>. Overall, you can\u2019t go wrong with choosing default font types such as this one, as they are usually easy to read and have been around for a long time, so lots of internet users are used to them. Still, if you\u2019d rather try a bolder approach, then we recommend checking out fonts such as <a href=\"https:\/\/www.schick-toikka.com\/noe-display\" target=\"_blank\" rel=\"noopener noreferrer\">Noe Display<\/a>, <a href=\"https:\/\/www.myfonts.com\/fonts\/garagefonts\/freight-text-pro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Freight Text<\/a> or the <a href=\"https:\/\/commercialtype.com\/catalog\/portrait\/portrait\" target=\"_blank\" rel=\"noopener noreferrer\">Portrait<\/a> collection. Of course, there are always Google\u2019s serif typefaces that you can use for free, such as <a href=\"https:\/\/fonts.google.com\/specimen\/Playfair+Display\" target=\"_blank\" rel=\"noopener noreferrer\">Playfair Display<\/a>, <a href=\"https:\/\/fonts.google.com\/specimen\/Cormorant+Garamond\" target=\"_blank\" rel=\"noopener noreferrer\">Cormorant Garamond<\/a>, or <a href=\"https:\/\/fonts.google.com\/specimen\/Crimson+Text\" target=\"_blank\" rel=\"noopener noreferrer\">Crimson Text<\/a>, to name a few.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/attika.mikado-themes.com\/restaurant-home\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-2.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-2-300x222.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-2-620x458.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/attika-elegant-theme-for-fine-dining-restaurants\/\" rel=\"noopener noreferrer\">Attika theme<\/a> with Playfair Display font[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/etienne.elated-themes.com\/business-home\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-3.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-3.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-3-300x220.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-3-620x454.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/etienne-refined-multipurpose-wordpress-theme\/\" rel=\"noopener noreferrer\">Etienne theme<\/a> with Cormorant Garamond font[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/bard.mikado-themes.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-4.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-4.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-4-300x222.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-4-620x458.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/bard-a-theatre-and-performing-arts-theme\/\" rel=\"noopener noreferrer\">Bard theme<\/a> with Crimson Text font[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text css=&#8221;.vc_custom_1562673684909{padding-left: 25px !important;}&#8221;]<strong>Sans typefaces have no serifs on the letters<\/strong> (the word \u201csans\u201d stands for \u201cwithout\u201d in French), and they are known for having a more <strong>modern and clean design<\/strong> compared to their serif counterparts. <a href=\"https:\/\/www.fonts.com\/font\/linotype\/helvetica\" target=\"_blank\" rel=\"noopener noreferrer\">Helvetica<\/a>, <a href=\"https:\/\/www.fonts.com\/font\/microsoft-corporation\/tahoma\" target=\"_blank\" rel=\"noopener noreferrer\">Tahoma<\/a>, <a href=\"https:\/\/www.fonts.com\/font\/microsoft-corporation\/verdana\" target=\"_blank\" rel=\"noopener noreferrer\">Verdana<\/a>, <a href=\"https:\/\/www.fonts.com\/font\/linotype\/futura\" target=\"_blank\" rel=\"noopener noreferrer\">Futura<\/a>, and <a href=\"https:\/\/www.fonts.com\/font\/monotype\/arial\" target=\"_blank\" rel=\"noopener noreferrer\">Arial<\/a> are all examples of widely used sans serif fonts. As for free fonts, we suggest trying out the following for the Google Fonts free font library: <a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"noopener noreferrer\">Roboto<\/a>, <a href=\"https:\/\/fonts.google.com\/specimen\/Source+Sans+Pro\" target=\"_blank\" rel=\"noopener noreferrer\">Source Sans Pro<\/a>, <a href=\"https:\/\/fonts.google.com\/specimen\/Poppins\" target=\"_blank\" rel=\"noopener noreferrer\">Poppins<\/a>, <a href=\"https:\/\/fonts.google.com\/specimen\/Heebo\" target=\"_blank\" rel=\"noopener noreferrer\">Heebo<\/a>, or <a href=\"https:\/\/fonts.google.com\/specimen\/Montserrat\" target=\"_blank\" rel=\"noopener noreferrer\">Montserrat<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/foton.mikado-themes.com\/saas-home\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-5.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-5.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-5-300x222.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-5-620x458.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/foton-a-multi-concept-software-and-app-landing-theme\/\" rel=\"noopener noreferrer\">Foton theme<\/a> with Poppins font[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/quart.mikado-themes.com\/design-studio\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-6.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-6.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-6-300x222.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-6-620x458.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/quart-modern-design-agency\/\" rel=\"noopener noreferrer\">Quart theme<\/a> with Heebo font[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/mane.elated-themes.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-7.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-7.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-7-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-7-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/mane-a-modern-portfolio-theme-for-creatives\/\" rel=\"noopener noreferrer\">Mane theme<\/a> with Montserrat font[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text css=&#8221;.vc_custom_1607594698672{padding-left: 25px !important;}&#8221;]What type you will choose largely depends on your target audience and the mood that you want to evoke with your font design. Generally, <strong>serif typefaces are used with the intention to bring forward a more formal and elegant tone<\/strong>, which is why you will often find them among many <a href=\"https:\/\/qodeinteractive.com\/magazine\/elegant-fonts\/\">elegant fonts<\/a>. Though they can also be used to give an alternative look to your web page, and can often be found in magazines and within the fashion industry.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text css=&#8221;.vc_custom_1562673695119{padding-left: 25px !important;}&#8221;]<b>Sans fonts<\/b>, on the other hand, <b>most often symbolize minimalism, simplicity and straightforwardness<\/b>. However, one of the great characteristics of sans serif fonts is that <b>they are highly flexible<\/b>. For example, if paired with an old style typeface, a sans serif can take on its qualities, in turn giving off a more traditional vibe.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Kerning, leading and tracking:<\/strong> these three design elements can be vital when figuring out the look of your typeface. These methods have the purpose of <b>modifying the space between letters <\/b>in order to get a visually pleasing and easily readable font. Kerning stands for the space between two letters, leading represents the space between lines of text, and tracking (or letter-spacing) is the spacing between groups of letters.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Contrast:<\/strong> in typographic web design, contrast is used to<b> emphasize different chunks of text in a multitude of ways<\/b>, all with the purpose of making the important parts stand out more. Different contrast types include size, weight (making certain parts of the text appear bold), color, form (for example, <a href=\"https:\/\/aalto.edge-themes.com\/\" target=\"_blank\" rel=\"noopener\">capital<\/a> or lowercase letters) and structure (different forms mixed with different typefaces).<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Alignment:<\/strong> figuring out how the text will be placed on the page is also an element that can contribute greatly to your font design. You can<b> align your text to the left, right, or center<\/b>. In addition, you can choose whether you want the text to be ragged on the right or justified.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text css=&#8221;.vc_custom_1562247212151{padding-left: 26px !important;}&#8221;]Generally speaking, <b>the text aligned to the left is the easiest to read<\/b>.\u00a0 Fully justified text is considered more formal as it lines up evenly on both sides of the margin, while ragged text has a reputation of being more informal and friendly. You can set up your alignment depending on your audience type, their expectations, and whether you have to think about the space limitations or not. In case you have to make full use of the writing space, then, by all means, go for the justified alignment. And if you want your perfectly aligned text to appear less dull, you can always divide different parts of the text by inserting some visuals or a subheading in between. If you do this, make sure to wrap your text around the images to give your page a cleaner and organized look.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text css=&#8221;.vc_custom_1562247220348{padding-left: 26px !important;}&#8221;]When aligning your text, you should also <b>pay attention to<\/b> <b>Line Length<\/b> (the distance between the left and right side of the text block). The most effective way of measuring line length is by average characters per line. <b>The optimal line length is from 45 to 80 characters<\/b>, including spaces.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596547954870{padding-top: 80px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">2. Your typographic choices should mirror your design purpose<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are so many different typefaces on the web to choose from, and your font choices are practically limitless. While this is good in itself, it can easily overcomplicate things if you don\u2019t have at least some idea of what you want (or don\u2019t want). That\u2019s why it\u2019s important to <b>carefully consider the purpose of your web design, as well as the type of audience that you want to attract<\/b>. Then, see if the styling of that typeface you\u2019re considering corresponds with the general message that you want to convey to your visitors.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/burst.mikado-themes.com\/burst\/agency-home\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-8.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-8.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-8-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-8-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/burst-a-bold-and-vibrant-wordpress-theme\/\">Burst Theme<\/a> with Lato font[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After figuring out these core principles, here are some additional questions to ask yourself when choosing your font design:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">What is the nature of your brand? For example, is it serious or laid-back?<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">If your website revolves around a project, what type of project is it? Is it short-term or long-term? There is a possibility that a long-term project (for example, a magazine or a newsletter) could have more requirements than a short-term one, and may need a change of typefaces as the time progresses. It\u2019s best to pick a large font family with different variants and weights to have different options at your disposal, just in case. If you\u2019re working on a short-term project (like a product launch or a marketing campaign), then sticking to simple font versions without additional weight might just be enough.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Do you want to aim for practicality and functionality and go for one of the web-safe fonts, or do you want to stand out from the rest and <a href=\"https:\/\/www.fonts.com\/\" target=\"_blank\" rel=\"noopener\">try out a more unique font choice<\/a>?<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Will your website be more visually driven (graphics such as photos, animations, and video), or will it mostly consist of the large portions of text that provide plenty of information about your brand or products?<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]Asking yourself these questions should at least help you get a general idea of what you want, so when you stumble upon a font, deciding whether it works for you or not will be at least a little bit easier.[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596057745024{padding-top: 68px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">3. Choose the number of typefaces and rank them by importance<\/h2>\n<p>[\/vc_column_text][vc_column_text]In typography, too much of a good thing can easily turn bad. When picking the number of typefaces for your website, our suggestion is to <b>aim for no more than three different fonts<\/b>. Allow us to elaborate on that in more detail.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Primary font:<\/strong> as this will be the most visible font on your page, your primary font should be most <strong>synonymous with your brand identity<\/strong>. Primary fonts are mostly used for larger text, such as headings.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;11px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/demo.select-themes.com\/capri1\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-9.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-9.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-9-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-9-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text css=&#8221;.vc_custom_1567065789989{padding-left: 25px !important;}&#8221;]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/capri-a-hot-multi-purpose-theme\/\">Capri Theme<\/a> with Montserrat font[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text css=&#8221;.vc_custom_1622446196679{padding-left: 25px !important;}&#8221;]If possible, make sure that your brand logo contains hints of your primary font as well. You can go for more daring font types when choosing your primary font, although, at the end of the day, it all depends on your brand. We suggest looking into fonts like <a href=\"https:\/\/www.dafontfree.io\/voga-font-family\/\" target=\"_blank\" rel=\"noopener noreferrer\">Voga<\/a>, <a href=\"https:\/\/befonts.com\/ikaros-font.html\" target=\"_blank\" rel=\"noopener noreferrer\">Ikaros<\/a> or <a href=\"https:\/\/www.behance.net\/gallery\/26829249\/FREE-QONTRA-Font\" target=\"_blank\" rel=\"noopener noreferrer\">Qontra<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Secondary font: you should use this font for your body copy<\/strong>. This means that any article or description on your page is going to be in your secondary font. Above all else, your secondary font should be <strong>clean and easy to read<\/strong>. Font types like <a href=\"https:\/\/www.fonts.com\/font\/linotype\/futura\" target=\"_blank\" rel=\"noopener\">Futura<\/a>, <a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"noopener\">Roboto<\/a> or <a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/font-list\/verdana\" target=\"_blank\" rel=\"noopener\">Verdana<\/a> could all be a solid font choice for your body text.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Tertiary (accent) font:<\/strong> if you ask us, this one is <strong>entirely optional<\/strong>. <a href=\"https:\/\/www.fontspace.com\/category\/accents\" target=\"_blank\" rel=\"noopener\">Accent fonts<\/a> can be used for specific website elements such as a call-to-action or a navigation menu. They should be prominent enough in order to quickly catch the eye of your visitors. But keep in mind that pairing two fonts is hard enough, without throwing a third into the mix. However, if you\u2019re up for some experimenting and you want to try using a tertiary font after all, there are also many <a href=\"https:\/\/qodeinteractive.com\/magazine\/experimental-typefaces\/\">experimental typefaces<\/a> you can check out for some additional inspiration.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;11px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/aoki.select-themes.com\/freelancer-home\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-10.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-10.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-10-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-10-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/aoki-creative-design-agency-theme\/\">Aoki Theme<\/a> with Montserrat font[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With all this being said, every brand has its own requirements, so nothing is really set in stone. Just remember that <b>the more fonts you have, the harder it will be to harmonize them all together<\/b>. So, if possible, try to keep your font number to a minimum unless it\u2019s absolutely necessary to do otherwise.[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596057751921{padding-top: 68px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">4. Be mindful of the load times<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this day and age, nobody has time nor patience for slow sites. That\u2019s why if a font takes too long to load, it might not be the best solution for you. Here are some things you can do to prevent a font from slowing down the speed of your website.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Stick to a limited number of typefaces<\/strong>. We\u2019ve already mentioned why having too many fonts might not be the best idea. Loading speed is another reason why you shouldn\u2019t go overboard with your font number.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Only pick the styles that you need.<\/strong> In this way, the size of your fonts will be minimal, and less size equals less loading time. For example, when downloading a font, choose only normal and bold style.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Don\u2019t download the languages you won\u2019t use.<\/strong> If you only require one or a few different languages for a particular font, then make sure to deselect the ones you\u2019re certain you won\u2019t have a need for when downloading it.<\/span>        <\/div>\n            <\/li>\n<\/ul>[\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596057761531{padding-top: 32px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">5. Think about font combinations<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are multiple things to consider when pairing different fonts. After all, each font has its own distinct character \u2013 some fonts appear more serious, some look more refined, while others have a more quirky and spontaneous feel to them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/arrosa.select-themes.com\/vertical-slider\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-11.jpg\" class=\"attachment-full size-full\" alt=\"How to Choose the Right Font for Your Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-11.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-11-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/06\/How-to-Choose-the-Right-Font-for-Your-Website-Gallery-11-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;8px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/arrosa-creative-multipurpose-wordpress-theme\/\">Arrosa Theme<\/a> with Montserrat and\u00a0Tuesday Night fonts[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<b>Mixing two fonts with different \u201cmoods\u201d might actually do the trick<\/b> \u2013 they do say that opposites attract, and this rule applies to typefaces as well. <b>Try combining blunt font types with more neutral, subdued ones.<\/b> The former should be used for headlines, while the latter works best for body copy.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another good combination you can rarely go wrong with is to <b>mix serifs and sans serifs<\/b>. The pairing of fonts is all about creating contrast, and serifs and sans serifs are more than sufficient to create a subtle but distinct difference when paired up.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In case you\u2019re still uncertain what fonts to combine together, you can always choose a safe route and<b> use two fonts that share the same font family<\/b>, as they\u2019re made to go together in the first place. Moreover, pairing fonts from the same font family can help you bring a sense of consistency, thus making the process of designing a website a lot easier. You can create contrast among the same font families by changing things like size, case, or weight, by mixing regulars with italics, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you need help with pairing fonts, there are several great online tools that can help you out, like <a href=\"https:\/\/fontpair.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">fontpair<\/a>. Alternatively, you can always check out <a href=\"https:\/\/qodeinteractive.com\/magazine\/google-font-combinations\/\">Google font combinations<\/a> to learn which fonts from the Google collection go exceptionally well together.[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596057768955{padding-top: 68px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">6. Font Inspiration and other useful tools<\/h2>\n<p>[\/vc_column_text][vc_column_text]In case you need additional assistance during your font search, there are plenty of places on the web that can provide you with <a href=\"https:\/\/dribbble.com\/shots\/6335571-Typography-Inspiration-April-2019-Font-Selection\" target=\"_blank\" rel=\"noopener noreferrer\">font inspiration<\/a>. For example, <a href=\"https:\/\/www.typewolf.com\/resources\" target=\"_blank\" rel=\"noopener noreferrer\">Typewolf<\/a> is a site where you can find tons of font recommendations and lists that can spark your creativity or, at the very least, show you the route in which you can take your font design. Also, there is an entire collection of typography resources waiting for you \u2013 from books and <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-identify-a-font\/\">tools that can help you identify a font<\/a> to useful typography blogs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another great site for getting you started is <a href=\"http:\/\/fontsinuse.com\" target=\"_blank\" rel=\"noopener noreferrer\">Fonts In Use<\/a>. Here you can browse through fonts that many designers use in the real world, as well as on the web.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Say that you stumble into a piece of design online that features a really cool font. You can easily picture this font on your webpage, but you don\u2019t know its name, or how to find it on your own. Luckily, <strong>there are helpful online tools<\/strong> for these situations that can identify fonts for you. <a href=\"https:\/\/www.myfonts.com\/WhatTheFont\/\" target=\"_blank\" rel=\"noopener noreferrer\">WhatTheFont<\/a> is one such font identifier that is powered by one of the largest font collections on the web. All you need to do is upload a picture with your desired font and crop it, and the results will show you the name of the font in question.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/fontface.ninja\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fontface Ninja<\/a> is a free browser extension that allows you to inspect, try and\/or buy any font you\u2019re interested in. When you hover over a font, not only can you learn the name of the font you are inspecting, but you also get info about its size, kerning, line height and color.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, if you really can\u2019t be bothered to find website fonts on your own and just want to see how certain fonts would look like on your webpage as soon as possible, you\u2019ll be happy to hear that many <a href=\"https:\/\/qodeinteractive.com\/theme-style\/modern-wordpress-themes\/\">modern WordPress themes<\/a> come with <strong>ready-made fonts<\/strong>. These fonts have been carefully picked and paired by designers, so there are bound to be some that will appeal to you and fit your idea of how typography on your web page should look like.[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1596057774700{padding-top: 68px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Even though the web is bursting with gorgeous-looking graphic design elements such as motion graphics, illustration, and photography, the majority of online information can still be found in text. In fact, <b>typography makes up about 90% of website content<\/b>. Thus, the importance of font design must not be overlooked as it can have a direct influence on the user experience and, as such, can make or break your website. To assure your website is legible enough for the full reading comfort of your users, <b>always test how your fonts appear on different devices and screen sizes<\/b>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When figuring out what font design works best for you, try to think of your design purpose first. Once you determine the general direction in which you want to go, pick the number of typefaces you want to have, and then start browsing the web for possible font combinations. There are plenty of choices available, so you\u2019re bound to find something that works well for you. And once you find the perfect one, <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-custom-wordpress-fonts\/\">adding a font to your WordPress website<\/a> is a piece.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>There\u2019s so much to consider when choosing website fonts \u2013 from figuring out which typeface best reflects your brand essence, to determining which fonts to combine together. Doing this is no easy task, but we\u2019ve got some helpful tips for you<\/p>\n","protected":false},"author":2,"featured_media":6741,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4,54,37],"class_list":["post-517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-tips","tag-typography","tag-ui"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/6741"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}