{"id":7677,"date":"2022-05-09T14:37:00","date_gmt":"2022-05-09T14:37:00","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7677"},"modified":"2023-02-21T09:37:59","modified_gmt":"2023-02-21T09:37:59","slug":"typography-101-font-pairing-for-web-creators","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/","title":{"rendered":"Typography 101: Font Pairing for Web Creators"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7677\" class=\"elementor elementor-7677\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-56f7dcb thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"56f7dcb\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d9c4713\" data-id=\"d9c4713\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-573def elementor-widget elementor-widget-video\" data-id=\"573def\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/IgipeXJdlQk&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-237191fe thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"237191fe\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-72abdf22\" data-id=\"72abdf22\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-11a99d81 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"11a99d81\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2961\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2961\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2962\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2962\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2961\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2961\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2961\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we learn how to characterize, pair, and source high-quality fonts. We\u2019ll explore different approaches to using fonts creatively in Elementor.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e How to characterize fonts<br \/>\u2714\ufe0e How to pair fonts<br \/>\u2714\ufe0e Where to find high-quality fonts<br \/>\u2714\ufe0e How to overlap text in Elementor<br \/>\u2714\ufe0e Using the Animated Headline widget to combine fonts in Headings<br \/>\u2714\ufe0e And much more!<\/p><p>Font resources:<br \/><a href=\"https:\/\/www.fontsquirrel.com\" target=\"_blank\" rel=\"noopener\">Font Squirrel<\/a><br \/><a href=\"https:\/\/fonts.adobe.com\" target=\"_blank\" rel=\"noopener\">Adobe Fonts<\/a><\/p><p>Elementor Kits:<br \/><a href=\"https:\/\/library.elementor.com\/art-museum\" target=\"_blank\" rel=\"noopener\">Art Museum<\/a><br \/><a href=\"https:\/\/elementor.com\/library\/template-kit\/valentines-day\" target=\"_blank\" rel=\"noopener\">Valentines Day<\/a><br \/><a href=\"https:\/\/elementor.com\/library\/template-kit\/urban-clothing-shop\" target=\"_blank\" rel=\"noopener\">Urban Clothing Shop<\/a>\u00a0<\/p><p>Related videos:<br \/><a href=\"https:\/\/youtu.be\/CjdFxKPPikU\" target=\"_blank\" rel=\"noopener\">Global Fonts<\/a>\u00a0<br \/><a href=\"https:\/\/youtu.be\/J9OFB6JPxTI\" target=\"_blank\" rel=\"noopener\">Elementor Kits Library<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/\" target=\"_blank\" rel=\"noopener\">Margin and Padding<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/\" target=\"_blank\" rel=\"noopener\">Animated Headline Widget<\/a><\/p><p>Short videos:<br \/><a href=\"https:\/\/youtube.com\/shorts\/mV84d4qLnWI\" target=\"_blank\" rel=\"noopener\">How to Install Kits<\/a>\u00a0<br \/><a href=\"https:\/\/youtube.com\/shorts\/e3_cvazxxAU\" target=\"_blank\" rel=\"noopener\">How To Use Adobe Fonts<\/a> &#8211;\u00a0<br \/><a href=\"https:\/\/youtube.com\/shorts\/RpnmPK6ESDM\" target=\"_blank\" rel=\"noopener\">Animate Your Fonts Like a Pro<\/a>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2962\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2962\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2962\" tabindex=\"0\" hidden=\"hidden\"><p>The typeface styles used on websites have a great impact on the way our visitors perceive their design. Choosing the right typography can bring that &#8220;wow&#8221; element to your website &#8211; imagine impactful heroes or text blocks that are not only readable but also communicate with the brand visual language. But how do we choose fonts for our websites?<\/p><p>Hey Everyone, I\u2019m Aviva from Elementor.<\/p><p>In this Tips &amp; Tricks tutorial, we\u2019ll cover the basics of characterizing fonts, pairing fonts, share some font resources, and finally, learn how we can implement these concepts on our own websites, using Elementor.<br \/>But before we get started, let\u2019s first discuss the difference between a typeface and a font, which technically have different meanings.<\/p><p>In a nutshell, typeface is the name for all the style possibilities, called fonts, that exist within it. So a font belongs to a typeface, or what is commonly known in web creation as a font family.<\/p><p>Note that nowadays, however, these two terms are often used interchangeably.<\/p><p>Ok, let\u2019s begin with font characterization. There are numerous ways to characterize fonts, and today we\u2019ll cover three of them.<br \/>First, we have font classification.<\/p><p>Typefaces are classified as serif, sans-serif, script (or handwritten), monospaced and display.<\/p><p>Serif typefaces show off with slight projections (called serifs) that complete the strokes of their letterforms.<\/p><p>Sans Serif typefaces do not have projections at the end of their letterform strokes.<\/p><p>Script typefaces are based on the strokes of handwriting.<\/p><p>In Monospaced typefaces, each letter has the same width and evokes a sense of absolute symmetry.<\/p><p>Display fonts are a broad category of typefaces designed for use at large sizes, such as headings and posters. They usually are very distinctive.<\/p><p>Another way we can characterize fonts is through contrast.<\/p><p>Many font families include a variety of different weights, which can be used in combination with each other.<br \/>We can also characterize fonts by Mood.<\/p><p>Fonts can convey emotion and be used to transmit different messages, such as feelings, and time periods.<br \/><br \/>Alright! Now that we know how to characterize fonts, we\u2019ll take a look at three different font pairing methods:<\/p><p>Method #1 Combine typefaces of different classifications<\/p><p>Let\u2019s take a look at this <a href=\"https:\/\/library.elementor.com\/art-museum\" target=\"_blank\" rel=\"noopener\">Art Museum Kit<\/a> available for download from the Elementor Kits Library.<\/p><p>Here, we can see how these two serif and sans-serif styles play off each to create a harmonious design.<\/p><p>Method #2 Vary font weights for contrast<\/p><p>In this <a href=\"https:\/\/elementor.com\/library\/template-kit\/valentines-day\" target=\"_blank\" rel=\"noopener\">Valentine\u2019s Day Kit<\/a> example, we can see the use of different weights throughout the page. Fonts with varying weights create contrast, which helps draw our attention to headlines and calls to action.<\/p><p>Method #3 Select fonts to convey a Mood<\/p><p>Let\u2019s take a look at this unique font from the <a href=\"https:\/\/elementor.com\/library\/template-kit\/urban-clothing-shop\" target=\"_blank\" rel=\"noopener\">Urban Clothing Shop Kit<\/a>. Notice how it conveys elegance in a baroque style?<\/p><p>Great, so that brings us to our next segment, where can we find a variety of high quality fonts?<\/p><p>Let\u2019s begin with Google Fonts. This resource is both free for commercial use and a free feature in Elementor. You can choose from a very long list of Google fonts on your website, without the need to install them.<\/p><p><a href=\"https:\/\/www.fontsquirrel.com\" target=\"_blank\" rel=\"noopener\">Font Squirrel<\/a> is another free font website. Elementor Cloud and Pro subscribers can upload these fonts to their site, from the Elementor Custom Fonts Settings.<\/p><p>Next on the list is <a href=\"https:\/\/fonts.adobe.com\" target=\"_blank\" rel=\"noopener\">Adobe fonts<\/a>, which is available by paid subscription. If you have access to Adobe fonts and an <a href=\"https:\/\/elementor.com\/features\/cloud\" target=\"_blank\" rel=\"noopener\">Elementor Cloud<\/a> or Pro subscription, you\u2019ll find this integration available in the Elementor settings.<\/p><p>Another great resource for fonts is the <a href=\"https:\/\/elementor.com\/library\" target=\"_blank\" rel=\"noopener\">Elementor Kits Library<\/a>. Kits come ready to install on your website, complete with fonts.<\/p><p>Want to know more about Elementor Kits for your website designs?<\/p><p>We have a <a href=\"https:\/\/elementor.com\/academy\/the-kit-library\/\" target=\"_blank\" rel=\"noopener\">dedicated video<\/a>, so be sure to check it out later.<\/p><p>We\u2019ll leave links to these resources and relevant tutorials in the description.<\/p><p>Keep in mind that font licenses are subject to change, and copyright laws may differ internationally. Please be sure to read and abide by the font licenses.<\/p><p>Ok, time to see all these tips in action!<\/p><p>For our first example, we\u2019ll pair two typefaces, use different font sizes for contrast, and create interest with overlapping text.<\/p><p>We\u2019ll start in a section with one column, and drag in a <a href=\"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/\" target=\"_blank\" rel=\"noopener\">Heading widget<\/a>. Type in the Heading. I\u2019ll add these<br \/>tags to break, or separate the lines in specific places.<\/p><p>Next, we\u2019ll style the text by setting its typography. I\u2019m using the typeface Lato here, available on both Google and Adobe fonts.<\/p><p>Now we\u2019ll go ahead and add our second Heading. Drag in another Heading widget\u2026and type in the text. Align it to the center, and in Style, set the typography. For this one, I\u2019m using Blenny, available from Adobe Fonts.<\/p><p>Now, to get this outlined text effect, click and set the Text Stroke size\u2026and color. Now go back up to the text color and drag the opacity slider all the way to the left, to make it completely transparent.<\/p><p>Our typography looks great. Time to make them overlap.<\/p><p>In the Advanced tab, unlink the <a href=\"https:\/\/elementor.com\/academy\/margin-and-padding-basics-in-elementor\/\" target=\"_blank\" rel=\"noopener\">margin<\/a>. For the top margin, we\u2019ll click and hold the down arrow until we get our desired overlapping result. We\u2019ll do the same for the left margin. Perfect.<\/p><p>Now we\u2019ll drag in the last heading\u2026add the text\u2026and style it. Click Advanced, and add some Padding around the widget. Under Background, change the Color\u2026.and under Positioning, set the Width to Custom, and adjust the Width. Set the Position to Absolute and we\u2019ll drag the Horizontal offset slider to the right.<\/p><p>Next align the Vertical Orientation to the bottom, and drag the offset slider so that the widget overlaps a bit with the second Heading. Now we\u2019ll change the stack order of the second heading so that it appears above the third heading, by setting its Z index.<\/p><p>Finally, we\u2019ll drag in an image widget above our headings, and select an image. I\u2019m using an SVG image for best quality and fast loading.<\/p><p>Next we\u2019ll position it. Click Advanced, and under Positioning, select Custom Width, and Absolute Position. Align the Horizontal Orientation to the right.<\/p><p>Ok, it looks really good, but we can tweak it a bit more. Select the first Heading, and in Advanced, unlink the Padding, and add some Padding to the left side.<\/p><p>In the Border options, we\u2019ll switch the type to Solid, and change the color. Set the width to zero. Then unlink the values and increase the width for the left border only.<\/p><p>Great, let\u2019s preview. Wow, the overlapping text really adds a layer of depth!<\/p><p>For our second example, we\u2019ll use the <a href=\"https:\/\/elementor.com\/academy\/how-to-use-the-animated-headline-widget-in-elementor-pro\/\" target=\"_blank\" rel=\"noopener\">Animated Headline<\/a> widget to combine a sans serif font with a serif font.<\/p><p>The animated Headline widget is available to our Pro and Cloud subscribers.<\/p><p>We&#8217;ll drag in the Animated Headline widget. This widget is full of fun animations for our typography, but since we don\u2019t need any animations in this design, let\u2019s skip ahead to the Style tab, and change the shape width to zero. This will hide the animation and keep it from distracting us while we set everything up.<\/p><p>Back in Content, we\u2019ll type in the Before Text, which will be the text for the first font. Then, in Highlighted text, we\u2019ll type in the text for the second font.<\/p><p>Even though we\u2019ve hidden the animation, it\u2019s still running behind the scenes. Toggle infinite loop to No, which will pause the animation, so we don\u2019t use unneeded resources.<\/p><p>Now align the text to the left.<\/p><p>Great! Time to Style our type. In Headline, for the Typography, choose a font style that uses a sans serif font. I\u2019m using the classic Helvetica, which is a System font.<\/p><p>For the Animated Text, which is the second part of our headline, we\u2019ll choose a serif font for the Typography. I\u2019ve selected Ivypresto Display from Adobe Fonts. We can also change the color for this text to contrast even more with the first line. We\u2019ll click Text Color and choose a new color.<\/p><p>And that\u2019s it. Let\u2019s preview. Looks great!<\/p><p>Great, now you know how to characterize and pair fonts, and have the tools to create expressive and impactful typographic layouts on your website.<\/p><p>So go ahead, experiment with trendy fonts, stick to the classics, or mix them up. We can&#8217;t wait to see what you come up with. The possibilities are endless.<\/p><p>Thanks for watching! For more tutorials, check out the Elementor Academy, and subscribe to our Youtube channel. Don\u2019t forget to hit that notification bell.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we learn how to characterize, pair, and source high-quality fonts. We\u2019ll explore different approaches to using fonts creatively in Elementor. The tutorial will cover: \u2714\ufe0e How to characterize fonts \u2714\ufe0e How to pair fonts \u2714\ufe0e Where to find high-quality fonts \u2714\ufe0e How to overlap text in Elementor \u2714\ufe0e Using [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":7708,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,22],"tags":[41],"class_list":["post-7677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-trending-now-selection-guides-tutorials","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Typography 101: Font Pairing for Web Creators - Academy<\/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:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typography 101: Font Pairing for Web Creators - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we learn how to characterize, pair, and source high-quality fonts. We\u2019ll explore different approaches to using fonts creatively in Elementor. The tutorial will cover: \u2714\ufe0e How to characterize fonts \u2714\ufe0e How to pair fonts \u2714\ufe0e Where to find high-quality fonts \u2714\ufe0e How to overlap text in Elementor \u2714\ufe0e Using [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-09T14:37:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:37:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/05\/Typography-Tutorial-101-Dark-Thumbnail.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aviva Darab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aviva Darab\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Typography 101: Font Pairing for Web Creators - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/","og_locale":"en_US","og_type":"article","og_title":"Typography 101: Font Pairing for Web Creators - Academy","og_description":"Overview Transcript Overview In this tutorial we learn how to characterize, pair, and source high-quality fonts. We\u2019ll explore different approaches to using fonts creatively in Elementor. The tutorial will cover: \u2714\ufe0e How to characterize fonts \u2714\ufe0e How to pair fonts \u2714\ufe0e Where to find high-quality fonts \u2714\ufe0e How to overlap text in Elementor \u2714\ufe0e Using [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/","og_site_name":"Academy","article_published_time":"2022-05-09T14:37:00+00:00","article_modified_time":"2023-02-21T09:37:59+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/05\/Typography-Tutorial-101-Dark-Thumbnail.png","type":"image\/png"}],"author":"Aviva Darab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aviva Darab"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/"},"author":{"name":"Aviva Darab","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449"},"headline":"Typography 101: Font Pairing for Web Creators","datePublished":"2022-05-09T14:37:00+00:00","dateModified":"2023-02-21T09:37:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/"},"wordCount":1590,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/05\/Typography-Tutorial-101-Dark-Thumbnail.png","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","trending now selection \u2013 guides and tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/","url":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/","name":"Typography 101: Font Pairing for Web Creators - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/05\/Typography-Tutorial-101-Dark-Thumbnail.png","datePublished":"2022-05-09T14:37:00+00:00","dateModified":"2023-02-21T09:37:59+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/05\/Typography-Tutorial-101-Dark-Thumbnail.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/05\/Typography-Tutorial-101-Dark-Thumbnail.png","width":1920,"height":1080,"caption":"Typography 101"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/typography-101-font-pairing-for-web-creators\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Typography 101: Font Pairing for Web Creators"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449","name":"Aviva Darab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","caption":"Aviva Darab"},"description":"Aviva is a Designer and Educator at Elementor. She\u2019s experienced in web and graphic design and enjoys sharing her knowledge with others. She stays fueled with coffee, dark chocolate, and Pinterest.","url":"https:\/\/elementor.com\/academy\/author\/user-5e36e0380be94\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7677"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7677\/revisions"}],"predecessor-version":[{"id":9311,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7677\/revisions\/9311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7708"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}