What’s particularly nice about this font is how it feels less heavy-handed than many of its serif siblings (notice the gentle curve of the “j” or how the top of the “f” curves around). Brush Script Mt is a web-safe Adobe Font. Choosing a good font may not seem a crucial task at the beginning, but as you start focusing on blog metrics, you would know the importance. That said, the font family includes 10 styles and 2 weights. Best Cursive Fonts – Cervanttis Font. The lighter weight font, like Montserrat light, gives the text a certain level of elegance that fits with a luxury brand persona. Over the past decade, however, this display font family has been expanded to include nine weights, ranging from thin to black. He just wanted to know if the font could influence their answers. This would also work well on websites for consultants, coaches, or freelancers who serve a female audience. 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. By entering your email, you agree to our Terms of Service and Privacy Policy. Based on this data, Morris was able to conclude that fonts can influence the way people perceive information. But, I can guarantee that you’ve been on websites that have fonts that were generic, unappealing, difficult to read, or felt out of place. You’ll see evidence of this in the kinds of websites that use Merriweather to style their paragraphs, like Goodreads, Coursera, and Harvard.edu. 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. Lora bold is strong and legible, which is why it’s perfect for title pages. Join 3,020,965 Elementors, and get a weekly roundup of our best skill-enhancing content. I know what some of you might be thinking. So check out my list, and pick out a combination that works best for your website. Forty thousand people unknowingly participated in this experiment. If you’re helping clients design their branding — their logo as well as future branded material — this font works really well in graphic design, too. There are grunge fonts that can give your site’s lettering a rustic, wood-carved look. The best part about the font is it’s detailed and its structure is bold. If you really want to be unique, you can swap the two and use Raleway for headings and Cinzel for the body text. 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. Really, we can consider the best cursive fonts a subset of titling fonts. Join 3,020,965 subscribers who stay ahead of the pack. Then, there’s the “Medium” font, which is a heavily outlined font with random openings in the characters. While this typeface does have a techy, machine-like feel to it, the wide-open characters also give it a friendly touch. This one font family now includes special characters that will give any website or blog the look of a book of classic literature like: The League of Moveable Type decided to take an old classic font that got lost in the public domain after the original foundry went bankrupt (Alternate Gothic #1) and gave it new life for the twenty-first century. 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. In a perfect world, designers and site builders could use any font they wanted for websites. You might consider using outline fonts in that case. It’s the best font for reading as well. Lato is used on websites like Goodreads, WebMD, and Merriam-Webster. This design choice is sure to give title and header text a big presence on any page. On the other hand, the dramatic bold and heavy styles could be used to create titles and logos that resemble old film noir marquees. However, it is important to consider how long someone will be able to read through a full page of handwriting or calligraphy — especially younger generations who aren’t necessarily required to learn to write in cursive anymore. Spectral is one of the newer fonts on this list, but it deserves a spot because of how beautifully it handles long-form content on the web. It depends on the theme and overall message that you’re going for on your website. You could consider using this to spice up your online menu. Undoubtedly, there’s some overlap between these fonts, but these numbers also fail to account for fonts available from sites like DaFont, Font Squirrel, 1001 Fonts, Behance, as well as the thousands of independent font foundries. Abril Fatface is a Google Font based on advertising headlines from Britain and France in the 1800s. Your primary font is the most visible one, and should be used on the headers of your website. 1. The paragraph below it is Roboto regular. The font is well-suited for body text, but you can use it in a combination for headings as well. Lato is a Google Font that was originally designed for a corporate client. Notice how some of the characters use irregular angles (like the “3”) or use an alternate design (like the “$” symbol). This graph shows all of the respondents who agreed to the first question. It’s a popular choice because the options are so versatile. 16px– absolute minimum for text-heavy pages 2. Fonts are hosted on the user’s server independently of external services. So pick something else for longer blocks of text, such as your biography or about me pages. Learn how to pair fonts, and which fonts to use to make sure your users have the best experience. The two fonts are nearly identical geometric sans serifs. It’s marketed as being peppy, informal and unabashedly confident, which is a spot-on description. In doing so, it’s clear that there was a difference between how confident people were in agreeing with the claims being made based on the font they were presented in. Sans serif fonts are those without (French: sans) markings at the end of the letters (serifs). In terms of where you can use them, serifs can be used in either the body or header text of a web page. 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. They’re based on simple geometric lines and patterns. PT Sans. For creating fonts, FontStruct offers a full-fledged font-building tool. Or do you have some room to be a bit unique? Linotte Now, vintage covers a broad number of eras, so there are a lot of directions to go with this. This font combination works best for shorter text on your website. In the real world, however, you must exercise caution when building out a page and finding fonts. The one you see here is a regular weight, solid typeface. I’m glad you brought this up! It doesn’t appear incomplete, it just looks as though a certain segment length was used to complete the bottom of the letter. Merriweather. Including typefaces that cover a wide range of styles (e.g. Either way, these two fonts work well together. Now that you’ve seen some of the best Google Fonts combinations of 2021, how can you decide which one is best for your website? As the name suggests, PT Sans is a Sans Serif typeface which is open-source. Serifs have a long history in typography which is why the style of these fonts often feels more traditional and sophisticated than others. Use the Open Sans header as a point of emphasis, and then elaborate on the subject using Roboto. Lazer 84 calls to mind a very specific time period: The 80s. It’s just like any other element in web design — you need your typeface to blend with the overall personality of the website and sometimes the most basic and popular fonts won’t do. Font Awesome has been around for years and it’s widely regarded as the first major open source icon font. Perfect article Sergei, I just started with Elementor and now chasing for a best typo for my need in web design. 5. Save my name, email, and website in this browser for the next time I comment. That combination can work well for some of you who are promoting a game, or even on a landing page to download your mobile gaming app. 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. That being said, let’s take a look at the best free fonts that you should use on your website in 2019. I’d recommend using this combination on your homepage. One of the reasons why retro always seems to be cool is because of nostalgia. Table of Contents. The font is used by websites such as Freelancer, Grammarly, Alexa, Starbucks, Buffer, and more. I like these fonts because they are easy to read, but not too generic and boring. This font can also be used anywhere on the blog or website. There are tens of thousands of fonts available online. 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. When picking fonts for any project, it’s best to get a font family as they come in multiple variations of the same font. The one you see here is called “Light”. 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). Black Jack has a natural and casual feel to it, thanks to the handwritten letters not always connecting — much like when someone’s written in cursive for a while and adds their unique spin to it. If you find yourself designing a website for a company formed in the 80s that wants to play upon the styles of that time, this font would work great for your titling and headers. If you’re looking for a thick cursive font that fills up space well, Milkshake is a good one to consider. Why your website font matter? It’s not because cursive fonts are difficult to read (at least, not the ones you’ll find below). There are plenty of platforms for finding free fonts, but Google Fonts is my favorite. When choosing a special number font for your website, there are a number of considerations you have to keep in mind. Flix is a modern and unique display font specially made for headlines and titles. Merriweather is extremely popular for online use, because it was designed to be read on screens. But that’s fine. If you’re playing around with different retro styles, this is a good font to check out as it has a variety of options built in. The fonts should be different enough that each is distinguishable, but not so different that the reader is distracted. Lora regular is legible, so you could consider using it for longer text. 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 That same segment appears to be the tail in the letter “g” as well. Another factor we considered was the weight of the font. I can’t say that I would recommend it to the majority of websites, but it’s an ideal combination for artsy websites. 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. This easy-to-read yet funky looking font would work equally well on sites with a retro vibe as well as on fashion and ecommerce sites. 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. For a more elegant look, Lora is placed among the best WordPress fonts for modern websites. Its condensed nature helps it grab attention and pop, but it also makes for a pleasantly unique text as your main body’s font. Open the email on your desktop, download Elementor and start working, Learn How To Add Custom Fonts To WordPress and Take Your Website Design To the Next Level. Modern fonts have certain characteristics: Essentially, what modern fonts end up being are geometric styles with a slight futuristic edge. Font style is one of the most important considerations of accessible website design. Neue Helvetica is the second most popular font on the web, with over 218,000 websites like Facebook, Yahoo, and eBay using it. Luckily, this guide is here to help you find the best fonts for you. 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. This combination could be used to convey the value proposition on your homepage. Your email address will not be published. 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. You obviously don’t want people to have that impression of your website. For starters, if you’re using them in tables or calculations, they should use tabular lining figures. I ALWAYS have trouble picking the fonts for my sites. So check out my post on the top trending website color schemes of 2021 as well. 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. This will be really helpful in the future. His favorite topics are gadgets, advances in science, new apps and software solutions. The lowercase “e”, for instance, comes up short on the end. Interestingly enough, if you swap the two and use Montserrat as the header, the persona changes to something that feels futuristic or techy. Required fields are marked *. 18px– a better font size to start with. But these aren’t your typical light, regular and bold styles (though those are available as well). I wouldn’t necessarily use it on a blog post or something like that. (slightly, moderately, very). 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. 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. As such, FreeLine would be a smart and stylish choice for website titling and branding in the technology, aviation, and automotive spaces. This is one of the best Google font combinations for elite e-commerce sites for products such as upscale jewelry, designer clothing, and similar. There are lined fonts that might make your text look like an old Hollywood marquee. Sergei Davidov is a content creator at Elementor. However, it's not always clear which fonts are best for making website content accessible. Montserrat is a Google font inspired by signage from the Montserrat neighborhood of Buenos Aires in the early 1900s. 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. PT Sans Narrow and PT Sans is a classic combination. 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. Yet, the font is worth the investment. Get help with designing your website or blog today. Just keep in mind that it only comes with numbers and currency symbols, so if you need other kinds of punctuation, you’ll need to get it from another numbers (or your regular) font.