was also important. I absolutely love this font!”. The best practices and strategy on using the combination of two fonts can help you achieve readability, engagement, contrast and visual hierarchy for your brand. And “Bold” is a large, filled font. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their decad… When choosing fonts, remember that you should aim to pair no more than two or three for each website you design. Brandon Grotesque. The popular websites using this font family are NBC, Movie Pilot, etc. Originally designed by Google to be an Android system font, this neo-grotesque sans serif is now used on websites like YouTube, Flipkart, and Vice.com. According to FontReach, Arial is the #1 font used on the web, with over 604,000 websites currently using it. It’s also quite versatile and includes characters for small caps, fractions, alternate glyphs, ligatures and so on. While everyone read the same passage; they did not all see it in the same typography. While it certainly gets the job done in terms of helping website visitors read through a lot of content, the unique brush strokes at the character end give this particular font a more artistic vibe than other serifs. Google has stated this font was designed to be “optimized for legibility across print, web and mobile interfaces.”. Have the menu categories in Cinzel black, the meal titles in Cinzel bold, and the description of the item written in Raleway regular. The font is used by websites such as Freelancer, Grammarly, Alexa, Starbucks, Buffer, and more. This wouldn’t work well for more formal or traditional brands. 5. For the ones looking for a rather signature style cursive script font, Cervanttis is the best possible choice. The san-serif geometric font is most suitable for fun, youthful brands or those that are marketing to children. Although the designer of FreeLine suggests that this font would work well on fashion websites and branding, the outlined lettering and open-air style applied to the characters gives this font a futuristic feel. Merriweather is extremely popular for online use, because it was designed to be read on screens. Originally, Raleway was designed to be a single font, thin in weight. How important can a website’s font really be? Open Sans is a sans-serif font designed by Steve Matteson, a prominent American typeface designer, and commissioned by Google. This lively and beautiful sans serif font was designed specifically for fast reading, so it does really well in smaller body text on the web. It also comes with a complete alpha (uppercase only) character set, so you can use this single font to style your alphanumeric logos, display text and header tags. It is mandatory to procure user consent prior to running these cookies on your website. Here’s something to consider: different website fonts can change the reader’s perception of a particular topic. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. 41. If you have a website you want to bring a flare of classic, old-world flair to, this would be a beautiful choice. Lato is a Google Font that was originally designed for a corporate client. Does the font need to be professional? Another thing to look for is whether the font family includes number symbols that are related to what you’ll use them for (e.g. Bandera is very unique looking font & the best thing about this font is that It has a very classic design which nonetheless doesn’t feel dated, and comes in six different weights. Didone Room Numbers is a numeric font, styled in a similar fashion as Clement Numbers (i.e. If this sounds like your current design, definitely consider using this combination to add a touch of professionalism to your content. You don’t want to have the same font everywhere on your site; that’s too boring. They can also be used to tame an otherwise unique-looking website design. Join 3,020,965 subscribers who stay ahead of the pack. EB Garamond is an elegant update of the classic Garamond font. Portico is a huge font family with 27 styles. I ALWAYS have trouble picking the fonts for my sites. Just like words you place on your website, your font also matters as it communicates a message. Nathan is a vintage script font with a hand-lettered look. So, if you want some vintage-style icons to place around or within your text, this family should cover it. Web-safe fonts consist of specific type families that are popular and pre-installed across a majority of computer systems — the well-known Time News Roman or Arial families, for example. Let’s say that the more traditional styles of the serifs and sans serifs here doesn’t really fit the unique style of your brand. Hillenberg is a font family with 10 different vintage styles. Published on January 21, 2019 - Written By: Quick Sprout Editorial. However, it’s actually an upgrade from the original Calendas. They’re based on simple geometric lines and patterns. Welcome to MyFonts, the #1 place to download great @font-face webfonts and desktop fonts: classics (Baskerville, Futura, Garamond) alongside hot new fonts (Brice, Moneta,Novera). For a more elegant look, Lora is placed among the best WordPress fonts for modern websites. The typographer rescued this font from a type specimen book from the early 1800s. Lora regular is legible, so you could consider using it for longer text. If folks are reading for long periods of time, be nice: don’t make them strain their eyes. Notice how some of the characters use irregular angles (like the “3”) or use an alternate design (like the “$” symbol). In addition, they tie in with your brand to deliver just the right message. Comic Sans font ranked lowest for weighted agreement, and ranked high for weighted disagreement. By entering your email, you agree to our Terms of Service and Privacy Policy. Google, Facebook, and Amazon are just some of the popular websites that use Arial. Oswald is a great font for headlines no matter the font-weight or use of caps. The font also comes in 2 different styles featuring regular and outline designs. But make sure you pick fonts that go well together. On the other hand, the dramatic bold and heavy styles could be used to create titles and logos that resemble old film noir marquees. Clement Numbers is a number and punctuation font set with just one style. The 10 Best Font Pairings for Your Website Maybe you are the type to create inspiration boards of the whimsical fonts you fall in love with on the Internet. Using too much of this on the screen is unappealing and challenging to read. Another factor we considered was the weight of the font. They break with classical and traditional styles. As for when you can use this, this would work great for small or family-owned businesses that are located in rural or rustic settings, like camping grounds, lakeside retreats, B&Bs, etc. EXO 2 font achieves the enhanced legibility by eliminating many of the fine intricacies that exist in the original version of Exo. Decide if the fonts are for your blog, homepage, landing page, product description, or navigation menu. If you really want to be unique, you can swap the two and use Raleway for headings and Cinzel for the body text. It’s easy to call any fonts that are popular today “modern” fonts, but that’s not really what we mean. It depends on the theme and overall message that you’re going for on your website. Interestingly enough, if you swap the two and use Montserrat as the header, the persona changes to something that feels futuristic or techy. #9. While this typeface does have a techy, machine-like feel to it, the wide-open characters also give it a friendly touch. This website uses cookies to improve your experience. In all honesty, you could use many of the serif and sans serif fonts we’ve already looked at to style your title or header text. The first thing you need to do is determine what type of content the font will be used for. It also has an alternate style that turns this neo-grotesque font into a geometric sans serif. There are actually a number of Noir fonts out there. If you’re looking to do something creative with your titles or logos, this font has a lot to offer. He included a passage from a book that claimed we live in an ear of unprecedented safety, and followed the passage up with two questions: As it turns out, Morris didn’t care about anyone’s opinion. Lato is a good font for websites because it’s so readable, and comes with plenty of different styles. I’m glad you brought this up! While it’s easy to read thanks to the geometric lines and curves that make up the letters, there are unique twists throughout. I’m picturing a website visitor scrolling down your home screen, seeing an image on the left side of the page and this font combination on the right. Over the past decade, however, this display font family has been expanded to include nine weights, ranging from thin to black. So this was an insanely useful guide. Bw Modelica is a font family that comes with a total of 64 typefaces. I created this guide to help you do just that. You obviously don’t want people to have that impression of your website. Your email address will not be published. We have a lot more where that came from! Your email address will not be published. Now, vintage covers a broad number of eras, so there are a lot of directions to go with this. This family of all-capped character sets seems to offer a style for everyone: vintage, grunge, western, futuristic, artistic, contemporary and more. Another reason you might opt for a serif over other fonts is accessibility. It includes fonts in 4 widths featuring 8 weights of each font as well as italics. If you’re looking for some safe choices, here are the best number fonts to start with: BoldPrice is a number and currency font designed with a vintage edge. You’ll also want to consider the type of business you have, as well as the audience you’re targeting. Lora is a contemporary serif font. Cervanttis is actually a bundle of signature-style fonts that can be used for free, but for commercial use, there is a price tag of $11. This best font style for the website is suited for small text or paragraphs. It’s complemented really by a font that’s a bit more traditional, like Raleway. Lato is used on websites like Goodreads, WebMD, and Merriam-Webster. Lazer 84 calls to mind a very specific time period: The 80s. You also have the option to opt-out of these cookies. Typeface: Sans Serif. 29. It’s actually part of a family of six fonts that include the following: Because of this variety, you can pair and even layer two of these styles together in the header or titling of your website. When they continue scrolling, the next image will be on the right, and the text will be on the left. Best Cursive Fonts – Cervanttis Font. It shares many of the same characteristics as the Avenger: It’s tall, strong and instantly recognizable. Aqua Grotesque is a reimagining of Futura, a font that was originally designed back in the 1920s and was based on the simplicity and functionality of Bauhaus. You’ve got lots of different options here to consider for your website design. This is the font that will be most associated with your brand, even if it’s not the most commonly used one throughout the site. Believe it or not, something as simple as choosing the right font can have a major impact on conversion. There are plenty of platforms for finding free fonts, but Google Fonts is my favorite. Merriweather light is modern, tasteful, and appealing. It’s not because cursive fonts are difficult to read (at least, not the ones you’ll find below). We'll assume you're ok with this, but you can opt-out if you wish. And it annoys the crap out of me. Some fonts, even though looking amazing, maybe very vigorous which divert the attention of the audience. 18px– a better font size to start with. PT Serif was originally created for websites with heavy Russian readerships, which is why a full Cyrillic character set is available within this font family. He enjoys spicy food, reading books and listening to elevator music. Table of Contents. The key here is to make sure that the text has plenty of space to breathe. But opting out of some of these cookies may affect your browsing experience. Talking about best blog fonts, it is always necessary to choose a significant blog font that will impact your website look.. There hasn’t been any reason to worry about ‘web-safe’ fonts for the past 5 or 6 years. Good font pairing can create harmony, fluidity, and most importantly — coherence, to your website. I think the semi-bold header just ads a bit more punch than the regular weight of Open Sans, but it’s fine if you go with that option as well. The header of this screenshot is Open Sans semi-bold. Compare the two graphs. Thanks to the balance it strikes between gentle curves and sturdy design, this font gives off a powerful yet welcoming vibe. In addition, it comes with old-style features, similar to Calendas Plus. Mission Script is a warm and friendly font with its playful brushstrokes and, yet, very down-to-earth styling. For creating fonts, FontStruct offers a full-fledged font-building tool. This versatile choice will work well for nearly any website in 2021. Baywatch. Keep it simple. Plus, website fonts affect the overall appearance of your site. In 2013, the designer of Exo decided that it was time to give the futuristic-looking font a facelift, and thus, Exo 2 was born. The one you see above looks like something out of the Old West. Since both fonts are so legible, you can use it for text in short-form, as well as long-form content such as blog posts. Arial. He just wanted to know if the font could influence their answers. As such, it works really well in the paragraph text of news and entertainment websites, like FOX News, The Kitchn, and Urban Dictionary. These fonts would look nice in logos or on websites for diners or restaurants, consignment shops, and other businesses with an old school vibe. Considering the rich architectural history of the city and the unique beauty of its narrow streets (much like the narrow characters of the font), it’s clear why the typographer found inspiration in it. Or do you have some room to be a bit unique? By looking at the sample above, you’d think that Calendas Plus is nothing more than a basic serif font. The main difference between them is that Exo 2 isn’t as stretched out and has softer edges, which improves the readability of the font. They’re minimally designed at their core. The one you see here is a regular weight, solid typeface. The font family comes with 128 different typefaces, covering light, heavy, roman, outline, condensed, and other stylings. This font combination works best for shorter text on your website. When you have short, punchy headers that need to grab a visitor’s attention, these outline fonts will certainly get the job done. Narrowing down the choices and finding the ones that will fit your website the best, can be challenging, but, luckily, this guide will aid you in the process. Among the various font styles out there, decorative fonts are a great choice if you’re looking to make an impact. Fonts play a major role in shaping your brand language and website design. Download here; Drawing on the trend for 1930s-style geometric typefaces with some added Scandinavian flavour, Santiago Orozco's distinctive slab serif brings a distinctive 'typewriter' feel to its sans serif counterpart, and this free web font is perhaps best suited to display use. That same segment appears to be the tail in the letter “g” as well. Required fields are marked *. (slightly, moderately, very). When picking fonts for any project, it’s best to get a font family as they come in multiple variations of the same font. Based on this data, Morris was able to conclude that fonts can influence the way people perceive information. When it’s followed up with text written in Lato, the pairing feels trustworthy. It feels like the kind of font you’d use to invite people to a local mom-and-pop shop or eatery that’s been around forever. Because outlined fonts somewhat degrade the readability of text (since you’ve essentially taken the guts out of the characters), you’ll only want to use these in larger header or title texts. TimeBurner is an interesting font. Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. Its condensed nature helps it grab attention and pop, but it also makes for a pleasantly unique text as your main body’s font. The outline font, in particular, looks like it belongs in a Star Wars movie, though you could probably use it for businesses with a retro vibe. With fonts designed specifically for this purpose, you know they’re going to look good in larger sizes and will have a more dramatic flair to them. You could use Roboto as the header, and Open Sans for the paragraph. However, this pairing is perfect for a product title and product description, especially for ecommerce shops in the fashion industry. Yet, the font is worth the investment. Download Font. 18 of them are variations on the rustic and grunge style of this font. There are so many components to a killer website design. Roboto and Roboto Condensed To help you figure out which font type best aligns with your brand essence, we’ve tried to make this process a bit simpler for you. This may cause issues with loading speeds depending on how your site is optimized (as well as consistency in how they’re displayed from browser to browser). This is one of the best Google font combinations for elite e-commerce sites for products such as upscale jewelry, designer clothing, and similar. Merriweather. Unlike the filled styles, though, the outline font feels less domineering as most of the characters are open at the ends. Necessary cookies are absolutely essential for the website to function properly. As you can imagine, this variety in styles and character availability gives web designers some flexibility in terms of where and when they decide to use it. A web font is a customized font which is supported by different browsers and comes in formats such as TTF, WOFF, EOT and SVG. Both fonts can be used interchangeably as headlines and body texts. 1. Now it’s unlikely that you’ve been on a website and thought, “Wow! It comes in six weights, ranging from thin to bold. Now if you swap their positions, Alegreya bold works fine for title and header text. Given this, it would work well on an ecommerce site for a smaller, more niche retailer. Leaner is a simple yet quirky numbers and punctuation font. Privus is a neat geometric font that comes in three styles. Best Free Serif Fonts; Best Free Sans Serif Fonts; Best Free Handwritten Fonts; We have divided the cool fonts that we are about to talk today into three major categories; serif fonts, sans serif fonts, and handwritten fonts. Bavro is a simple, clean font perfect for headings, developed by Marcelo Reis Melo, and available for free in multiple formats. Just make sure you don’t go overboard. Brush Script Mt is a web-safe Adobe Font. Long story short, for text-heavy pages, you want larger font sizes. If you’re a musician, painter, or photographer, these fonts can be used sparingly on your pages. Each page should just have two fonts; three at most. Chalkduster is a stylish font that you can use for the website. For starters, if you’re using them in tables or calculations, they should use tabular lining figures. Related: Start A WordPress Blog for Just $12 (Domain + Hosting + Consultation) My top three picks for best Google fonts for blogs and website are: Open Sans; Raleway; Lato This means each figure comprises the same width and height so that the numbers line up properly next to and on top of one another. 5. This website uses cookies to improve your experience while you navigate through the website. And cursive doesn’t seem to quite fit either. When choosing a special number font for your website, there are a number of considerations you have to keep in mind. Alegreya has a more traditional feel, with links to literature and printed text – perfect for text-heavy sites. That said, the font family includes 10 styles and 2 weights. So check out my post on the top trending website color schemes of 2021 as well. Learn how to pair fonts, and which fonts to use to make sure your users have the best experience. The first best serif Google font on this list is Merriweather font, one of my favorite. That said, a complete Latin alphabet is also available, so this well-proportioned font can just as well be used on English-speaking websites like it is in AARP, Lifehack, and Hongkiat use PT Serif. Many web fonts aren’t pre-installed with WordPress, your theme, or your page builder plugin. There are 20 styles in the Burford Rustic font family. Abril Fatface is a Google Font based on advertising headlines from Britain and France in the 1800s. The font combination of Amatic SC bold and Josefin Slab italic is definitely not for everyone. 16px– absolute minimum for text-heavy pages 2. Serif fonts are similar to sans serif fonts in terms of having a stable and predictable structure, only they come with markings at the end of the letters (serifs). This graph shows all of the respondents who agreed to the first question. Use the Open Sans header as a point of emphasis, and then elaborate on the subject using Roboto. And maybe you’re a committed Times New Roman user, and the idea of introducing new styles into your writing makes you want to … Brixton Sans isn’t just a multilingual outline font done up in a hand-drawn style. But all too often I see people overlook minor details, like typography. Fonts are important, so it time to get rid of the default. Our content is reader-supported, which means that if you click on some of our links that we may earn a commission. Although screen readers can be a great help in deciphering text for visually impaired users, choosing fonts that are easily legible will benefit more users from the outset. Maybe this font isn’t as beautiful as some of the other fonts on this list, but it’s very common and regularly used. What sets this particular family apart is the elongated (like the long neck of an ostrich) all-caps character sets. But these are some of the best vintage font options based on what’s popular right now: The American Captain font doesn’t just take its name from Marvel’s Captain America. Everyone from web hosting companies, magazines, schools, fashion brands has been using this font from the last few years now. This font would work well on a website for a service provider or agency that offers a personal touch or white-glove service. You could use just one of the distinctive styles or layer two of them for an unusual optical effect. Do you notice any similarities? Adding weight or italics to this font loses the legibility. There’s also something about the geometric lines that make this font feel “fast”, like it could zoom past the screen in a flash. So, it is one of the best Google fonts for a website you should consider. OverviewEditorDesignMarketingDevelopmentTheme BuilderExpertsPopup BuilderWidgetsIntegrations, BlogCommunityShowcaseHostingAdd-onsHello ThemeTemplate LibraryAffiliate ProgramWebsite TutorialsFree WordPress ThemesPortfolio Website BuilderOne Page Website BuilderFunnel Builder, About UsPricingCareersTrademarkTerms & ConditionsPrivacy Policy, Join our 3,020,965 newsletter subscribers and get the latest news and articles sent straight to your inbox weekly. That being said, let’s take a look at the best free fonts that you should use on your website in 2019. If you want to give your text a clean, minimal look and to encourage visitors to read the page all the way through, these are the best sans serif fonts to do that with: According to FontReach, Arial is the #1 font used on the web, with over 604,000 websites currently using it. Websites like the Daily Mail, Huffington Post, and Wayfair all use it. The best part about the font is it’s detailed and its structure is bold. And it’s because of this association they make to the past, even if it’s not done in an obvious way. To this day, the digitized TNR is one of the most recognizable, popular and legible fonts on the web. Of the 10 styles, there are actually 4 very unique outline styles available: Ostrich Sans is part of a font family with eight styles, one of which is the outline font you see above. When ready to purchase a font, you have a choice to select the right license type – either desktop (for print, logos and products) or webfonts (self hosted fonts for your website). It’s a popular choice because the options are so versatile. It is a balanced Serif font, inspired by the curviness of calligraphy. However, unless you’re designing a buttoned-up publication or website for a large enterprise, there’s no reason why you can’t branch out into display fonts designed specifically for logos, title text, or header tags.