CINXE.COM

<!DOCTYPE html> <html> <head> <title>How To Choose Fonts For a Website Or an Article</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="Guidelines that help you choose a font without going into too much theory" /> <meta property="og:url" content="https://tilda.education/en/articles-fonts" /> <meta property="og:image" content="https://tilda.education/upload/pages/17464705/socnet.png" /> <meta property="og:title" content="How To Choose Fonts For a Website Or an Article" /> <meta property="og:description" content="Guidelines that help you choose a font without going into too much theory" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Tilda.Education" /> <link rel="canonical" href="https://tilda.education/en/articles-fonts"/>  <meta name="facebook-domain-verification" content="9one1zge7glj0hixes5xaof541u8mi" /> <meta property="fb:app_id" content="1501686730124089"> <link rel="shortcut icon" href="https://tilda.ws/img/tildafavicon.ico"> <link rel="stylesheet" type="text/css" href="/css/union.css">   <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"> <link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-blocks-page16067110.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/fonts-tildasans.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-blocks-page17464705.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-animation-2.0.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-slds-1.4.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-cards-1.0.min.css"> <link rel="alternate" type="application/rss+xml" title="Tilda.Education Articles" href="https://tilda.education/rss.xml" /> <script src="/js/jquery-union.min.js"></script>    <script type="text/javascript" src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js"></script> <script type="text/javascript" src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js"></script> <script type="text/javascript"> var d = new Date(); window.startTimer = d.getTime(); </script>  <script type="text/javascript" src="/static/project8756/js/tilda-scripts-3.0.min.js"></script>  <script type="text/javascript">function t_onReady(func) { if (document.readyState != 'loading') { func(); } else { document.addEventListener('DOMContentLoaded', func); } } function t_onFuncLoad(funcName, okFunc, time) { if (typeof window[funcName] === 'function') { okFunc(); } else { setTimeout(function() { t_onFuncLoad(funcName, okFunc, time); },(time || 100)); } }function t_throttle(fn, threshhold, scope) {return function () {fn.apply(scope || this, arguments);};} </script> </head> <body itemscope itemtype="http://schema.org/NewsArticle" ><div id="overlay" style="display: none;"></div> <div id="rec272402637" class="r t-rec t-rec_pb_0 t-screenmin-980px" style="padding-bottom:0px;background-color:#ffffff; " data-animationappear="off" data-record-type="456" data-screen-min="980px" data-bg-color="#ffffff">  <div id="nav272402637marker"></div> <div class="tmenu-mobile"> <div class="tmenu-mobile__container"> <div class="tmenu-mobile__text t-name t-name_md" field="menu_mob_title"> </div> <button type="button" class="t-menuburger t-menuburger_first " aria-label="Navigation menu" aria-expanded="false"> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> </button> <script>function t_menuburger_init(recid) {var rec=document.querySelector('#rec' + recid);if(!rec) return;var burger=rec.querySelector('.t-menuburger');if(!burger) return;var isSecondStyle=burger.classList.contains('t-menuburger_second');if(isSecondStyle&&!window.isMobile&&!('ontouchend' in document)) {burger.addEventListener('mouseenter',function() {if(burger.classList.contains('t-menuburger-opened')) return;burger.classList.remove('t-menuburger-unhovered');burger.classList.add('t-menuburger-hovered');});burger.addEventListener('mouseleave',function() {if(burger.classList.contains('t-menuburger-opened')) return;burger.classList.remove('t-menuburger-hovered');burger.classList.add('t-menuburger-unhovered');setTimeout(function() {burger.classList.remove('t-menuburger-unhovered');},300);});} burger.addEventListener('click',function() {if(!burger.closest('.tmenu-mobile')&&!burger.closest('.t450__burger_container')&&!burger.closest('.t466__container')&&!burger.closest('.t204__burger')&&!burger.closest('.t199__js__menu-toggler')) {burger.classList.toggle('t-menuburger-opened');burger.classList.remove('t-menuburger-unhovered');}});var menu=rec.querySelector('[data-menu="yes"]');if(!menu) return;var menuLinks=menu.querySelectorAll('.t-menu__link-item');var submenuClassList=['t978__menu-link_hook','t978__tm-link','t966__tm-link','t794__tm-link','t-menusub__target-link'];Array.prototype.forEach.call(menuLinks,function(link) {link.addEventListener('click',function() {var isSubmenuHook=submenuClassList.some(function(submenuClass) {return link.classList.contains(submenuClass);});if(isSubmenuHook) return;burger.classList.remove('t-menuburger-opened');});});menu.addEventListener('clickedAnchorInTooltipMenu',function() {burger.classList.remove('t-menuburger-opened');});} t_onReady(function() {t_onFuncLoad('t_menuburger_init',function(){t_menuburger_init('272402637');});});</script> <style>.t-menuburger{position:relative;flex-shrink:0;width:28px;height:20px;padding:0;border:none;background-color:transparent;outline:none;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:transform .5s ease-in-out;cursor:pointer;z-index:999;}.t-menuburger span{display:block;position:absolute;width:100%;opacity:1;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:.25s ease-in-out;height:3px;background-color:#000;}.t-menuburger span:nth-child(1){top:0px;}.t-menuburger span:nth-child(2),.t-menuburger span:nth-child(3){top:8px;}.t-menuburger span:nth-child(4){top:16px;}.t-menuburger__big{width:42px;height:32px;}.t-menuburger__big span{height:5px;}.t-menuburger__big span:nth-child(2),.t-menuburger__big span:nth-child(3){top:13px;}.t-menuburger__big span:nth-child(4){top:26px;}.t-menuburger__small{width:22px;height:14px;}.t-menuburger__small span{height:2px;}.t-menuburger__small span:nth-child(2),.t-menuburger__small span:nth-child(3){top:6px;}.t-menuburger__small span:nth-child(4){top:12px;}.t-menuburger-opened span:nth-child(1){top:8px;width:0%;left:50%;}.t-menuburger-opened span:nth-child(2){-webkit-transform:rotate(45deg);transform:rotate(45deg);}.t-menuburger-opened span:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.t-menuburger-opened span:nth-child(4){top:8px;width:0%;left:50%;}.t-menuburger-opened.t-menuburger__big span:nth-child(1){top:6px;}.t-menuburger-opened.t-menuburger__big span:nth-child(4){top:18px;}.t-menuburger-opened.t-menuburger__small span:nth-child(1),.t-menuburger-opened.t-menuburger__small span:nth-child(4){top:6px;}@media (hover),(min-width:0\0){.t-menuburger_first:hover span:nth-child(1){transform:translateY(1px);}.t-menuburger_first:hover span:nth-child(4){transform:translateY(-1px);}.t-menuburger_first.t-menuburger__big:hover span:nth-child(1){transform:translateY(3px);}.t-menuburger_first.t-menuburger__big:hover span:nth-child(4){transform:translateY(-3px);}}.t-menuburger_second span:nth-child(2),.t-menuburger_second span:nth-child(3){width:80%;left:20%;right:0;}@media (hover),(min-width:0\0){.t-menuburger_second.t-menuburger-hovered span:nth-child(2),.t-menuburger_second.t-menuburger-hovered span:nth-child(3){animation:t-menuburger-anim 0.3s ease-out normal forwards;}.t-menuburger_second.t-menuburger-unhovered span:nth-child(2),.t-menuburger_second.t-menuburger-unhovered span:nth-child(3){animation:t-menuburger-anim2 0.3s ease-out normal forwards;}}.t-menuburger_second.t-menuburger-opened span:nth-child(2),.t-menuburger_second.t-menuburger-opened span:nth-child(3){left:0;right:0;width:100%!important;}.t-menuburger_third span:nth-child(4){width:70%;left:unset;right:0;}@media (hover),(min-width:0\0){.t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4){width:100%;}}.t-menuburger_third.t-menuburger-opened span:nth-child(4){width:0!important;right:50%;}.t-menuburger_fourth{height:12px;}.t-menuburger_fourth.t-menuburger__small{height:8px;}.t-menuburger_fourth.t-menuburger__big{height:18px;}.t-menuburger_fourth span:nth-child(2),.t-menuburger_fourth span:nth-child(3){top:4px;opacity:0;}.t-menuburger_fourth span:nth-child(4){top:8px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(2),.t-menuburger_fourth.t-menuburger__small span:nth-child(3){top:3px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(4){top:6px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(2),.t-menuburger_fourth.t-menuburger__small span:nth-child(3){top:3px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(4){top:6px;}.t-menuburger_fourth.t-menuburger__big span:nth-child(2),.t-menuburger_fourth.t-menuburger__big span:nth-child(3){top:6px;}.t-menuburger_fourth.t-menuburger__big span:nth-child(4){top:12px;}@media (hover),(min-width:0\0){.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1){transform:translateY(1px);}.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4){transform:translateY(-1px);}.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1){transform:translateY(3px);}.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4){transform:translateY(-3px);}}.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),.t-menuburger_fourth.t-menuburger-opened span:nth-child(4){top:4px;}.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),.t-menuburger_fourth.t-menuburger-opened span:nth-child(3){opacity:1;}@keyframes t-menuburger-anim{0%{width:80%;left:20%;right:0;}50%{width:100%;left:0;right:0;}100%{width:80%;left:0;right:20%;}}@keyframes t-menuburger-anim2{0%{width:80%;left:0;}50%{width:100%;right:0;left:0;}100%{width:80%;left:20%;right:0;}}</style> </div> </div> <style>.tmenu-mobile{background-color:#111;display:none;width:100%;top:0;z-index:990;}.tmenu-mobile_positionfixed{position:fixed;}.tmenu-mobile__text{color:#fff;}.tmenu-mobile__container{min-height:64px;padding:20px;position:relative;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.tmenu-mobile__list{display:block;}.tmenu-mobile__burgerlogo{display:inline-block;font-size:24px;font-weight:400;white-space:nowrap;vertical-align:middle;}.tmenu-mobile__imglogo{height:auto;display:block;max-width:300px!important;box-sizing:border-box;padding:0;margin:0 auto;}@media screen and (max-width:980px){.tmenu-mobile__menucontent_hidden{display:none;height:100%;}.tmenu-mobile{display:block;}}@media screen and (max-width:980px){#rec272402637 .t-menuburger{-webkit-order:1;-ms-flex-order:1;order:1;}}</style> <style> #rec272402637 .tmenu-mobile__burgerlogo a{font-size:24px;font-weight:700;}</style> <style> #rec272402637 .tmenu-mobile__burgerlogo__title{font-size:24px;font-weight:700;}</style> <div id="nav272402637" class="t456 t456__positionfixed t456__beforeready tmenu-mobile__menucontent_hidden" style="background-color: rgba(255,255,255,0.90); height:65px; " data-bgcolor-hex="#ffffff" data-bgcolor-rgba="rgba(255,255,255,0.90)" data-navmarker="nav272402637marker" data-appearoffset="500px" data-bgopacity-two="90" data-menushadow="" data-menushadow-css="0px 1px 3px rgba(0,0,0,0)" data-bgopacity="0.90" data-bgcolor-rgba-afterscroll="rgba(255,255,255,0.90)" data-menu-items-align="right" data-menu="yes"> <div class="t456__maincontainer " style="height:65px;"> <div class="t456__leftwrapper" style=""> <div class="t456__logowrapper"> <a href="http://tilda.education/en"> <div class="t456__logo t-title" field="title"">Tilda Education</div> </a> </div> </div> <nav class="t456__rightwrapper t456__menualign_right" style=""> <ul role="list" class="t456__list t-menu__list"> <li class="t456__list_item" style="padding:0 15px 0 0;"> <a class="t-menu__link-item" href="https://tilda.education/en/#courses" data-menu-submenu-hook="" data-menu-item-number="1">Courses</a> </li> <li class="t456__list_item" style="padding:0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#guidesandarticles" data-menu-submenu-hook="" data-menu-item-number="2">Guides & Articles</a> </li> <li class="t456__list_item" style="padding:0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#videotutorials" data-menu-submenu-hook="" data-menu-item-number="3">Video Tutorials</a> </li> <li class="t456__list_item" style="padding:0 0 0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#stories" data-menu-submenu-hook="" data-menu-item-number="4">Success Stories</a> </li> </ul> </nav> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_menu__highlightActiveLinks',function() {t_menu__highlightActiveLinks('.t456__list_item a');});t_onFuncLoad('t_menu__findAnchorLinks',function() {t_menu__findAnchorLinks('272402637','.t456__list_item a');});});t_onReady(function() {t_onFuncLoad('t_menu__setBGcolor',function() {t_menu__setBGcolor('272402637','.t456');window.addEventListener('resize',function() {t_menu__setBGcolor('272402637','.t456');});});t_onFuncLoad('t_menu__interactFromKeyboard',function() {t_menu__interactFromKeyboard('272402637');});});t_onReady(function() {var rec=document.querySelector('#rec272402637');if(!rec) return;rec.querySelector('.t456').classList.remove('t456__beforeready');t_onFuncLoad('t_menu__showFixedMenu',function() {t_menu__showFixedMenu('272402637','.t456');window.addEventListener('scroll',t_throttle(function() {t_menu__showFixedMenu('272402637','.t456');}));});});t_onReady(function() {t_onFuncLoad('t_menu__changeBgOpacity',function() {t_menu__changeBgOpacity('272402637','.t456');window.addEventListener('scroll',t_throttle(function() {t_menu__changeBgOpacity('272402637','.t456');}));});});</script> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_menu__createMobileMenu',function() {t_menu__createMobileMenu('272402637','.t456');});});</script> <style>#rec272402637 .t-menu__link-item{-webkit-transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;position:relative;}#rec272402637 .t-menu__link-item:not(.t-active):not(.tooltipstered)::after{content:'';position:absolute;left:0;bottom:20%;opacity:0;width:100%;height:100%;border-bottom:1px solid #ffa282;-webkit-box-shadow:inset 0px -1px 0px 0px #ffa282;-moz-box-shadow:inset 0px -1px 0px 0px #ffa282;box-shadow:inset 0px -1px 0px 0px #ffa282;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;pointer-events:none;}#rec272402637 .t-menu__link-item.t-active:not(.t978__menu-link){color:#000000 !important;}#rec272402637 .t-menu__link-item:not(.t-active):not(.tooltipstered):hover::after{opacity:1;bottom:-1px;}#rec272402637 .t-menu__link-item:not(.t-active):not(.tooltipstered):focus-visible::after{opacity:1;bottom:-1px;}@supports (overflow:-webkit-marquee) and (justify-content:inherit){#rec272402637 .t-menu__link-item,#rec272402637 .t-menu__link-item.t-active{opacity:1 !important;}}</style> <style> #rec272402637 a.t-menusub__link-item{font-weight:400;}</style> <style> #rec272402637 .t456__logowrapper a{font-size:24px;font-weight:700;}#rec272402637 a.t-menu__link-item{font-size:16px;color:#000000;font-weight:400;}</style> <style> #rec272402637 .t456__logo{font-size:24px;font-weight:700;}</style>  <style>#rec272402637 .t456 {box-shadow:0px 1px 3px rgba(0,0,0,0);}</style> </div> <div id="rec831954100" class="r t-rec t-rec_pb_0 t-screenmax-980px" style="padding-bottom:0px;background-color:#ffffff; " data-animationappear="off" data-record-type="456" data-screen-max="980px" data-bg-color="#ffffff">  <div id="nav831954100marker"></div> <div class="tmenu-mobile"> <div class="tmenu-mobile__container"> <div class="tmenu-mobile__text t-name t-name_md" field="menu_mob_title"> </div> <button type="button" class="t-menuburger t-menuburger_first " aria-label="Navigation menu" aria-expanded="false"> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> </button> <script>function t_menuburger_init(recid) {var rec=document.querySelector('#rec' + recid);if(!rec) return;var burger=rec.querySelector('.t-menuburger');if(!burger) return;var isSecondStyle=burger.classList.contains('t-menuburger_second');if(isSecondStyle&&!window.isMobile&&!('ontouchend' in document)) {burger.addEventListener('mouseenter',function() {if(burger.classList.contains('t-menuburger-opened')) return;burger.classList.remove('t-menuburger-unhovered');burger.classList.add('t-menuburger-hovered');});burger.addEventListener('mouseleave',function() {if(burger.classList.contains('t-menuburger-opened')) return;burger.classList.remove('t-menuburger-hovered');burger.classList.add('t-menuburger-unhovered');setTimeout(function() {burger.classList.remove('t-menuburger-unhovered');},300);});} burger.addEventListener('click',function() {if(!burger.closest('.tmenu-mobile')&&!burger.closest('.t450__burger_container')&&!burger.closest('.t466__container')&&!burger.closest('.t204__burger')&&!burger.closest('.t199__js__menu-toggler')) {burger.classList.toggle('t-menuburger-opened');burger.classList.remove('t-menuburger-unhovered');}});var menu=rec.querySelector('[data-menu="yes"]');if(!menu) return;var menuLinks=menu.querySelectorAll('.t-menu__link-item');var submenuClassList=['t978__menu-link_hook','t978__tm-link','t966__tm-link','t794__tm-link','t-menusub__target-link'];Array.prototype.forEach.call(menuLinks,function(link) {link.addEventListener('click',function() {var isSubmenuHook=submenuClassList.some(function(submenuClass) {return link.classList.contains(submenuClass);});if(isSubmenuHook) return;burger.classList.remove('t-menuburger-opened');});});menu.addEventListener('clickedAnchorInTooltipMenu',function() {burger.classList.remove('t-menuburger-opened');});} t_onReady(function() {t_onFuncLoad('t_menuburger_init',function(){t_menuburger_init('831954100');});});</script> <style>.t-menuburger{position:relative;flex-shrink:0;width:28px;height:20px;padding:0;border:none;background-color:transparent;outline:none;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:transform .5s ease-in-out;cursor:pointer;z-index:999;}.t-menuburger span{display:block;position:absolute;width:100%;opacity:1;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:.25s ease-in-out;height:3px;background-color:#000;}.t-menuburger span:nth-child(1){top:0px;}.t-menuburger span:nth-child(2),.t-menuburger span:nth-child(3){top:8px;}.t-menuburger span:nth-child(4){top:16px;}.t-menuburger__big{width:42px;height:32px;}.t-menuburger__big span{height:5px;}.t-menuburger__big span:nth-child(2),.t-menuburger__big span:nth-child(3){top:13px;}.t-menuburger__big span:nth-child(4){top:26px;}.t-menuburger__small{width:22px;height:14px;}.t-menuburger__small span{height:2px;}.t-menuburger__small span:nth-child(2),.t-menuburger__small span:nth-child(3){top:6px;}.t-menuburger__small span:nth-child(4){top:12px;}.t-menuburger-opened span:nth-child(1){top:8px;width:0%;left:50%;}.t-menuburger-opened span:nth-child(2){-webkit-transform:rotate(45deg);transform:rotate(45deg);}.t-menuburger-opened span:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.t-menuburger-opened span:nth-child(4){top:8px;width:0%;left:50%;}.t-menuburger-opened.t-menuburger__big span:nth-child(1){top:6px;}.t-menuburger-opened.t-menuburger__big span:nth-child(4){top:18px;}.t-menuburger-opened.t-menuburger__small span:nth-child(1),.t-menuburger-opened.t-menuburger__small span:nth-child(4){top:6px;}@media (hover),(min-width:0\0){.t-menuburger_first:hover span:nth-child(1){transform:translateY(1px);}.t-menuburger_first:hover span:nth-child(4){transform:translateY(-1px);}.t-menuburger_first.t-menuburger__big:hover span:nth-child(1){transform:translateY(3px);}.t-menuburger_first.t-menuburger__big:hover span:nth-child(4){transform:translateY(-3px);}}.t-menuburger_second span:nth-child(2),.t-menuburger_second span:nth-child(3){width:80%;left:20%;right:0;}@media (hover),(min-width:0\0){.t-menuburger_second.t-menuburger-hovered span:nth-child(2),.t-menuburger_second.t-menuburger-hovered span:nth-child(3){animation:t-menuburger-anim 0.3s ease-out normal forwards;}.t-menuburger_second.t-menuburger-unhovered span:nth-child(2),.t-menuburger_second.t-menuburger-unhovered span:nth-child(3){animation:t-menuburger-anim2 0.3s ease-out normal forwards;}}.t-menuburger_second.t-menuburger-opened span:nth-child(2),.t-menuburger_second.t-menuburger-opened span:nth-child(3){left:0;right:0;width:100%!important;}.t-menuburger_third span:nth-child(4){width:70%;left:unset;right:0;}@media (hover),(min-width:0\0){.t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4){width:100%;}}.t-menuburger_third.t-menuburger-opened span:nth-child(4){width:0!important;right:50%;}.t-menuburger_fourth{height:12px;}.t-menuburger_fourth.t-menuburger__small{height:8px;}.t-menuburger_fourth.t-menuburger__big{height:18px;}.t-menuburger_fourth span:nth-child(2),.t-menuburger_fourth span:nth-child(3){top:4px;opacity:0;}.t-menuburger_fourth span:nth-child(4){top:8px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(2),.t-menuburger_fourth.t-menuburger__small span:nth-child(3){top:3px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(4){top:6px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(2),.t-menuburger_fourth.t-menuburger__small span:nth-child(3){top:3px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(4){top:6px;}.t-menuburger_fourth.t-menuburger__big span:nth-child(2),.t-menuburger_fourth.t-menuburger__big span:nth-child(3){top:6px;}.t-menuburger_fourth.t-menuburger__big span:nth-child(4){top:12px;}@media (hover),(min-width:0\0){.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1){transform:translateY(1px);}.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4){transform:translateY(-1px);}.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1){transform:translateY(3px);}.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4){transform:translateY(-3px);}}.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),.t-menuburger_fourth.t-menuburger-opened span:nth-child(4){top:4px;}.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),.t-menuburger_fourth.t-menuburger-opened span:nth-child(3){opacity:1;}@keyframes t-menuburger-anim{0%{width:80%;left:20%;right:0;}50%{width:100%;left:0;right:0;}100%{width:80%;left:0;right:20%;}}@keyframes t-menuburger-anim2{0%{width:80%;left:0;}50%{width:100%;right:0;left:0;}100%{width:80%;left:20%;right:0;}}</style> </div> </div> <style>.tmenu-mobile{background-color:#111;display:none;width:100%;top:0;z-index:990;}.tmenu-mobile_positionfixed{position:fixed;}.tmenu-mobile__text{color:#fff;}.tmenu-mobile__container{min-height:64px;padding:20px;position:relative;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.tmenu-mobile__list{display:block;}.tmenu-mobile__burgerlogo{display:inline-block;font-size:24px;font-weight:400;white-space:nowrap;vertical-align:middle;}.tmenu-mobile__imglogo{height:auto;display:block;max-width:300px!important;box-sizing:border-box;padding:0;margin:0 auto;}@media screen and (max-width:980px){.tmenu-mobile__menucontent_hidden{display:none;height:100%;}.tmenu-mobile{display:block;}}@media screen and (max-width:980px){#rec831954100 .t-menuburger{-webkit-order:1;-ms-flex-order:1;order:1;}}</style> <style> #rec831954100 .tmenu-mobile__burgerlogo a{font-size:24px;font-weight:700;}</style> <style> #rec831954100 .tmenu-mobile__burgerlogo__title{font-size:24px;font-weight:700;}</style> <div id="nav831954100" class="t456 t456__positionfixed t456__beforeready tmenu-mobile__menucontent_hidden" style="background-color: rgba(255,255,255,0.90); height:65px; " data-bgcolor-hex="#ffffff" data-bgcolor-rgba="rgba(255,255,255,0.90)" data-navmarker="nav831954100marker" data-appearoffset="500px" data-bgopacity-two="90" data-menushadow="" data-menushadow-css="0px 1px 3px rgba(0,0,0,0)" data-bgopacity="0.90" data-bgcolor-rgba-afterscroll="rgba(255,255,255,0.90)" data-menu-items-align="right" data-menu="yes"> <div class="t456__maincontainer " style="height:65px;"> <div class="t456__leftwrapper" style=""> <div class="t456__logowrapper"> <a href="http://tilda.education/en"> <div class="t456__logo t-title" field="title"">Tilda Education</div> </a> </div> </div> <nav class="t456__rightwrapper t456__menualign_right" style=""> <ul role="list" class="t456__list t-menu__list"> <li class="t456__list_item" style="padding:0 15px 0 0;"> <a class="t-menu__link-item" href="https://tilda.education/en/#courses" data-menu-submenu-hook="" data-menu-item-number="1">Courses</a> </li> <li class="t456__list_item" style="padding:0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#guidesandarticles" data-menu-submenu-hook="" data-menu-item-number="2">Guides & Articles</a> </li> <li class="t456__list_item" style="padding:0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#videotutorials" data-menu-submenu-hook="" data-menu-item-number="3">Video Tutorials</a> </li> <li class="t456__list_item" style="padding:0 0 0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#stories" data-menu-submenu-hook="" data-menu-item-number="4">Success Stories</a> </li> </ul> </nav> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_menu__highlightActiveLinks',function() {t_menu__highlightActiveLinks('.t456__list_item a');});t_onFuncLoad('t_menu__findAnchorLinks',function() {t_menu__findAnchorLinks('831954100','.t456__list_item a');});});t_onReady(function() {t_onFuncLoad('t_menu__setBGcolor',function() {t_menu__setBGcolor('831954100','.t456');window.addEventListener('resize',function() {t_menu__setBGcolor('831954100','.t456');});});t_onFuncLoad('t_menu__interactFromKeyboard',function() {t_menu__interactFromKeyboard('831954100');});});t_onReady(function() {var rec=document.querySelector('#rec831954100');if(!rec) return;rec.querySelector('.t456').classList.remove('t456__beforeready');t_onFuncLoad('t_menu__showFixedMenu',function() {t_menu__showFixedMenu('831954100','.t456');window.addEventListener('scroll',t_throttle(function() {t_menu__showFixedMenu('831954100','.t456');}));});});t_onReady(function() {t_onFuncLoad('t_menu__changeBgOpacity',function() {t_menu__changeBgOpacity('831954100','.t456');window.addEventListener('scroll',t_throttle(function() {t_menu__changeBgOpacity('831954100','.t456');}));});});</script> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_menu__createMobileMenu',function() {t_menu__createMobileMenu('831954100','.t456');});});</script> <style>#rec831954100 .t-menu__link-item{-webkit-transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;position:relative;}#rec831954100 .t-menu__link-item:not(.t-active):not(.tooltipstered)::after{content:'';position:absolute;left:0;bottom:20%;opacity:0;width:100%;height:100%;border-bottom:1px solid #ffa282;-webkit-box-shadow:inset 0px -1px 0px 0px #ffa282;-moz-box-shadow:inset 0px -1px 0px 0px #ffa282;box-shadow:inset 0px -1px 0px 0px #ffa282;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;pointer-events:none;}#rec831954100 .t-menu__link-item.t-active:not(.t978__menu-link){color:#000000 !important;}#rec831954100 .t-menu__link-item:not(.t-active):not(.tooltipstered):hover::after{opacity:1;bottom:-1px;}#rec831954100 .t-menu__link-item:not(.t-active):not(.tooltipstered):focus-visible::after{opacity:1;bottom:-1px;}@supports (overflow:-webkit-marquee) and (justify-content:inherit){#rec831954100 .t-menu__link-item,#rec831954100 .t-menu__link-item.t-active{opacity:1 !important;}}</style> <style> #rec831954100 a.t-menusub__link-item{font-weight:400;}</style> <style> #rec831954100 .t456__logowrapper a{font-size:24px;font-weight:700;}#rec831954100 a.t-menu__link-item{font-size:16px;color:#000000;font-weight:400;}</style> <style> #rec831954100 .t456__logo{font-size:24px;font-weight:700;}</style>  <style>#rec831954100 .t456 {box-shadow:0px 1px 3px rgba(0,0,0,0);}</style> </div>  <div id="allrecords" itemprop="description" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="3379564" data-tilda-page-id="17464705" data-tilda-page-alias="en/articles-fonts" data-tilda-formskey="6f20e8cab9363ca37fab290c70306272" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes"> <div id="rec283151399" class="r t-rec" style=" " data-record-type="394"> <style>#allrecords .t-text a:not(.t-card__link),#allrecords .t-descr a:not(.t-card__link),#allrecords .t-heading a:not(.t-card__link):not(.t-feed__link),#allrecords .t-title a:not(.t-card__link),#allrecords .t-impact-text a:not(.t-card__link),#allrecords .t-text-impact a:not(.t-card__link),#allrecords .t-name:not(.t-feed__parts-switch-btn) a:not(.t794__typo):not(.t-menusub__link-item):not(.t-card__link):not(.t-feed__link),#allrecords .t-uptitle a:not(.t-card__link){color:inherit;font-weight:inherit;border-bottom:1px solid #f87458;-webkit-box-shadow:inset 0px -1px 0px 0px #f87458;-moz-box-shadow:inset 0px -1px 0px 0px #f87458;box-shadow:inset 0px -1px 0px 0px #f87458;}</style> </div> <div id="rec743520594" class="r t-rec" style=" " data-animationappear="off" data-record-type="396">  <style>#rec743520594 .t396__artboard {min-height:780px;height:100vh;background-color:#343434;}#rec743520594 .t396__filter {min-height:780px;height:100vh;}#rec743520594 .t396__carrier{min-height:780px;height:100vh;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec743520594 .t396__artboard,#rec743520594 .t396__filter,#rec743520594 .t396__carrier {min-height:530px;}#rec743520594 .t396__filter {}#rec743520594 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec743520594 .t396__artboard,#rec743520594 .t396__filter,#rec743520594 .t396__carrier {min-height:740px;}#rec743520594 .t396__filter {}#rec743520594 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec743520594 .t396__artboard,#rec743520594 .t396__filter,#rec743520594 .t396__carrier {min-height:774px;}#rec743520594 .t396__filter {}#rec743520594 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec743520594 .t396__artboard,#rec743520594 .t396__filter,#rec743520594 .t396__carrier {min-height:650px;}#rec743520594 .t396__filter {}#rec743520594 .t396__carrier {background-attachment:scroll;}}#rec743520594 .tn-elem[data-elem-id="1470209944682"]{color:#ffffff;z-index:3;top:calc(50vh - 390px + 253px);left:calc(50% - 600px + 20px);width:511px;}#rec743520594 .tn-elem[data-elem-id="1470209944682"] .tn-atom{color:#ffffff;font-size:52px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:500;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1470209944682"] {top:163px;left:calc(50% - 480px + 10px);width:408px;}#rec743520594 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:46px;line-height:1.1;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1470209944682"] {top:505px;left:calc(50% - 320px + 10px);width:511px;}#rec743520594 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:42px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1470209944682"] {top:156px;left:calc(50% - 240px + 10px);width:457px;}#rec743520594 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:37px;}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1470209944682"] {top:123px;left:calc(50% - 160px + 11px);width:298px;}#rec743520594 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:26px;}}#rec743520594 .tn-elem[data-elem-id="1470233923389"]{color:#ffffff;z-index:4;top:calc(50vh - 390px + 455px);left:calc(50% - 600px + 20px);width:423px;}#rec743520594 .tn-elem[data-elem-id="1470233923389"] .tn-atom{color:#ffffff;font-size:28px;font-family:'TildaSans',Arial,sans-serif;line-height:1.4;font-weight:400;opacity:0.5;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1470233923389"] {top:339px;left:calc(50% - 480px + 10px);width:387px;}#rec743520594 .tn-elem[data-elem-id="1470233923389"] .tn-atom{font-size:23px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1470233923389"] {top:636px;left:calc(50% - 320px + 10px);width:407px;}#rec743520594 .tn-elem[data-elem-id="1470233923389"] .tn-atom{font-size:22px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1470233923389"] {top:277px;left:calc(50% - 240px + 10px);width:366px;}#rec743520594 .tn-elem[data-elem-id="1470233923389"] .tn-atom{font-size:20px;line-height:1.3;}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1470233923389"] {top:196px;left:calc(50% - 160px + 10px);width:252px;}#rec743520594 .tn-elem[data-elem-id="1470233923389"] .tn-atom{font-size:16px;}}#rec743520594 .tn-elem[data-elem-id="1510223767077"]{color:#ffffff;z-index:5;top:calc(50vh - 390px + 63px);left:calc(50% - 600px + 110px);width:464px;}#rec743520594 .tn-elem[data-elem-id="1510223767077"] .tn-atom{color:#ffffff;font-size:36px;font-family:'TildaSans',Arial,sans-serif;line-height:1.15;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1510223767077"] {top:60px;left:calc(50% - 480px + 100px);width:263px;}#rec743520594 .tn-elem[data-elem-id="1510223767077"] .tn-atom{font-size:30px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1510223767077"] {top:437px;left:calc(50% - 320px + 80px);width:220px;}#rec743520594 .tn-elem[data-elem-id="1510223767077"] .tn-atom{font-size:25px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1510223767077"] {top:78px;left:calc(50% - 240px + 75px);}#rec743520594 .tn-elem[data-elem-id="1510223767077"] .tn-atom{font-size:22px;}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1510223767077"] {top:67px;left:calc(50% - 160px + 61px);width:180px;}#rec743520594 .tn-elem[data-elem-id="1510223767077"] .tn-atom{font-size:18px;}}#rec743520594 .tn-elem[data-elem-id="1696498152215"]{z-index:6;top:calc(50vh - 390px + 48px);left:calc(50% - 600px + 20px);width:70px;height:70px;}#rec743520594 .tn-elem[data-elem-id="1696498152215"] .tn-atom {background-position:center center;background-size:cover;background-repeat:no-repeat;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1696498152215"] {width:60px;height:60px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1696498152215"] {top:426px;left:calc(50% - 320px + 10px);width:50px;height:50px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1696498152215"] {top:65px;}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1696498152215"] {top:57px;left:calc(50% - 160px + 11px);width:40px;height:40px;}}#rec743520594 .tn-elem[data-elem-id="1714728843458"]{z-index:7;top:calc(50vh - 390px + 0px);left:calc(50% - 600px + 691px);width:570px;}#rec743520594 .tn-elem[data-elem-id="1714728843458"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728843458"] {top:-5px;left:calc(50% - 480px + 545px);width:398px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728843458"] {top:0px;left:calc(50% - 320px + 227px);width:305px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728843458"] {top:345px;left:calc(50% - 240px + 116px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728843458"] {top:205px;left:calc(50% - 160px + 56px);}}#rec743520594 .tn-elem[data-elem-id="1714728890804"]{z-index:8;top:calc(50vh - 390px + 277px);left:calc(50% - 600px + 1147px);width:12px;}#rec743520594 .tn-elem[data-elem-id="1714728890804"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728890804"] {top:189px;left:calc(50% - 480px + 863px);width:8px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728890804"] {top:149px;left:calc(50% - 320px + 471px);width:6px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728890804"] {top:494px;left:calc(50% - 240px + 360px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728890804"] {top:354px;left:calc(50% - 160px + 300px);}}#rec743520594 .tn-elem[data-elem-id="1714728901865"]{z-index:9;top:calc(50vh - 390px + 296px);left:calc(50% - 600px + 1136px);width:35px;}#rec743520594 .tn-elem[data-elem-id="1714728901865"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728901865"] {top:202px;left:calc(50% - 480px + 856px);width:24px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728901865"] {top:159px;left:calc(50% - 320px + 465px);width:18px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728901865"] {top:504px;left:calc(50% - 240px + 354px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728901865"] {top:364px;left:calc(50% - 160px + 294px);}}#rec743520594 .tn-elem[data-elem-id="1714728933365"]{z-index:10;top:calc(50vh - 390px + 125px);left:calc(50% - 600px + 867px);width:77px;}#rec743520594 .tn-elem[data-elem-id="1714728933365"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728933365"] {top:82px;left:calc(50% - 480px + 668px);width:54px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728933365"] {top:67px;left:calc(50% - 320px + 321px);width:41px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728933365"] {top:412px;left:calc(50% - 240px + 210px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728933365"] {top:272px;left:calc(50% - 160px + 126px);}}#rec743520594 .tn-elem[data-elem-id="1714728936027"]{z-index:11;top:calc(50vh - 390px + 249px);left:calc(50% - 600px + 634px);width:135px;}#rec743520594 .tn-elem[data-elem-id="1714728936027"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728936027"] {top:169px;left:calc(50% - 480px + 505px);width:94px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728936027"] {top:134px;left:calc(50% - 320px + 196px);width:72px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728936027"] {top:479px;left:calc(50% - 240px + 85px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728936027"] {top:342px;left:calc(50% - 160px + 27px);}}#rec743520594 .tn-elem[data-elem-id="1714728939032"]{z-index:12;top:calc(50vh - 390px + 313px);left:calc(50% - 600px + 943px);width:52px;}#rec743520594 .tn-elem[data-elem-id="1714728939032"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728939032"] {top:214px;left:calc(50% - 480px + 721px);width:36px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728939032"] {top:168px;left:calc(50% - 320px + 362px);width:28px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728939032"] {top:513px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728939032"] {top:373px;left:calc(50% - 160px + 191px);}}#rec743520594 .tn-elem[data-elem-id="1714728940875"]{z-index:13;top:calc(50vh - 390px + 346px);left:calc(50% - 600px + 1012px);width:70px;}#rec743520594 .tn-elem[data-elem-id="1714728940875"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728940875"] {top:216px;left:calc(50% - 480px + 769px);width:49px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728940875"] {top:170px;left:calc(50% - 320px + 399px);width:38px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728940875"] {top:515px;left:calc(50% - 240px + 288px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728940875"] {top:375px;left:calc(50% - 160px + 228px);}}#rec743520594 .tn-elem[data-elem-id="1714728943198"]{z-index:14;top:calc(50vh - 390px + 241px);left:calc(50% - 600px + 792px);width:137px;}#rec743520594 .tn-elem[data-elem-id="1714728943198"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728943198"] {top:142px;left:calc(50% - 480px + 615px);width:96px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728943198"] {top:113px;left:calc(50% - 320px + 281px);width:74px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728943198"] {top:458px;left:calc(50% - 240px + 170px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728943198"] {top:318px;left:calc(50% - 160px + 110px);}}#rec743520594 .tn-elem[data-elem-id="1714728836295"]{z-index:15;top:calc(50vh - 390px + 397px);left:calc(50% - 600px + 531px);width:570px;}#rec743520594 .tn-elem[data-elem-id="1714728836295"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec743520594 .tn-elem[data-elem-id="1714728836295"] {top:272px;left:calc(50% - 480px + 433px);width:398px;}}@media screen and (max-width:959px) {#rec743520594 .tn-elem[data-elem-id="1714728836295"] {top:213px;left:calc(50% - 320px + 141px);width:305px;}}@media screen and (max-width:639px) {#rec743520594 .tn-elem[data-elem-id="1714728836295"] {top:558px;left:calc(50% - 240px + 30px);}}@media screen and (max-width:479px) {#rec743520594 .tn-elem[data-elem-id="1714728836295"] {top:418px;left:calc(50% - 160px + -30px);}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="743520594" data-artboard-screens="320,480,640,960,1200" data-artboard-height="780" data-artboard-valign="center" data-artboard-height_vh="100" data-artboard-upscale="grid" data-artboard-height-res-320="650" data-artboard-height-res-480="774" data-artboard-height-res-640="740" data-artboard-height-res-960="530"> <div class="t396__carrier" data-artboard-recid="743520594"></div> <div class="t396__filter" data-artboard-recid="743520594"></div> <div class='t396__elem tn-elem tn-elem__7435205941470209944682' data-elem-id='1470209944682' data-elem-type='text' data-field-top-value="253" data-field-left-value="20" data-field-width-value="511" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="123" data-field-left-res-320-value="11" data-field-width-res-320-value="298" data-field-top-res-480-value="156" data-field-left-res-480-value="10" data-field-width-res-480-value="457" data-field-top-res-640-value="505" data-field-left-res-640-value="10" data-field-width-res-640-value="511" data-field-top-res-960-value="163" data-field-left-res-960-value="10" data-field-width-res-960-value="408"> <h1 itemprop="headline" class='tn-atom'field='tn_text_1470209944682'>How To Choose Fonts For a Website Or an Article</h1> </div> <div class='t396__elem tn-elem tn-elem__7435205941470233923389' data-elem-id='1470233923389' data-elem-type='text' data-field-top-value="455" data-field-left-value="20" data-field-width-value="423" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="196" data-field-left-res-320-value="10" data-field-width-res-320-value="252" data-field-top-res-480-value="277" data-field-left-res-480-value="10" data-field-width-res-480-value="366" data-field-top-res-640-value="636" data-field-left-res-640-value="10" data-field-width-res-640-value="407" data-field-top-res-960-value="339" data-field-left-res-960-value="10" data-field-width-res-960-value="387"> <div class='tn-atom'field='tn_text_1470233923389'><span style="font-weight: 400;">This guide will help you choose the</span> <span style="font-weight: 400;">right font with less theory</span></div> </div> <div class='t396__elem tn-elem tn-elem__7435205941510223767077' data-elem-id='1510223767077' data-elem-type='text' data-field-top-value="63" data-field-left-value="110" data-field-width-value="464" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="67" data-field-left-res-320-value="61" data-field-width-res-320-value="180" data-field-top-res-480-value="78" data-field-left-res-480-value="75" data-field-top-res-640-value="437" data-field-left-res-640-value="80" data-field-width-res-640-value="220" data-field-top-res-960-value="60" data-field-left-res-960-value="100" data-field-width-res-960-value="263"> <div class='tn-atom'><a href="https://tilda.education/en/"target="_blank"style="color: inherit">Tilda Education</a></div> </div> <div class='t396__elem tn-elem tn-elem__7435205941696498152215' data-elem-id='1696498152215' data-elem-type='shape' data-field-top-value="48" data-field-left-value="20" data-field-height-value="70" data-field-width-value="70" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="57" data-field-left-res-320-value="11" data-field-height-res-320-value="40" data-field-width-res-320-value="40" data-field-top-res-480-value="65" data-field-top-res-640-value="426" data-field-left-res-640-value="10" data-field-height-res-640-value="50" data-field-width-res-640-value="50" data-field-height-res-960-value="60" data-field-width-res-960-value="60"> <a class='tn-atom t-bgimg' href="https://tilda.education/en/" data-original="https://static.tildacdn.com/tild6163-6433-4230-a339-313863303763/Black_Logo_5.svg"> </a> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728843458' data-elem-id='1714728843458' data-elem-type='image' data-field-top-value="0" data-field-left-value="691" data-field-width-value="570" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-filewidth-value="637" data-field-fileheight-value="600" data-field-top-res-320-value="205" data-field-left-res-320-value="56" data-field-top-res-480-value="345" data-field-left-res-480-value="116" data-field-top-res-640-value="0" data-field-left-res-640-value="227" data-field-width-res-640-value="305" data-field-top-res-960-value="-5" data-field-left-res-960-value="545" data-field-width-res-960-value="398"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3666-3232-4163-a462-636464613637/2.svg' alt='' imgfield='tn_img_1714728843458' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728890804' data-elem-id='1714728890804' data-elem-type='image' data-field-top-value="277" data-field-left-value="1147" data-field-width-value="12" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-filewidth-value="14" data-field-fileheight-value="294" data-field-top-res-320-value="354" data-field-left-res-320-value="300" data-field-top-res-480-value="494" data-field-left-res-480-value="360" data-field-top-res-640-value="149" data-field-left-res-640-value="471" data-field-width-res-640-value="6" data-field-top-res-960-value="189" data-field-left-res-960-value="863" data-field-width-res-960-value="8"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3539-3430-4862-b036-313134663365/Rectangle_41519.svg' alt='' imgfield='tn_img_1714728890804' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728901865' data-elem-id='1714728901865' data-elem-type='image' data-field-top-value="296" data-field-left-value="1136" data-field-width-value="35" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-prx-s="90" data-animate-mobile="y" data-field-filewidth-value="40" data-field-fileheight-value="40" data-field-top-res-320-value="364" data-field-left-res-320-value="294" data-field-top-res-480-value="504" data-field-left-res-480-value="354" data-field-top-res-640-value="159" data-field-left-res-640-value="465" data-field-width-res-640-value="18" data-field-top-res-960-value="202" data-field-left-res-960-value="856" data-field-width-res-960-value="24"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3638-3739-4337-b336-333237626338/Ellipse_12281.svg' alt='' imgfield='tn_img_1714728901865' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728933365' data-elem-id='1714728933365' data-elem-type='image' data-field-top-value="125" data-field-left-value="867" data-field-width-value="77" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-prx-s="110" data-animate-mobile="y" data-field-filewidth-value="88" data-field-fileheight-value="89" data-field-top-res-320-value="272" data-field-left-res-320-value="126" data-field-top-res-480-value="412" data-field-left-res-480-value="210" data-field-top-res-640-value="67" data-field-left-res-640-value="321" data-field-width-res-640-value="41" data-field-top-res-960-value="82" data-field-left-res-960-value="668" data-field-width-res-960-value="54"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6665-6239-4464-a530-326232356363/Group_2087328782.svg' alt='' imgfield='tn_img_1714728933365' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728936027' data-elem-id='1714728936027' data-elem-type='image' data-field-top-value="249" data-field-left-value="634" data-field-width-value="135" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-prx-s="90" data-animate-mobile="y" data-field-filewidth-value="153" data-field-fileheight-value="203" data-field-top-res-320-value="342" data-field-left-res-320-value="27" data-field-top-res-480-value="479" data-field-left-res-480-value="85" data-field-top-res-640-value="134" data-field-left-res-640-value="196" data-field-width-res-640-value="72" data-field-top-res-960-value="169" data-field-left-res-960-value="505" data-field-width-res-960-value="94"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3166-3831-4365-b532-643032333530/T.svg' alt='' imgfield='tn_img_1714728936027' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728939032' data-elem-id='1714728939032' data-elem-type='image' data-field-top-value="313" data-field-left-value="943" data-field-width-value="52" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-mobile="y" data-field-filewidth-value="59" data-field-fileheight-value="95" data-field-top-res-320-value="373" data-field-left-res-320-value="191" data-field-top-res-480-value="513" data-field-left-res-480-value="251" data-field-top-res-640-value="168" data-field-left-res-640-value="362" data-field-width-res-640-value="28" data-field-top-res-960-value="214" data-field-left-res-960-value="721" data-field-width-res-960-value="36"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6261-3939-4366-b438-353037393534/P.svg' alt='' imgfield='tn_img_1714728939032' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728940875' data-elem-id='1714728940875' data-elem-type='image' data-field-top-value="346" data-field-left-value="1012" data-field-width-value="70" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-prx-s="90" data-animate-mobile="y" data-field-filewidth-value="79" data-field-fileheight-value="71" data-field-top-res-320-value="375" data-field-left-res-320-value="228" data-field-top-res-480-value="515" data-field-left-res-480-value="288" data-field-top-res-640-value="170" data-field-left-res-640-value="399" data-field-width-res-640-value="38" data-field-top-res-960-value="216" data-field-left-res-960-value="769" data-field-width-res-960-value="49"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6636-6636-4834-b531-646530373532/E.svg' alt='' imgfield='tn_img_1714728940875' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728943198' data-elem-id='1714728943198' data-elem-type='image' data-field-top-value="241" data-field-left-value="792" data-field-width-value="137" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-mobile="y" data-field-filewidth-value="156" data-field-fileheight-value="221" data-field-top-res-320-value="318" data-field-left-res-320-value="110" data-field-top-res-480-value="458" data-field-left-res-480-value="170" data-field-top-res-640-value="113" data-field-left-res-640-value="281" data-field-width-res-640-value="74" data-field-top-res-960-value="142" data-field-left-res-960-value="615" data-field-width-res-960-value="96"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6664-6131-4035-a334-396339636563/Y.svg' alt='' imgfield='tn_img_1714728943198' /> </div> </div> <div class='t396__elem tn-elem tn-elem__7435205941714728836295' data-elem-id='1714728836295' data-elem-type='image' data-field-top-value="397" data-field-left-value="531" data-field-width-value="570" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-prx="scroll" data-animate-prx-s="80" data-animate-mobile="y" data-field-filewidth-value="543" data-field-fileheight-value="365" data-field-top-res-320-value="418" data-field-left-res-320-value="-30" data-field-top-res-480-value="558" data-field-left-res-480-value="30" data-field-top-res-640-value="213" data-field-left-res-640-value="141" data-field-width-res-640-value="305" data-field-top-res-960-value="272" data-field-left-res-960-value="433" data-field-width-res-960-value="398"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3639-6638-4033-a362-643738666636/1.svg' alt='' imgfield='tn_img_1714728836295' /> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('743520594');});});</script>  </div> <div id="rec283151401" class="r t-rec t-rec_pt_90 t-rec_pb_45" style="padding-top:90px;padding-bottom:45px; " data-record-type="127">  <div class="t119"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div class="t119__preface t-descr" field="text">Font is very important. Using the right font is like breathing, you don’t seem to notice once all the necessary condition is perfect. However, most people have no idea of the typeface, the names, and characteristics (and that is okay). However, they could easily sense something missing once they use the wrong font on their website.</div> </div> </div> </div> <style> #rec283151401 .t119__preface{opacity:0.7;}</style> </div> <div id="rec283151402" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">In this article, we explained some of the essentials you need to make the right selection considering that you are building your website on Tilda, the all-in-one platform that allows anyone to create a website without hiring a web developer or a professional designer.</div> </div> </div> </div> </div> <div id="rec283151403" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 400;">Contents:</span><br /><br /><a href="#adjustment">Changing and Adjusting Fonts</a><br /><a href="#properties">How to Set Font Properties Based on the Project</a><br /><a href="#accordance">Setting Fonts for a Website in Accordance to the Message</a><br /><a href="#combos">Examples of Beautiful Font Combinations</a><br /><a href="#article">Choosing Fonts for an Article</a><br /><a href="#extra">Adding Extra Fonts</a><br /><a href="#shop">Where to Buy Fonts or Find Them for Free</a><br /><a href="#readability">How to Increase Readability on Your Website</a></div> </div> </div> </div> </div> <div id="rec783009053" class="r t-rec" style=" " data-record-type="215"> <a name="adjustment" style="font-size:0;"></a> </div> <div id="rec283151404" class="r t-rec t-rec_pt_180 t-rec_pb_90" style="padding-top:180px;padding-bottom:90px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title">Changing and Adjusting Fonts</div> </div> </div> </div> <style> #rec283151404 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec283151405" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height: 40px; font-size: 30px;" data-customstyle="yes"><span style="font-size: 30px;">You can easily change the font on a website and apply the effect across all blocks and pages. This feature allows you to create a unified and clear style.</span></div></div> </div> </div> </div> </div> <div id="rec283151406" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can upload a maximum of two fonts. Using a limited number of fonts creates a good visual experience. Moreover, the use of additional fonts can slow down the page load speed. That is why there are only two fonts.<br /><br />In the "Site Settings," proceed and click on "Fonts and Colors." This command will take you to the basic fonts selected by our professional designers. Once you find the most preferred font, click “Select” and “Save changes.” Once this is in place, the font on the website changes automatically.</div> </div> </div> </div> </div> <div id="rec749746957" class="r t-rec t-rec_pt_30 t-rec_pb_45" style="padding-top:30px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3963-3037-4163-a535-653837383733/Fonts_1.png"> <img itemprop="image" class="t-img t-width t107__width t-width_10" src="/upload/pages/17464705/tild3963-3037-4163-a535-653837383733__-__empty__fonts_1.png" data-original="https://static.tildacdn.com/tild3963-3037-4163-a535-653837383733/Fonts_1.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283151408" class="r t-rec t-rec_pt_15 t-rec_pb_60" style="padding-top:15px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height: 32px;" data-customstyle="yes"><span style="font-weight: 400;">If none of the basic fonts is suitable enough, click on “Custom settings.” This will launch a list of different options allowing you to add a preferred font to Tilda, like:</span><br /><br /><span style="font-weight: 400;">1) </span><a href="http://help.tilda.ws/fonts#rec2090060" target="_blank" style="color: rgb(64, 64, 64); border-bottom: 1px solid rgb(248, 116, 88); box-shadow: none; text-decoration: none; font-weight: 400;">Select a font from the pre-loaded font collection</a><br /><span style="font-weight: 400;">2) </span><a href="http://help.tilda.ws/fonts" target="_blank" style="color: rgb(64, 64, 64); border-bottom: 1px solid rgb(248, 116, 88); box-shadow: none; text-decoration: none; font-weight: 400;">Upload your own font</a><br /><span style="font-weight: 400;">3) </span><a href="http://help.tilda.ws/fonts#rec2090064" target="_blank" style="color: rgb(64, 64, 64); border-bottom: 1px solid rgb(248, 116, 88); box-shadow: none; text-decoration: none; font-weight: 400;">Install the font with Adobe Fonts </a><br /><span style="font-weight: 400;">4) </span><a href="http://help.tilda.ws/fonts#googlefonts" target="_blank" style="color: rgb(64, 64, 64); border-bottom: 1px solid rgb(248, 116, 88); box-shadow: none; text-decoration: none; font-weight: 400;">Use Google Fonts</a><br /><span style="font-weight: 400;">5) </span><a href="http://help.tilda.ws/fonts#rec2090089" target="_blank" style="color: rgb(64, 64, 64); border-bottom: 1px solid rgb(248, 116, 88); box-shadow: none; text-decoration: none;">Upload your CSS file</a><br /><br />For detailed how-to guides, follow the links above.</div></div> </div> </div> </div> </div> <div id="rec305912438" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3933-3631-4262-b432-326637653431/basic-fonts.png"> <img itemprop="image" class="t-img t-width t107__width t-width_10" src="/upload/pages/17464705/tild3933-3631-4262-b432-326637653431__-__empty__basic-fonts.png" data-original="https://static.tildacdn.com/tild3933-3631-4262-b432-326637653431/basic-fonts.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283151410" class="r t-rec t-rec_pt_15 t-rec_pb_60" style="padding-top:15px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Once you scroll down the page, you will find the font size, weight, and color settings. The parameters used at the phase will be applied site-wide. If you want to change the font, you can do so in the editor specified for each block.</div> </div> </div> </div> </div> <div id="rec283151412" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6439-6437-4763-a630-643632613737/size-and-colors.png"> <img itemprop="image" class="t-img t-width t107__width t-width_10" src="/upload/pages/17464705/tild6439-6437-4763-a630-643632613737__-__empty__size-and-colors.png" data-original="https://static.tildacdn.com/tild6439-6437-4763-a630-643632613737/size-and-colors.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283151413" class="r t-rec" style=" " data-record-type="376"> <div class="t376" data-section-bg-color="#f0f0f0" style="display:none;"></div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t376_setbg',function() {t376_setbg();var t376_timer=window.setInterval(function() {t376_setbg();},4000);});});</script> </div> <div id="rec283151414" class="r t-rec t-rec_pt_90 t-rec_pb_30" style="padding-top:90px;padding-bottom:30px; " data-animationappear="off" data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">What are font-weights?</div> </div> </div> </div> </div> <div id="rec283151415" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Font-weight explains the thickness associated with each font. Fonts have two basic styles -regular or bold with an additional thickness that ranges from super light to super bold. Tilda supports five basic weights such as light, regular, medium, semibold, and bold. Although these weights are limited and some fonts have only two weights: Regular and Bold.</div> </div> </div> </div> </div> <div id="rec283151416" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-animationappear="off" data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6639-3531-4430-b335-383861616231/weight1jpg.jpg"> <img itemprop="image" class="t-img t-width t107__width t-width_10" src="/upload/pages/17464705/tild6639-3531-4430-b335-383861616231__-__empty__weight1jpg.jpg" data-original="https://static.tildacdn.com/tild6639-3531-4430-b335-383861616231/weight1jpg.jpg" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">There are seven variants of font-weight for Avenir.</div> </div> </div> </div> </div> <div id="rec283151683" class="r t-rec t-rec_pt_90 t-rec_pb_30" style="padding-top:90px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">What is the best font size for a website?</div> </div> </div> </div> </div> <div id="rec283151684" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">The size of the font you intend to use depends on the volume of content used on the website. If the website you're working on has content like captions and comments, you can increase the font size to 22px (the default font size is 20px). On the other hand, if the website requires a lot of text, you can make the font size smaller (18px) to improve the readability.</div> </div> </div> </div> </div> <div id="rec283151685" class="r t-rec" style=" " data-record-type="376"> <div class="t376" data-section-bg-color="#ffffff" style="display:none;"></div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t376_setbg',function() {t376_setbg();var t376_timer=window.setInterval(function() {t376_setbg();},4000);});});</script> </div> <div id="rec783010559" class="r t-rec" style=" " data-record-type="215"> <a name="properties" style="font-size:0;"></a> </div> <div id="rec283151686" class="r t-rec t-rec_pt_180 t-rec_pb_90" style="padding-top:180px;padding-bottom:90px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title">How to Set Font Properties Based on the Project</div> </div> </div> </div> <style> #rec283151686 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec283151687" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height: 40px;" data-customstyle="yes"><span style="font-size: 30px;">Ask yourself: what type of web project are you working on? Is it an article, a blog post, or a long read where content is king? It could be a website, a landing page, or a photo story with few texts.</span> </div></div> </div> </div> </div> </div> <div id="rec283151688" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-animationappear="off" data-record-type="334"> <div class="t334"> <div class="t-container "> <div class="t334__col t-col t-col_6 t-align_left "> <a href="#rec283151689" target=""> <div class="t334__table" style="height:300px;"> <div class="t334__cell t-align_left t-valign_top t334__button-bottom"> <div class="t334__bg t334__animation_fast t334__bg_animated t-bgimg" bgimgfield="img" data-original="" style=""></div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1)); background-image: -webkit-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1)); background-image: -o-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1)); background-image: -ms-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1));"></div> <div class="t334__textwrapper t334__animation_fast t334__textwrapper_animated"> <div class="t334__textwrapper__content"> <div class="t334__title t-title t-title_xxs" field="title"><div style="color:#000000;" data-customstyle="yes">Fonts for websites</div></div> <div class="t334__text t-descr t-descr_xs" field="text"><div style="color: rgb(0, 0, 0);" data-customstyle="yes"><span style="font-weight: 400;">Landing pages, multi-page websites, online stores </span></div></div> </div> </div> <div class="t334__button-container"> <div class="t334__button-wrapper"> <div class="t334__submit t-btn " style="color:#000000;background-color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;">Learn more</div> </div> </div> </div> </div> </a> </div> <div class="t334__col t-col t-col_6 t-align_left "> <a href="#rec283152587" target=""> <div class="t334__table" style="height:300px;"> <div class="t334__cell t-align_left t-valign_top t334__button-bottom"> <div class="t334__bg t334__animation_fast t334__bg_animated t-bgimg" bgimgfield="img2" data-original="" style=""></div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1)); background-image: -webkit-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1)); background-image: -o-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1)); background-image: -ms-linear-gradient(top, rgba(230,230,230,1), rgba(230,230,230,1));"></div> <div class="t334__textwrapper t334__animation_fast t334__textwrapper_animated"> <div class="t334__textwrapper__content"> <div class="t334__title t-title t-title_xxs" field="title2"><div style="color:#000000;" data-customstyle="yes">Fonts for articles</div></div> <div class="t334__text t-descr t-descr_xs" field="text2"><div style="color: rgb(0, 0, 0);" data-customstyle="yes"><span style="font-weight: 400;">Blog posts, editorials, long reads, storytelling, interviews</span></div></div> </div> </div> <div class="t334__button-container"> <div class="t334__button-wrapper"> <div class="t334__submit t-btn " style="color:#000000;background-color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;">Learn more</div> </div> </div> </div> </div> </a> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t334_init',function() {t334_init('283151688');var rec=document.getElementById('rec283151688');if(!rec) return;var wrapperBlock=rec.querySelector('.t334');if(wrapperBlock) {wrapperBlock.addEventListener('displayChanged',function() {t334_init('283151688');});}});});</script> </div> <div id="rec783011586" class="r t-rec" style=" " data-record-type="215"> <a name="accordance" style="font-size:0;"></a> </div> <div id="rec283151689" class="r t-rec t-rec_pt_180 t-rec_pb_90" style="padding-top:180px;padding-bottom:90px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title">Setting Fonts for a Website in Accordance to the Message</div> </div> </div> </div> <style> #rec283151689 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec283151691" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="font-size: 30px; line-height: 40px;" data-customstyle="yes"><span style="font-weight: 400; font-size: 30px;">When you are starting to design a website, it is important to decide if the default font is in line with the characteristics of the website. The fact is you don't expect a kids' sports camp website with an architecture website to look the same. And one of the best ways to express the difference is with the use of font weights.</span></div></div> </div> </div> </div> </div> <div id="rec283151692" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">The next phase is to look at the four different font weights recommended for title and text. This feature helps to strike a balance on the tone of voice.<br /><br /></div> </div> </div> </div> </div> <div id="rec283151693" class="r t-rec t-rec_pt_135 t-rec_pb_45" style="padding-top:135px;padding-bottom:45px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 1 </div> </div> </div> <div id="rec283151694" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Semibold title + Normal text</div> </div> </div> </div> </div> <div id="rec283151695" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">This is a basic blend that is compatible with most websites. We recommend this if you intend to keep the website's style unified and not call attention to any specific element.<br /><br />Use the following parameters in website settings:<br />Body text font weight — Normal<br />Heading font weight — Semi-Bold</div> </div> </div> </div> </div> <div id="rec305922826" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3333-3465-4533-a634-643933323562/Frame_2_1.png"> <img itemprop="image" class="t-img t-width t107__width t-width_8" src="/upload/pages/17464705/tild3333-3465-4533-a634-643933323562__-__empty__frame_2_1.png" data-original="https://static.tildacdn.com/tild3333-3465-4533-a634-643933323562/Frame_2_1.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Site Settings → Font and Colors → Size and Weight</div> </div> </div> </div> </div> <div id="rec283151697" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle">Job ad web page. Fonts: Open Sans (heading) and Roboto (body text)</div> </div> </div> </div> </div> <div id="rec283151698" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3563-3266-4363-a365-353438613339/fsfeeee.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3563-3266-4363-a365-353438613339__-__empty__fsfeeee.png" data-original="https://static.tildacdn.com/tild3563-3266-4363-a365-353438613339/fsfeeee.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283151699" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3932-3736-4262-b136-383734613866/grgrrr.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3932-3736-4262-b136-383734613866__-__empty__grgrrr.png" data-original="https://static.tildacdn.com/tild3932-3736-4262-b136-383734613866/grgrrr.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283152144" class="r t-rec t-rec_pt_150 t-rec_pb_45" style="padding-top:150px;padding-bottom:45px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 2 </div> </div> </div> <div id="rec283152145" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Bold title + Normal text</div> </div> </div> </div> </div> <div id="rec283152146" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">We recommend this combination if you’re working on a drive and energy project.<br /><br />It is recommended on websites meant for concerts, tour promotions, bars, coworking spaces, sports competitions, and so on.<br /><br />Use the following parameters in website settings:<br />Body text font weight — Normal<br />Heading font weight — Bold</div> </div> </div> </div> </div> <div id="rec283152147" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3739-6434-4731-b836-623266346561/Normal_bold_1.png"> <img itemprop="image" class="t-img t-width t107__width t-width_8" src="/upload/pages/17464705/tild3739-6434-4731-b836-623266346561__-__empty__normal_bold_1.png" data-original="https://static.tildacdn.com/tild3739-6434-4731-b836-623266346561/Normal_bold_1.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Site Settings → Font and Colors → Size and Weight</div> </div> </div> </div> </div> <div id="rec283152148" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle">Website for a c<span style="font-weight: 400;">oworking space. Fonts: Ubuntu (heading) and PT Sans (body text)</span></div> </div> </div> </div> </div> <div id="rec283152149" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3633-3265-4230-b064-313866633632/jyjyuyy.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3633-3265-4230-b064-313866633632__-__empty__jyjyuyy.png" data-original="https://static.tildacdn.com/tild3633-3265-4230-b064-313866633632/jyjyuyy.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283152150" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6635-6430-4534-a236-653231336161/dffeeee.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild6635-6430-4534-a236-653231336161__-__empty__dffeeee.png" data-original="https://static.tildacdn.com/tild6635-6430-4534-a236-653231336161/dffeeee.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283152151" class="r t-rec t-rec_pt_150 t-rec_pb_45" style="padding-top:150px;padding-bottom:45px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 3 </div> </div> </div> <div id="rec283152152" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Bold title + Thin text</div> </div> </div> </div> </div> <div id="rec283152153" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">This combination is pretty rare; it appears dramatic due to the contrast used on the fonts. However, it is a perfect blend of drive and style. For example, standout and easy-to-read titles and texts reflect aesthetically pleasing design in this landing page course <a href="https://tilda.education/en/landing-page-course" target="_blank">website</a>.<br /><br />Use the following parameters in website settings:<br />Body text font weight — Light<br />Heading font weight — Bold</div> </div> </div> </div> </div> <div id="rec283152154" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6261-3062-4435-b435-386131616662/Light___Bold_2.png"> <img itemprop="image" class="t-img t-width t107__width t-width_8" src="/upload/pages/17464705/tild6261-3062-4435-b435-386131616662__-__empty__light___bold_2.png" data-original="https://static.tildacdn.com/tild6261-3062-4435-b435-386131616662/Light___Bold_2.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Site Settings → Font and Colors → Size and Weight</div> </div> </div> </div> </div> <div id="rec283152155" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle"><span style="font-weight: 400;">Design studio web page. Fonts: Noto Sans (heading) and Open Sans (body text)</span></div> </div> </div> </div> </div> <div id="rec283152156" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3730-3561-4033-b234-353933303338/grrrrr.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3730-3561-4033-b234-353933303338__-__empty__grrrrr.png" data-original="https://static.tildacdn.com/tild3730-3561-4033-b234-353933303338/grrrrr.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283152157" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3732-3830-4766-b630-653834666639/Untitled2.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3732-3830-4766-b630-653834666639__-__empty__untitled2.png" data-original="https://static.tildacdn.com/tild3732-3830-4766-b630-653834666639/Untitled2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283152158" class="r t-rec t-rec_pt_90 t-rec_pb_45" style="padding-top:90px;padding-bottom:45px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 4 </div> </div> </div> <div id="rec283152160" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Thin title + Thin text</div> </div> </div> </div> </div> <div id="rec283152161" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">This is a perfect combination for projects meant to look attractive and strong to call attention like state-of-the-art technology, progress, or high tech. This blend of font appears perfect when used on a page with plenty of white space accented with bright-colored spots and beautiful images.<br /><br />Suitable for websites featuring gadgets, jewelry, upmarket cafés or restaurants, and beauty parlors.<br /><br />Use the following parameters in website settings:<br />Body text font weight — Light<br />Heading font weight — Light</div> </div> </div> </div> </div> <div id="rec283152581" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3764-3933-4130-b730-373362303365/Light___Light_1.png"> <img itemprop="image" class="t-img t-width t107__width t-width_8" src="/upload/pages/17464705/tild3764-3933-4130-b730-373362303365__-__empty__light___light_1.png" data-original="https://static.tildacdn.com/tild3764-3933-4130-b730-373362303365/Light___Light_1.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Site Settings → Font and Colors → Size and Weight</div> </div> </div> </div> </div> <div id="rec283152582" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle">Landing page for a photo processing mobile app<span style="font-weight: 400;">. Fonts: Open Sans (heading) and Open Sans (body text)</span></div> </div> </div> </div> </div> <div id="rec283152583" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3437-3961-4364-b564-356235353762/greeee.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3437-3961-4364-b564-356235353762__-__empty__greeee.png" data-original="https://static.tildacdn.com/tild3437-3961-4364-b564-356235353762/greeee.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283152584" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6233-6137-4137-b261-376262303638/fuiii.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild6233-6137-4137-b261-376262303638__-__empty__fuiii.png" data-original="https://static.tildacdn.com/tild6233-6137-4137-b261-376262303638/fuiii.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec783012198" class="r t-rec" style=" " data-record-type="215"> <a name="combos" style="font-size:0;"></a> </div> <div id="rec283152585" class="r t-rec t-rec_pt_120 t-rec_pb_60" style="padding-top:120px;padding-bottom:60px;background-color:#f0f0f0; " data-animationappear="off" data-record-type="33" data-bg-color="#f0f0f0">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">Examples of Beautiful Font Combinations</div> <div class="t017__descr t-descr t-descr_xs" field="descr"><span style="font-weight: 400;">Combining different fonts in your headings and body text will help you achieve varying degrees of overall visual impact and express the character and tone of voice of your website.</span></div> </div> </div> </div> </div> <div id="rec777648299" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f0f0f0; " data-animationappear="off" data-record-type="670" data-bg-color="#f0f0f0">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left " aria-controls="carousel_777648299" aria-disabled="false" aria-label="Previous slide"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 21px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 21.3 41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 20.5,20.5 0.5,40.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right " aria-controls="carousel_777648299" aria-disabled="false" aria-label="Next slide"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 21px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 21.3 41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 20.5,20.5 0.5,40.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_8 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_777648299" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 of 3"> <div class="t-width t-width_8 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3033-3935-4139-b339-343835386130/pooilo.png"><meta itemprop="caption" content="Jewelry store website"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3033-3935-4139-b339-343835386130__-__empty__pooilo.png" data-original="https://static.tildacdn.com/tild3033-3935-4139-b339-343835386130/pooilo.png" alt="Jewelry store website"> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 of 3"> <div class="t-width t-width_8 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3339-3035-4133-b531-386538623037/lpppp.png"><meta itemprop="caption" content="A landing page for a conference"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3339-3035-4133-b531-386538623037__-__empty__lpppp.png" data-original="https://static.tildacdn.com/tild3339-3035-4133-b531-386538623037/lpppp.png" alt="A landing page for a conference"> </div> </div> </div> <div class="t-slds__item" data-slide-index="3" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="3 of 3"> <div class="t-width t-width_8 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3637-3532-4464-b933-623933656436/yjyjuuu.png"><meta itemprop="caption" content="Law firm website"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3637-3532-4464-b933-623933656436__-__empty__yjyjuuu.png" data-original="https://static.tildacdn.com/tild3637-3532-4464-b933-623933656436/yjyjuuu.png" alt="Law firm website"> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 1" aria-current="true" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 2" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="3"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 3" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> <div class="t-slds__caption t-col t-col_8 t-prefix_2 t-slds__caption-active" data-slide-caption="1"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__0">Jewelry store website</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="2"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__1">A landing page for a conference</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="3"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__2">Law firm website</div> </div> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('777648299',false);});});</script> <style>#rec777648299 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec777648299 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> <style> #rec777648299 .t-slds__title{font-weight:400;}</style> </div> <div id="rec783013063" class="r t-rec" style=" " data-record-type="215"> <a name="article" style="font-size:0;"></a> </div> <div id="rec283152587" class="r t-rec t-rec_pt_180 t-rec_pb_90" style="padding-top:180px;padding-bottom:90px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t015__title t-title t-title_lg" field="title">Choosing Fonts for an Article</div> </div> </div> </div> <style> #rec283152587 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec283152588" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height: 40px;" data-customstyle="yes"><span style="font-size: 30px;">Do you intend to have your articles skim-friendly? Then ensure you use good contrasts and a medium-sized font that is not too large.</span><br /><br />If the content you are working with is lengthy, try to use an 18px font size. Alternatively, if you’re designing a photo essay that uses text mainly on the captions, increase the font size to 20px or 22px.<br /><br />Use the following parameters in website settings:<br />Body text font weight — Normal<br />Heading font weight — Bold / Semi-Bold<br />Body text font size — 18px</div></div> </div> </div> </div> </div> <div id="rec283152589" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6435-6130-4665-b431-346534363339/Nprmal_Semi_Bold_18_.png"> <img itemprop="image" class="t-img t-width t107__width t-width_8" src="/upload/pages/17464705/tild6435-6130-4665-b431-346534363339__-__empty__nprmal_semi_bold_18_.png" data-original="https://static.tildacdn.com/tild6435-6130-4665-b431-346534363339/Nprmal_Semi_Bold_18_.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Site Settings → Font and Colors → Size and Weight</div> </div> </div> </div> </div> <div id="rec283152590" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle">F<span style="font-weight: 400;">ashion blog</span></div> </div> </div> </div> </div> <div id="rec283152591" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3139-3966-4961-a566-326230643438/dgtgrrrr.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3139-3966-4961-a566-326230643438__-__empty__dgtgrrrr.png" data-original="https://static.tildacdn.com/tild3139-3966-4961-a566-326230643438/dgtgrrrr.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283154368" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3530-6236-4064-b561-313338326162/jyttttttt.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3530-6236-4064-b561-313338326162__-__empty__jyttttttt.png" data-original="https://static.tildacdn.com/tild3530-6236-4064-b561-313338326162/jyttttttt.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283154369" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle"><span style="font-weight: 400;">Corporate blog</span></div> </div> </div> </div> </div> <div id="rec283154370" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3864-3362-4632-b437-373931323138/hyyyyy.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3864-3362-4632-b437-373931323138__-__empty__hyyyyy.png" data-original="https://static.tildacdn.com/tild3864-3362-4632-b437-373931323138/hyyyyy.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283154371" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6337-3234-4935-b931-313130373639/hjjii.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild6337-3234-4935-b931-313130373639__-__empty__hjjii.png" data-original="https://static.tildacdn.com/tild6337-3234-4935-b931-313130373639/hjjii.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283154372" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title"><span style="font-weight: 400;">Example</span></div> <div class="t120__descr t-descr t-descr_xs" field="subtitle">Online m<span style="font-weight: 400;">arketing article</span></div> </div> </div> </div> </div> <div id="rec283154373" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-6330-4232-a634-336236643432/liiiii.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild3461-6330-4232-a634-336236643432__-__empty__liiiii.png" data-original="https://static.tildacdn.com/tild3461-6330-4232-a634-336236643432/liiiii.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283154374" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6161-3166-4361-a437-363966396636/yhyuuuu.png"> <img itemprop="image" class="t-img t-width t107__width t-width_12" src="/upload/pages/17464705/tild6161-3166-4361-a437-363966396636__-__empty__yhyuuuu.png" data-original="https://static.tildacdn.com/tild6161-3166-4361-a437-363966396636/yhyuuuu.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec283154375" class="r t-rec" style=" " data-record-type="376"> <div class="t376" data-section-bg-color="#e6e6e6" style="display:none;"></div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t376_setbg',function() {t376_setbg();var t376_timer=window.setInterval(function() {t376_setbg();},4000);});});</script> </div> <div id="rec283154376" class="r t-rec t-rec_pt_90 t-rec_pb_45" style="padding-top:90px;padding-bottom:45px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">With or without serifs?</div> </div> </div> </div> </div> <div id="rec283154377" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-animationappear="off" data-record-type="334"> <div class="t334"> <div class="t-container "> <div class="t334__col t-col t-col_6 t-align_center t334__show_hover"> <div class="t334__table" style="height:520px;"> <div class="t334__cell t-align_center t-valign_middle"> <div class="t334__bg t334__animation_fast t334__bg_animated t-bgimg" bgimgfield="img" data-original="https://static.tildacdn.com/tild3735-6635-4938-a166-386162653764/24jpg.jpg" style="background-image:url('/upload/pages/17464705/tild3735-6635-4938-a166-386162653764__-__resizeb__20x__24jpg.jpg');"></div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70));"></div> <div class="t334__textwrapper t334__animation_fast "> <div class="t334__textwrapper__content"> <div class="t334__title t-title t-title_xxs" field="title">Serif font</div> </div> </div> </div> </div> </div> <div class="t334__col t-col t-col_6 t-align_center t334__show_hover"> <div class="t334__table" style="height:520px;"> <div class="t334__cell t-align_center t-valign_middle"> <div class="t334__bg t334__animation_fast t334__bg_animated t-bgimg" bgimgfield="img2" data-original="https://static.tildacdn.com/tild3661-3332-4731-a635-333263616361/25jpg.jpg" style="background-image:url('/upload/pages/17464705/tild3661-3332-4731-a635-333263616361__-__resizeb__20x__25jpg.jpg');"></div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.70), rgba(0,0,0,0.70));"></div> <div class="t334__textwrapper t334__animation_fast "> <div class="t334__textwrapper__content"> <div class="t334__title t-title t-title_xxs" field="title2">Sans-serif font</div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="rec283154378" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px; " data-record-type="56">  <div class="t046"> <div class="t-container"> <div class="t-col t-col_6 t-prefix_3"> <div class="t046__text t-text t-text_xs" field="text"><div style="line-height: 26px;" data-customstyle="yes"><span style="font-weight: 400;">Small orange lines in the example on the left are called Serifs. Baskerville Regular was used for the Massimo Vignelli quote on the left while Helvetica Light on the right.</span></div></div> </div> </div> </div> </div> <div id="rec283154379" class="r t-rec t-rec_pt_45 t-rec_pb_90" style="padding-top:45px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Serif font has a guideline that allows the eye to slide smoothly and quickly. When the first computers appeared, Sans serif fonts became widespread as these fonts are more legible when used on a low-resolution screen.<br /><br />Most modern monitors display both fonts perfectly. This is why the choice between Serif and Sans serif depends solely on the message you intend to convey and not on the readability score. Although Serif fonts are suitable when used on the formal ground and are recommended for specific brands.</div> </div> </div> </div> </div> <div id="rec283154380" class="r t-rec" style=" " data-record-type="376"> <div class="t376" data-section-bg-color="#ffffff" style="display:none;"></div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t376_setbg',function() {t376_setbg();var t376_timer=window.setInterval(function() {t376_setbg();},4000);});});</script> </div> <div id="rec783013328" class="r t-rec" style=" " data-record-type="215"> <a name="extra" style="font-size:0;"></a> </div> <div id="rec283154381" class="r t-rec t-rec_pt_180 t-rec_pb_90" style="padding-top:180px;padding-bottom:90px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title">Adding Extra Fonts</div> </div> </div> </div> <style> #rec283154381 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec283154382" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="font-size: 30px; line-height: 40px;" data-customstyle="yes"><span style="font-weight: 400; font-size: 30px;">In all the previous examples, we used some of the most common font families. To change a font, open the Site Settings and select the font from the list. Moreover, on Tilda, you can upload and use any custom font you like. </span></div></div> </div> </div> </div> </div> <div id="rec783013552" class="r t-rec" style=" " data-record-type="215"> <a name="shop" style="font-size:0;"></a> </div> <div id="rec283154383" class="r t-rec t-rec_pt_120 t-rec_pb_60" style="padding-top:120px;padding-bottom:60px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Where to Buy Fonts or Find Them for Free</div> </div> </div> </div> </div> <div id="rec283154384" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">On Tilda, there are five ways of adding fonts:</div> </div> </div> </div> </div> <div id="rec283154684" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">1</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><div style="font-size: 22px;" data-customstyle="yes"><span style="font-size: 22px;">In Site Settings, pick one of the 18 fonts we've pre-selected from open sources.</span></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154685" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">2</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><div style="line-height: 32px; font-size: 22px;" data-customstyle="yes"><span style="font-size: 22px;">Upload your file with a font you've purchased elsewhere. For example, you may buy fonts here:</span><br /><br /><a href="http://www.myfonts.com/" style="font-size: 22px;">MyFonts.com</a><br /><span style="font-weight: 400; font-size: 22px;">Prices start at about $19/29/49 per typeface. Some of the cheapest fonts cost $2, while others can rate as high as $89, while some are free. You can also have access to the 30-day Web font trial that is available.</span><br /><br /><a href="https://www.fonts.com/web-fonts" target="_blank" style="font-weight: 400; font-size: 22px;">Fonts.com</a><br /><span style="font-weight: 400; font-size: 22px;">A subscription-based service. You can have free access to 3 000 fonts, while the paid plan range from $5 to $100 per month.</span><br /><span style="font-weight: 400; font-size: 22px;"></span><br /><a href="https://type.today/en" target="_blank" style="font-size: 22px;">Type.today</a><br /><span style="font-size: 22px;">Prices start at about $25 per typeface. </span></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154686" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">3</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><div style="font-size: 22px;" data-customstyle="yes"><span style="font-size: 22px;">Add a font through </span><a href="https://fonts.adobe.com/fonts" target="_blank" style="font-size: 22px;">Adobe Fonts</a><span style="font-size: 22px;">. This is a font library.</span><br /><span style="font-size: 22px;">— The Basic font collection is available for free with an Adobe ID;</span><br /><span style="font-size: 22px;">— Adobe Creative Cloud paid subscribers get unlimited access to the complete library of fonts.</span></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154688" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">4</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><div style="font-size: 22px;" data-customstyle="yes"><span style="font-size: 22px;">Use Google Fonts. The fonts are free. </span><a href="http://help.tilda.ws/fonts#googlefonts" target="_blank" style="font-size: 22px;">Check our how-to guide</a><span style="font-size: 22px;">.</span></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154689" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">5</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><div style="font-size: 22px;" data-customstyle="yes"><span style="font-size: 22px; font-weight: 400;">Upload your CSS file. </span><span style="font-size: 22px;"> </span><a href="https://help.tilda.cc/fonts#rec2090089" target="_blank" style="font-size: 22px; font-weight: 400;">Check our how-to guide</a><span style="font-size: 22px; font-weight: 400;">.</span></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154690" class="r t-rec t-rec_pt_135 t-rec_pb_90" style="padding-top:135px;padding-bottom:90px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">List of Our Recommended Fonts</div> </div> </div> </div> </div> <div id="rec777641683" class="r t-rec t-rec_pt_30 t-rec_pb_60" style="padding-top:30px;padding-bottom:60px; " data-animationappear="off" data-record-type="670">  <div class="t670"> <div class="t-slds" style="visibility: hidden;"> <div class="t-container t-slds__main"> <ul class="t-slds__arrow_container t-slds__arrow_container-outside"> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-left" data-slide-direction="left"> <button type="button" class="t-slds__arrow t-slds__arrow-left " aria-controls="carousel_777641683" aria-disabled="false" aria-label="Previous slide"> <div class="t-slds__arrow_body t-slds__arrow_body-left" style="width: 21px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 21.3 41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 20.5,20.5 0.5,40.5" /> </svg> </div> </button> </li> <li class="t-slds__arrow_wrapper t-slds__arrow_wrapper-right" data-slide-direction="right"> <button type="button" class="t-slds__arrow t-slds__arrow-right " aria-controls="carousel_777641683" aria-disabled="false" aria-label="Next slide"> <div class="t-slds__arrow_body t-slds__arrow_body-right" style="width: 21px;"> <svg role="presentation" focusable="false" style="display: block" viewBox="0 0 21.3 41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polyline fill="none" stroke="#000000" stroke-linejoin="butt" stroke-linecap="butt" stroke-width="1" points="0.5,0.5 20.5,20.5 0.5,40.5" /> </svg> </div> </button> </li> </ul> <div class="t-slds__container t-width t-width_10 t-margin_auto"> <div class="t-slds__items-wrapper t-slds__witharrows t-slds_animated-none" id="carousel_777641683" data-slider-transition="300" data-slider-with-cycle="true" data-slider-correct-height="true" data-auto-correct-mobile-width="false" data-slider-arrows-nearpic="yes" aria-roledescription="carousel" aria-live="off"> <div class="t-slds__item t-slds__item_active" data-slide-index="1" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="1 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3563-3432-4537-b737-393935666462/Futura2png.png"><meta itemprop="caption" content="Futura PT"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3563-3432-4537-b737-393935666462__-__empty__futura2png.png" data-original="https://static.tildacdn.com/tild3563-3432-4537-b737-393935666462/Futura2png.png" alt="Futura PT"> </div> </div> </div> <div class="t-slds__item" data-slide-index="2" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="2 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3834-6236-4833-a366-326264303831/Proximapng.png"><meta itemprop="caption" content="Proxima Nova"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3834-6236-4833-a366-326264303831__-__empty__proximapng.png" data-original="https://static.tildacdn.com/tild3834-6236-4833-a366-326264303831/Proximapng.png" alt="Proxima Nova"> </div> </div> </div> <div class="t-slds__item" data-slide-index="3" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="3 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6139-3238-4862-b061-623063393136/Franklinpng.png"><meta itemprop="caption" content="Franklin Gothic"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild6139-3238-4862-b061-623063393136__-__empty__franklinpng.png" data-original="https://static.tildacdn.com/tild6139-3238-4862-b061-623063393136/Franklinpng.png" alt="Franklin Gothic"> </div> </div> </div> <div class="t-slds__item" data-slide-index="4" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="4 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3438-3335-4432-a132-363361313438/6jpg.jpg"><meta itemprop="caption" content="Graphik"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3438-3335-4432-a132-363361313438__-__empty__6jpg.jpg" data-original="https://static.tildacdn.com/tild3438-3335-4432-a132-363361313438/6jpg.jpg" alt="Graphik"> </div> </div> </div> <div class="t-slds__item" data-slide-index="5" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="5 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3935-3632-4336-b839-373265663338/7jpg.jpg"><meta itemprop="caption" content="Museo Sans"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3935-3632-4336-b839-373265663338__-__empty__7jpg.jpg" data-original="https://static.tildacdn.com/tild3935-3632-4336-b839-373265663338/7jpg.jpg" alt="Museo Sans"> </div> </div> </div> <div class="t-slds__item" data-slide-index="6" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="6 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3662-6639-4163-b738-656334353337/gothamjpg.jpg"><meta itemprop="caption" content="Gotham"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3662-6639-4163-b738-656334353337__-__empty__gothamjpg.jpg" data-original="https://static.tildacdn.com/tild3662-6639-4163-b738-656334353337/gothamjpg.jpg" alt="Gotham"> </div> </div> </div> <div class="t-slds__item" data-slide-index="7" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="7 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild3339-3230-4865-a532-353834636531/GTW01copypng.png"><meta itemprop="caption" content="GT Walsheim"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild3339-3230-4865-a532-353834636531__-__empty__gtw01copypng.png" data-original="https://static.tildacdn.com/tild3339-3230-4865-a532-353834636531/GTW01copypng.png" alt="GT Walsheim"> </div> </div> </div> <div class="t-slds__item" data-slide-index="8" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="8 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6131-3066-4138-a633-613033393963/Helveticapng.png"><meta itemprop="caption" content="Helvetica Neue"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild6131-3066-4138-a633-613033393963__-__empty__helveticapng.png" data-original="https://static.tildacdn.com/tild6131-3066-4138-a633-613033393963/Helveticapng.png" alt="Helvetica Neue"> </div> </div> </div> <div class="t-slds__item" data-slide-index="9" role="group" aria-roledescription="slide" aria-hidden="false" aria-label="9 of 9"> <div class="t-width t-width_10 t-margin_auto" itemscope itemtype="http://schema.org/ImageObject"> <div class="t-slds__wrapper t-align_center"> <meta itemprop="image" content="https://static.tildacdn.com/tild6437-3264-4937-b833-636363613037/21centpng.png"><meta itemprop="caption" content="21 Cent"> <img itemprop="image" class="t-slds__img t-img" src="/upload/pages/17464705/tild6437-3264-4937-b833-636363613037__-__empty__21centpng.png" data-original="https://static.tildacdn.com/tild6437-3264-4937-b833-636363613037/21centpng.png" alt="21 Cent"> </div> </div> </div> </div> </div> <ul class="t-slds__bullet_wrapper"> <li class="t-slds__bullet t-slds__bullet_active" data-slide-bullet-for="1"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 1" aria-current="true" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="2"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 2" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="3"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 3" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="4"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 4" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="5"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 5" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="6"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 6" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="7"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 7" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="8"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 8" style="background-color: #c7c7c7;"></button> </li> <li class="t-slds__bullet " data-slide-bullet-for="9"> <button type="button" class="t-slds__bullet_body" aria-label="Go to slide 9" style="background-color: #c7c7c7;"></button> </li> </ul> <div class="t-slds__caption__container"> <div class="t-slds__caption t-col t-col_8 t-prefix_2 t-slds__caption-active" data-slide-caption="1"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__0">Futura PT</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="2"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__1">Proxima Nova</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="3"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__2">Franklin Gothic</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="4"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__3">Graphik</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="5"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__4">Museo Sans</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="6"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__5">Gotham</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="7"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__6">GT Walsheim</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="8"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__7">Helvetica Neue</div> </div> </div> <div class="t-slds__caption t-col t-col_8 t-prefix_2 " data-slide-caption="9"> <div class="t-slds__caption_wrapper t-align_center" style=""> <div class="t-slds__title t-name t-name_xs" data-redactor-notoolbar="yes" field="gi_title__8">21 Cent</div> </div> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t670_init',function() {t670_init('777641683',false);});});</script> <style>#rec777641683 .t-slds__bullet_active .t-slds__bullet_body{background-color:#222 !important;}#rec777641683 .t-slds__bullet:hover .t-slds__bullet_body{background-color:#222 !important;}</style> <style> #rec777641683 .t-slds__title{font-size:20px;font-weight:400;}</style> </div> <div id="rec283154692" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong style="font-size: 22px;">Futura</strong><span style="font-weight: 400; font-size: 22px;">. Buy this font: </span><a href="http://www.myfonts.com/fonts/paratype/futura-book/" target="_blank" style="font-weight: 400; font-size: 22px;">myfonts.com/fonts/paratype/futura-book</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154693" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong style="font-size: 22px;">Proxima Nova</strong><span style="font-weight: 400; font-size: 22px;">. Buy this font: </span><a href="http://www.myfonts.com/fonts/marksimonson/proxima-nova/" target="_blank" style="font-weight: 400; font-size: 22px;">myfonts.com/fonts/marksimonson/proxima-nova</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154694" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong style="font-size: 22px;">Franklin Gothic</strong><span style="font-size: 22px; font-weight: 400;">. Buy this font: </span><a href="http://www.myfonts.com/fonts/itc/franklin-gothic/" target="_blank" style="font-size: 22px; font-weight: 400;">myfonts.com/fonts/itc/franklin-gothic</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec306065547" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><strong style="font-size: 22px;">Graphik</strong><span style="font-size: 22px; font-weight: 400;">. Buy this font: </span><a href="http://www.type.today/en/Graphik" target="_blank" rel="noreferrer noopener" style="font-size: 22px; font-weight: 400;">type.today/en/Graphik</a></div> </div> </div> </div> </div> </div> </div> <div id="rec283154696" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong>Museo</strong><span style="font-weight: 400;">. Buy this font: </span><a href="http://www.myfonts.com/fonts/exljbris/museo-sans-cyrillic/" target="_blank" style="font-weight: 400;">myfonts.com/fonts/exljbris/museo-sans</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154697" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong>Gotham</strong><span style="font-weight: 400;">. Buy this font: </span><a href="http://www.typography.com/fonts/gotham/overview/" target="_blank" style="font-weight: 400;">typography.com/fonts/gotham</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154698" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong>GT Walsheim</strong><span style="font-weight: 400;">. Buy this font: </span><a href="https://www.grillitype.com/typefaces/gt-walsheim" target="_blank" style="font-weight: 400;">grillitype.com/typefaces/gt-walsheim</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec283154699" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong>Helvetica Neue</strong><span style="font-weight: 400;">. Buy this font: </span><a href="http://www.myfonts.com/fonts/linotype/helvetica-neue-pro-cyrillic/" target="_blank" style="font-weight: 400;">myfonts.com/fonts/linotype/helvetica-neue</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec306066883" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_9 t-prefix_2"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title"><div style="font-size: 22px;" data-customstyle="yes"><strong style="font-size: 22px;">21 Cent</strong><span style="font-weight: 400; font-size: 22px;">. Buy this font: </span><a href="https://www.myfonts.com/fonts/letterheadrussia/21-cent/" target="_blank" rel="noreferrer noopener" style="font-weight: 400; font-size: 22px;">myfonts.com/fonts/letterheadrussia/21-cent/</a></div></div> </div> </div> </div> </div> </div> </div> <div id="rec783014038" class="r t-rec" style=" " data-record-type="215"> <a name="readability" style="font-size:0;"></a> </div> <div id="rec283154700" class="r t-rec t-rec_pt_150 t-rec_pb_30" style="padding-top:150px;padding-bottom:30px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t015__title t-title t-title_lg" field="title">How to Increase Readability on Your Website</div> </div> </div> </div> <style> #rec283154700 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec283154701" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height: 40px;" data-customstyle="yes"><span style="font-weight: 400; font-size: 30px;">Regardless of the font you choose, it has to be easy to read, especially if you are using a background photo. If you use a thin font on an image with lots of small visual elements, the text may become difficult to read. Always keep this in mind!</span><span style="font-weight: 400;"> </span></div></div> </div> </div> </div> </div> <div id="rec283155020" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">What can you do? First, use the right photo on the background with large, homogeneous elements. Second, apply a fade filter to soften the image. This will help increase readability. Third, you can increase the font weight for a specific block by using an inline style. It means you can assign settings to a specific section of your text and not the entire website. Highlight the text using the inline website editor.</div> </div> </div> </div> </div> <div id="rec283155021" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3130-3862-4235-a632-613364663930/37jpg.jpg"> <img itemprop="image" class="t-img t-width t107__width t-width_8" src="/upload/pages/17464705/tild3130-3862-4235-a632-613364663930__-__empty__37jpg.jpg" data-original="https://static.tildacdn.com/tild3130-3862-4235-a632-613364663930/37jpg.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec283155022" class="r t-rec t-rec_pt_0 t-rec_pb_120" style="padding-top:0px;padding-bottom:120px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Styles that are applied in this manner always have priority over default settings. That is why, if you modify fonts in the Site Settings and the modifications are not visible on the website, it means you have previously set the inline style. To remove the inline style, highlight the text and click on "Clear all formatting."</div> </div> </div> </div> </div> <div id="rec283155023" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-animationappear="off" data-record-type="334"> <div class="t334"> <div class="t-container "> <div class="t334__col t-col t-col_6 t-align_center t334__show_hover"> <div class="t334__table" style="height:380px;"> <div class="t334__cell t-align_center t-valign_middle"> <div class="t334__bg t334__animation_fast t334__bg_animated t-bgimg" bgimgfield="img" data-original="https://static.tildacdn.com/tild6164-3938-4463-a236-306664363766/blob.png" style="background-image:url('/upload/pages/17464705/tild6164-3938-4463-a236-306664363766__-__resizeb__20x__blob.png');"></div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80));"></div> <div class="t334__textwrapper t334__animation_fast "> <div class="t334__textwrapper__content"> <div class="t334__title t-title t-title_xxs" field="title">Text is not quite readable</div> </div> </div> </div> </div> </div> <div class="t334__col t-col t-col_6 t-align_center t334__show_hover"> <div class="t334__table" style="height:380px;"> <div class="t334__cell t-align_center t-valign_middle"> <div class="t334__bg t334__animation_fast t334__bg_animated t-bgimg" bgimgfield="img2" data-original="https://static.tildacdn.com/tild3935-3064-4538-b763-653934376536/blob.png" style="background-image:url('/upload/pages/17464705/tild3935-3064-4538-b763-653934376536__-__resizeb__20x__blob.png');"></div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.80), rgba(0,0,0,0.80));"></div> <div class="t334__textwrapper t334__animation_fast "> <div class="t334__textwrapper__content"> <div class="t334__title t-title t-title_xxs" field="title2">Text is easy to read</div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="rec283155024" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px; " data-record-type="56">  <div class="t046"> <div class="t-container"> <div class="t-col t-col_6 t-prefix_3"> <div class="t046__text t-text t-text_xs" field="text"><div style="line-height: 26px;" data-customstyle="yes"><span style="font-size: 16px;">On the left cover, the text is very difficult to read. To improve it, we chose a photo without lots of small details, used a blue filter with 40% opacity and increased the font weight.</span></div></div> </div> </div> </div> </div> <div id="rec283155025" class="r t-rec t-rec_pt_75 t-rec_pb_0" style="padding-top:75px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If you're interested in learning more about typography, visit a website similar to the project you're working on, and check what fonts are used. The <a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en" target="_blank">What Font</a> browser extension will help you quickly identify fonts on web pages.<br /><br />Also, browse through this <a href="https://fontsinuse.com/" target="_blank">independent typographic archive</a>. It features a collection of websites and printed samples sorted in accordance with the type of font used.</div> </div> </div> </div> </div> <div id="rec283155026" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px; " data-record-type="219">  <div class="t191"> <div class="t-align_center"> <hr class="t-divider t191__line t-width t-width_2" style="background-color:#000000;opacity:0.2;"> </div> </div> </div> <div id="rec283155028" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-animationappear="off" data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Liked the article? Share it with friends! Thanks a lot!</span></div></div> </div> </div> </div> </div> <div id="rec283155029" class="r t-rec t-rec_pt_45 t-rec_pb_90" style="padding-top:45px;padding-bottom:90px; " data-record-type="151"> <div class="t-container_100 t014" style=""> <div style="position: relative; right: 50%; float: right;"> <div style="position: relative; z-index: 1; right: -50%;" class="t014__circle-xxl "> <script type="text/javascript" src="https://static.tildacdn.com/js/ya-share.js" charset="utf-8" async="async"></script> <div class="ya-share2" data-access-token:facebook="" data-yashareL10n="en" data-services="facebook,twitter" data-counter=""></div> </div> </div> </div> </div> <div id="rec306097729" class="r t-rec t-rec_pt_120 t-rec_pb_75" style="padding-top:120px;padding-bottom:75px;background-color:#f0f0f0; " data-animationappear="off" data-record-type="33" data-bg-color="#f0f0f0">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">See also:</div> </div> </div> </div> </div> <div id="rec306097730" class="r t-rec t-rec_pt_0 t-rec_pb_165" style="padding-top:0px;padding-bottom:165px;background-color:#f0f0f0; " data-animationappear="off" data-record-type="404" data-bg-color="#f0f0f0">   <div class="t404" data-show-count="8"> <div class="t-container"> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-cover-for-website"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6235-6235-4634-a535-303466623139/Tilda_Education-1.svg" style="background-image: url('https://static.tildacdn.com/tild6235-6235-4634-a535-303466623139/Tilda_Education-1.svg');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Create a Cover for a Website</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-zero-block"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3231-3261-4436-b236-623637393237/Group_1518.png" style="background-image: url('/upload/pages/17464705/tild3231-3261-4436-b236-623637393237__-__resizeb__20x__group_1518.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">A Complete Guide To Zero Block</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/design-mistakes"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6263-3065-4933-a539-353865626133/Frame_3.png" style="background-image: url('/upload/pages/17464705/tild6263-3065-4933-a539-353865626133__-__resizeb__20x__frame_3.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">Common Web Design Mistakes</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-navigation"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6261-6635-4335-b132-353731313137/Tilda_Education.svg" style="background-image: url('https://static.tildacdn.com/tild6261-6635-4335-b132-353731313137/Tilda_Education.svg');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Improve Your Website Navigation</div> </div> </a> </div> </div><div class="t-container"> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/how-to-build-website"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6437-3037-4639-a463-613432666534/Frame_6.png" style="background-image: url('/upload/pages/17464705/tild6437-3037-4639-a463-613432666534__-__resizeb__20x__frame_6.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Make a Website. Step-by-Step Guide</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-email-marketing-guide"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3636-3837-4662-a231-663264353137/Frame_1.png" style="background-image: url('/upload/pages/17464705/tild3636-3837-4662-a231-663264353137__-__resizeb__20x__frame_1.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">Email Marketing: How To Launch Your Newsletter Сampaign</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-offer"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3662-6435-4534-b864-656438663737/Frame_5.png" style="background-image: url('/upload/pages/17464705/tild3662-6435-4534-b864-656438663737__-__resizeb__20x__frame_5.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">Creating a Unique Selling Proposition (USP) For a Website</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-jobs-to-be-done"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3939-3663-4364-b130-373065343539/Frame_2.png" style="background-image: url('/upload/pages/17464705/tild3939-3663-4364-b130-373065343539__-__resizeb__20x__frame_2.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">Jobs To Be Done: How To Attract New Customers</div> </div> </a> </div> </div><div class="t-container"> </div> </div> <script>t_onReady(function() {var rec=document.getElementById('rec306097730');if(rec) {t_onFuncLoad('t404_unifyHeights',function() {t404_unifyHeights('306097730');window.addEventListener('resize',t_throttle(function() {t404_unifyHeights('306097730');},200));});if(typeof jQuery!=='undefined') {$('.t404').on('displayChanged',function() {t404_unifyHeights('306097730');});} else if(rec.querySelector('.t404')) {rec.querySelector('.t404').addEventListener('displayChanged',function() {t_onFuncLoad('t404_unifyHeights',function() {t404_unifyHeights('306097730');});});} window.onload=function() {t404_unifyHeights('306097730');};}});</script> <script>t_onReady(function() {t_onFuncLoad('t404_showMore',function() {t404_showMore('306097730');});});</script> <style> #rec306097730 .t404__title{font-size:20px;font-weight:600;}</style> </div> <div id="rec623863180" class="r t-rec" style=" " data-animationappear="off" data-record-type="694">  <style>#rec623863180 .t694__table{height:28vw;}@media screen and (max-width:768px){#rec623863180 .t694__table{height:56vw;}}</style> <div class="t694" data-tile-ratio="0.56"> <div class="t694__container t-card__container"> <div class="t694__row"> <div class="t694__col t-cell t-cell_50 t-align_center "> <div class="t694__table"> <div class="t694__cell t-card__col t-align_center t-valign_middle"> <div class="t694__bg t694__animation_fast t-bgimg" data-original="https://static.tildacdn.com/tild3735-3063-4334-b134-663536653638/Course_1__Cover_1.png" bgimgfield="li_img__1513695601022" style="background-image:url('/upload/pages/17464705/tild3735-3063-4334-b134-663536653638__-__resizeb__20x__course_1__cover_1.png');" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3735-3063-4334-b134-663536653638/Course_1__Cover_1.png"> </div> <div class="t694__overlay t694__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7));"></div> <div class="t694__textwrapper t694__animation_fast t694__textwrapper_animated"> <div class="t694__textwrapper__content"> <div class="t694__inner-wrapper t694__inner-wrapper_animated-btn"> <div class="t-card__title t-title t-title_xxs" field="li_title__1513695601022"> <a href="https://tilda.education/en/landing-page-course" class="t-card__link" id="cardtitle1_623863180" aria-labelledby="cardtitle1_623863180 cardbtn1_623863180"> How to Build a Landing Page </a> </div> <div class="t-card__descr t-descr t-descr_xs" field="li_text__1513695601022"> Free coursebook on how to design, set up, and run <br />high-conversion landing pages </div> <style> #rec623863180 .t-card__title{font-weight:500;}</style> </div> <div class="t694__button-container t694__button_show-hover"> <div class="t-card__btn-wrapper"> <div class="t-card__btn t-btn t-btn_sm" id="cardbtn1_623863180" style="color:#000000;background-color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;" data-field="li_buttontitle__1513695601022" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1513695601022"> Learn more </div> </div> </div> </div> </div> </div> </div> </div> <div class="t694__col t-cell t-cell_50 t-align_center "> <div class="t694__table"> <div class="t694__cell t-card__col t-align_center t-valign_middle"> <div class="t694__bg t694__animation_fast t-bgimg" data-original="https://static.tildacdn.com/tild6238-3530-4633-b836-623638366365/template_illustratio.png" bgimgfield="li_img__1495528759247" style="background-image:url('/upload/pages/17464705/tild6238-3530-4633-b836-623638366365__-__resizeb__20x__template_illustratio.png');" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6238-3530-4633-b836-623638366365/template_illustratio.png"> </div> <div class="t694__overlay t694__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7));"></div> <div class="t694__textwrapper t694__animation_fast t694__textwrapper_animated"> <div class="t694__textwrapper__content"> <div class="t694__inner-wrapper t694__inner-wrapper_animated-btn"> <div class="t-card__title t-title t-title_xxs" field="li_title__1495528759247"> <a href="https://tilda.education/en/web-animation-course" class="t-card__link" id="cardtitle2_623863180" aria-labelledby="cardtitle2_623863180 cardbtn2_623863180"> Web Animation </a> </div> <div class="t-card__descr t-descr t-descr_xs" field="li_text__1495528759247"> <p style="text-align: center;">Free practical guide to web animation with examples, techniques, </p><p style="text-align: center;">and tips on how to use them</p> </div> <style> #rec623863180 .t-card__title{font-weight:500;}</style> </div> <div class="t694__button-container t694__button_show-hover"> <div class="t-card__btn-wrapper"> <div class="t-card__btn t-btn t-btn_sm" id="cardbtn2_623863180" style="color:#000000;background-color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;" data-field="li_buttontitle__1495528759247" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1495528759247"> Explore </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t694_init',function() {t694_init('623863180');});});</script> </div> </div> <div style="clear: both;"></div> <div class="te-popup te-popup_opened" id="popup_login" > <a class="te-popup__overlay js-te-popup-close" href="#"></a> <a class="te-popup__close js-te-popup-close" href="#"> <img src="/images/close.svg"> </a> <div class="te-popup__wrap"> <div class="te-popup-window"> <div class="te-popup__header">Tilda education</div> <div class="te-popup__info"> <div class="te-popup__description">Log in to continue reading </div> <ul class="te-popup__buttons"> <li style="cursor: pointer"> <span class="te-popup__btn te-popup__btn-tilda js-socnet-login" data-provider="tilda"> <div class="te-popup__btn__icon"><img src="/images/tilda_logo_white.svg"></div> <span>Continue with Tilda</span> </span> </li> </ul> <div style="margin-bottom: 20px;"> <span id="another_login_methods" style="color: #222222; border-bottom: solid 1px #fa633f; cursor: pointer; opacity: 50%;">Other login methods</span> </div> <ul class="te-popup__buttons alternative" style="display: none"> <li> <a class="te-popup__btn te-popup__btn-google js-socnet-login" data-provider="google" href="/login/"> <div class="te-popup__btn__icon"><img src="/images/google.svg"></div> <span>Continue with Google</span> </a> </li> </ul> </div> <div class="te-popup__hint"> <span>By logging in, you agree to our </span> <a href="/en/terms" target="blank">Terms of Service</a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#another_login_methods").click(function() { let block = $('.te-popup__buttons.alternative'); let display = block.css('display'); if (display === 'block') { block.css('display', 'none'); } else { block.css('display', 'block'); } }); $(".js-socnet-login").click(function(){ var provider = $(this).data('provider'); var $popup = $('#popup_login'); var target = $popup.data('target') || ''; console.log(provider); if (provider === 'tilda') { let bu = window.location.href; console.log(bu); window.location.replace('https://tilda.cc/identity/goeducation/?bu=' + bu); return true; } $.post('/login/submit/' + provider + '.php', {'action':'geturl', 'backurl': window.location.href+target}, function(json){ if (json.error && json.error > '') { alert('When authorizing via social network, an error occurred ['+ json.error + ']. Try again.'); } else if ( json.redirect && json.redirect > '' ) { window.location.href = json.redirect; } else if (json.activation == 1 && json.userid > 0) { window.location.href = '/identity/activationemail/?activation=1'; } else if(json.userid > 0) { window.location.href = '/en/'; } },'json' ); return false; }); }); </script> <script type="text/javascript" src="/static/project3379564/js/tilda-polyfill-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-blocks-page16067110.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/lazyload-1.3.min.export.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-menu-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-skiplink-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-events-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-education-langs-dropdown.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-stat-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-blocks-page17464705.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-animation-2.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-zero-1.1.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/hammer.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-slds-1.4.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-cards-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-animation-ext-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/tilda-zero-scale-1.0.min.js?t=1732735169"></script><script type="text/javascript" src="/static/project3379564/js/ya-share.js?t=1732735169"></script> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-64185315-1', 'auto'); ga('send', 'pageview'); (function(d) { var config = { kitId: 'gdw1mfn', scriptTimeout: 3000 }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); </script>  <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter41832319 = new Ya.Metrika({ id:41832319, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/41832319" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <script> setTimeout(function(){ !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.agent='pltilda'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '503932973940614'); fbq('track', 'PageView'); }, 2000); </script>  <script type="text/javascript"> $(document).ready(function(){ /**события */ window.isSendEvent25percent = false; window.isSendEvent50percent = false; window.isSendEvent75percent = false; window.isSendEvent100percent = false; $(window).scroll(function(){ var top = $(document).scrollTop(); var wh = $(window).height(); var dh = $(document).height(); var p = parseInt((top + wh) * 100 / dh); var d = new Date(); if(p >= 25) { if(!window.isSendEvent25percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'025%','eventLabel':document.title,'eventValue':0,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '025%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent25percent = true; } } if(p >= 50) { if(!window.isSendEvent50percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'050%','eventLabel':document.title,'eventValue':25,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '050%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent50percent = true; } } if(p >= 75) { if(!window.isSendEvent75percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'075%','eventLabel':document.title,'eventValue':50,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '075%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent75percent = true; } } if(p > 90) { if(!window.isSendEvent100percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'100%','eventLabel':document.title,'eventValue':25,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '100%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent100percent = true; } } }); }); </script> <script type="text/javascript"> $(document).ready(function() { if ($(".te-header__wrapper").length > 0) {if ($("#allrecords").width() < 980) {$(".te-header__userbar").css({"right": "60px"});} else {$("#rec32526252 .t228").data("top-offset","60").css({"top": "60px"});}}}); </script>  <script type="text/javascript"> $(document).ready(function(){ $('#allrecords').data('tilda-statscroll','yes'); }); (function (d, w, k, o, g) { var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);}; s.type = "text/javascript"; s.async = true; s.key = k; s.id = "tildastatscript"; s.src=g; if (w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded", f, false);} else { f(); } })(document, window, '0bc3fa44a26a9e23465074e623f28e7f','script','https://stat.tildacdn.com/js/tildastat-0.2.min.js'); </script> <style> .ya-share2__item_service_facebook { display: none !important; } </style> </body> </html> <div id="allrecords_footer" itemprop="description" class="t-records_footer" data-hook="blocks-collection-content-node" data-tilda-project-id="3379564" data-tilda-page-id="42660986" data-tilda-page-alias="footer" data-tilda-formskey="6f20e8cab9363ca37fab290c70306272" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes"> <div id="rec744633993" class="r t-rec t-rec_pt_75 t-rec_pt-res-480_60 t-rec_pb_60" style="padding-top:75px;padding-bottom:60px;background-color:#232323; " data-animationappear="off" data-record-type="396" data-bg-color="#232323">  <style>#rec744633993 .t396__artboard {height:560px;background-color:#232323;}#rec744633993 .t396__filter {height:560px;}#rec744633993 .t396__carrier{height:560px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:500px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:700px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:700px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:711px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}#rec744633993 .tn-elem[data-elem-id="1697035553534"]{color:#ffffff;z-index:4;top:56px;left:calc(50% - 600px + 20px);width:199px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:49px;left:calc(50% - 480px + 10px);width:189px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 320px + 90px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:51px;left:calc(50% - 160px + 10px);width:134px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1697035035883"]{color:#ffffff;z-index:5;top:6px;left:calc(50% - 600px + 20px);width:177px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 480px + 10px);width:202px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 320px + 91px);width:225px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:7px;left:calc(50% - 160px + 10px);width:135px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1697035553534"]{color:#ffffff;z-index:4;top:56px;left:calc(50% - 600px + 20px);width:199px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:49px;left:calc(50% - 480px + 10px);width:189px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 320px + 90px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:51px;left:calc(50% - 160px + 10px);width:134px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1697035035883"]{color:#ffffff;z-index:5;top:6px;left:calc(50% - 600px + 20px);width:177px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 480px + 10px);width:202px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 320px + 91px);width:225px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:7px;left:calc(50% - 160px + 10px);width:135px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653257897600"]{color:#ffffff;z-index:7;top:56px;left:calc(50% - 600px + 319px);width:240px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:49px;left:calc(50% - 480px + 250px);width:188px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:270px;left:calc(50% - 160px + 10px);width:152px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653658890094"]{color:#ffffff;z-index:8;top:6px;left:calc(50% - 600px + 319px);width:267px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:5px;left:calc(50% - 480px + 250px);width:229px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:226px;left:calc(50% - 160px + 10px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653257897600"]{color:#ffffff;z-index:7;top:56px;left:calc(50% - 600px + 319px);width:240px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:49px;left:calc(50% - 480px + 250px);width:188px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:270px;left:calc(50% - 160px + 10px);width:152px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653658890094"]{color:#ffffff;z-index:8;top:6px;left:calc(50% - 600px + 319px);width:267px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:5px;left:calc(50% - 480px + 250px);width:229px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:226px;left:calc(50% - 160px + 10px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006953"]{color:#ffffff;z-index:10;top:57px;left:calc(50% - 600px + 919px);width:201px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:49px;left:calc(50% - 480px + 730px);width:206px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:472px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:467px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:504px;left:calc(50% - 160px + 171px);width:140px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006958"]{color:#ffffff;z-index:11;top:6px;left:calc(50% - 600px + 919px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:5px;left:calc(50% - 480px + 730px);}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:430px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:425px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:460px;left:calc(50% - 160px + 171px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006953"]{color:#ffffff;z-index:10;top:57px;left:calc(50% - 600px + 919px);width:201px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:49px;left:calc(50% - 480px + 730px);width:206px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:472px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:467px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:504px;left:calc(50% - 160px + 171px);width:140px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006958"]{color:#ffffff;z-index:11;top:6px;left:calc(50% - 600px + 919px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:5px;left:calc(50% - 480px + 730px);}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:430px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:425px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:460px;left:calc(50% - 160px + 171px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1698312869793"]{color:#ffffff;z-index:13;top:56px;left:calc(50% - 600px + 620px);width:209px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:49px;left:calc(50% - 480px + 490px);width:195px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:47px;left:calc(50% - 320px + 331px);width:186px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:42px;left:calc(50% - 240px + 251px);width:177px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:51px;left:calc(50% - 160px + 171px);width:131px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653659163722"]{color:#ffffff;z-index:14;top:6px;left:calc(50% - 600px + 621px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 480px + 490px);}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 320px + 331px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:0px;left:calc(50% - 240px + 251px);width:180px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:7px;left:calc(50% - 160px + 171px);width:126px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1698312869793"]{color:#ffffff;z-index:13;top:56px;left:calc(50% - 600px + 620px);width:209px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:49px;left:calc(50% - 480px + 490px);width:195px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:47px;left:calc(50% - 320px + 331px);width:186px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:42px;left:calc(50% - 240px + 251px);width:177px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:51px;left:calc(50% - 160px + 171px);width:131px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653659163722"]{color:#ffffff;z-index:14;top:6px;left:calc(50% - 600px + 621px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 480px + 490px);}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 320px + 331px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:0px;left:calc(50% - 240px + 251px);width:180px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:7px;left:calc(50% - 160px + 171px);width:126px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:12px;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="744633993" data-artboard-screens="320,480,640,960,1200" data-artboard-height="560" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="711" data-artboard-height-res-480="700" data-artboard-height-res-640="700" data-artboard-height-res-960="500"> <div class="t396__carrier" data-artboard-recid="744633993"></div> <div class="t396__filter" data-artboard-recid="744633993"></div> <div class='t396__elem tn-elem tn-elem__7446339931697035553534' data-elem-id='1697035553534' data-elem-type='text' data-field-top-value="56" data-field-left-value="20" data-field-width-value="199" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="51" data-field-left-res-320-value="10" data-field-width-res-320-value="134" data-field-top-res-480-value="47" data-field-left-res-480-value="10" data-field-top-res-640-value="47" data-field-left-res-640-value="90" data-field-width-res-640-value="189" data-field-top-res-960-value="49" data-field-left-res-960-value="10" data-field-width-res-960-value="189"> <div class='tn-atom'field='tn_text_1697035553534'><a href="https://tilda.education/en/#guidesandarticles" style="color: rgb(255, 255, 255);">Guides & Articles</a><br><br><a href="https://tilda.education/en/#videotutorials" style="color: rgb(255, 255, 255);">Video Tutorials </a><br><br><a href="https://tilda.education/en/#stories" style="color: rgb(255, 255, 255);">Success Stories</a><br><br><a href="https://tilda.education/en/landing-page-course" style="color: rgb(255, 255, 255);">Landing Page Course</a><br><br><a href="https://tilda.education/en/digital-marketing-course" style="color: rgb(255, 255, 255);">Digital Marketing Course</a><br><br><a href="https://tilda.education/en/web-animation-course" style="color: rgb(255, 255, 255);">Web Animation Course</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931697035035883' data-elem-id='1697035035883' data-elem-type='text' data-field-top-value="6" data-field-left-value="20" data-field-width-value="177" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="7" data-field-left-res-320-value="10" data-field-width-res-320-value="135" data-field-top-res-480-value="5" data-field-left-res-480-value="10" data-field-top-res-640-value="5" data-field-left-res-640-value="91" data-field-width-res-640-value="225" data-field-top-res-960-value="5" data-field-left-res-960-value="10" data-field-width-res-960-value="202"> <div class='tn-atom'field='tn_text_1697035035883'>EDUCATION</div> </div> <div class='t396__elem tn-elem tn-elem__7446339931653257897600' data-elem-id='1653257897600' data-elem-type='text' data-field-top-value="56" data-field-left-value="319" data-field-width-value="240" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="270" data-field-left-res-320-value="10" data-field-width-res-320-value="152" data-field-top-res-480-value="264" data-field-left-res-480-value="10" data-field-top-res-640-value="264" data-field-left-res-640-value="90" data-field-top-res-960-value="49" data-field-left-res-960-value="250" data-field-width-res-960-value="188"> <div class='tn-atom'field='tn_text_1653257897600'><a href="https://tilda.cc" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Tilda.cc</a><br><span style="color: rgb(255, 255, 255);"></span><br><a href="https://tilda.cc/pricing/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Pricing</a><br><br><a href="https://tilda.cc/features/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">List of features</a><br><br><a href="https://tilda.cc/tpls/" style="color: rgb(255, 255, 255);">Website Templates</a> <br><br><a href="https://tilda.cc/madeontilda/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Website Examples </a><br><br><a href="https://tilda.cc/en/reviews/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">User Reviews</a><br><br><a href="https://tilda.cc/lp/overview/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Platform Overview</a><br><br><a href="https://blog-en.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Blog</a><br><br><a href="https://webinars.tilda.cc/en" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Webinars</a><br><br><a href="https://answers.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">F.A.Q.</a><br><br><a href="https://help.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Help Center</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931653658890094' data-elem-id='1653658890094' data-elem-type='text' data-field-top-value="6" data-field-left-value="319" data-field-width-value="267" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="226" data-field-left-res-320-value="10" data-field-width-res-320-value="142" data-field-top-res-480-value="222" data-field-left-res-480-value="10" data-field-top-res-640-value="222" data-field-left-res-640-value="90" data-field-top-res-960-value="5" data-field-left-res-960-value="250" data-field-width-res-960-value="229"> <div class='tn-atom'field='tn_text_1653658890094'>WEBSITE BUILDER</div> </div> <div class='t396__elem tn-elem tn-elem__7446339931707213006953' data-elem-id='1707213006953' data-elem-type='text' data-field-top-value="57" data-field-left-value="919" data-field-width-value="201" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="504" data-field-left-res-320-value="171" data-field-width-res-320-value="140" data-field-top-res-480-value="467" data-field-left-res-480-value="251" data-field-top-res-640-value="472" data-field-left-res-640-value="331" data-field-top-res-960-value="49" data-field-left-res-960-value="730" data-field-width-res-960-value="206"> <div class='tn-atom'field='tn_text_1707213006953'><a href="https://tilda.cc/free-icons/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Free Icons</a><br><br><a href="https://tilda.cc/utm/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Campaign URL Builder</a><br><br><a href="https://tilda.cc/colors/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Color Library</a><br><br><a href="https://experts.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Hire a Designer</a><br><br><a href="https://tilda.cc/lp/tildasans/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Tilda Sans Typeface</a><br><br><a href="https://tilda.cc/broken-links/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Broken Link Checker</a><br><br><a href="https://tilda.education/en/privacy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Privacy Policy</a><br><br><a href="https://tilda.education/en/terms" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Terms of Service</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931707213006958' data-elem-id='1707213006958' data-elem-type='text' data-field-top-value="6" data-field-left-value="919" data-field-width-value="205" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="460" data-field-left-res-320-value="171" data-field-width-res-320-value="142" data-field-top-res-480-value="425" data-field-left-res-480-value="251" data-field-top-res-640-value="430" data-field-left-res-640-value="331" data-field-top-res-960-value="5" data-field-left-res-960-value="730"> <div class='tn-atom'field='tn_text_1707213006958'>MORE</div> </div> <div class='t396__elem tn-elem tn-elem__7446339931698312869793' data-elem-id='1698312869793' data-elem-type='text' data-field-top-value="56" data-field-left-value="620" data-field-width-value="209" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="51" data-field-left-res-320-value="171" data-field-width-res-320-value="131" data-field-top-res-480-value="42" data-field-left-res-480-value="251" data-field-width-res-480-value="177" data-field-top-res-640-value="47" data-field-left-res-640-value="331" data-field-width-res-640-value="186" data-field-top-res-960-value="49" data-field-left-res-960-value="490" data-field-width-res-960-value="195"> <div class='tn-atom'field='tn_text_1698312869793'><a href="https://tilda.cc/lp/create-a-landing-page-for-business/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create a Landing Page</a><br><br><a href="https://tilda.cc/lp/website-builder/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create a Website Without Code</a><br><br><a href="https://tilda.cc/lp/build-online-store/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create an Online Store</a><br><br><a href="https://tilda.cc/lp/create-blog/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create a Company Blog</a><br><br><a href="https://tilda.cc/lp/course-builder/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create Online Courses</a><br><br><a href="https://tilda.cc/lp/seo/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">SEO On Tilda</a><br><br><a href="https://tilda.cc/lp/email-campaign-builder/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Email Campaign Builder</a><br><br><a href="https://tilda.cc/lp/forms/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Online Form Builder</a><br><br><a href="https://zero.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Zero Block. Web Design Editor</a><br><br><a href="https://tilda.cc/lp/crm/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Tilda CRM</a><br><br><a href="https://tilda.cc/lp/membership/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Membership</a><br><br><a href="https://tilda.cc/lp/quiz/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Interactive Quizzes</a><br><br><a href="https://tilda.cc/lp/image-optimization/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Adaptive Image Loading</a><br><br><a href="https://tilda.cc/lp/accessibility/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Digital Accessibility</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931653659163722' data-elem-id='1653659163722' data-elem-type='text' data-field-top-value="6" data-field-left-value="621" data-field-width-value="205" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="7" data-field-left-res-320-value="171" data-field-width-res-320-value="126" data-field-top-res-480-value="0" data-field-left-res-480-value="251" data-field-width-res-480-value="180" data-field-top-res-640-value="5" data-field-left-res-640-value="331" data-field-width-res-640-value="189" data-field-top-res-960-value="5" data-field-left-res-960-value="490"> <div class='tn-atom'field='tn_text_1653659163722'>SOLUTIONS</div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('744633993');});});</script>  </div> <div id="rec744634564" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#232323; " data-record-type="212" data-bg-color="#232323">  <div class="t188"> <div class="t-container_100"> <div class="t188__wrapper"> <div class="t-sociallinks"> <ul role="list" class="t-sociallinks__wrapper" aria-label="Social media links"> <li class="t-sociallinks__item t-sociallinks__item_instagram"><a href="https://www.instagram.com/tilda.cc/" target="_blank" rel="nofollow" aria-label="instagram" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100ZM25 39.3918C25 31.4558 31.4566 25 39.3918 25H60.6082C68.5442 25 75 31.4566 75 39.3918V60.8028C75 68.738 68.5442 75.1946 60.6082 75.1946H39.3918C31.4558 75.1946 25 68.738 25 60.8028V39.3918ZM36.9883 50.0054C36.9883 42.8847 42.8438 37.0922 50.0397 37.0922C57.2356 37.0922 63.0911 42.8847 63.0911 50.0054C63.0911 57.1252 57.2356 62.9177 50.0397 62.9177C42.843 62.9177 36.9883 57.1252 36.9883 50.0054ZM41.7422 50.0054C41.7422 54.5033 45.4641 58.1638 50.0397 58.1638C54.6153 58.1638 58.3372 54.5041 58.3372 50.0054C58.3372 45.5066 54.6145 41.8469 50.0397 41.8469C45.4641 41.8469 41.7422 45.5066 41.7422 50.0054ZM63.3248 39.6355C65.0208 39.6355 66.3956 38.2606 66.3956 36.5646C66.3956 34.8687 65.0208 33.4938 63.3248 33.4938C61.6288 33.4938 60.2539 34.8687 60.2539 36.5646C60.2539 38.2606 61.6288 39.6355 63.3248 39.6355Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_youtube"><a href="https://www.youtube.com/@TildaPublishing_global" target="_blank" rel="nofollow" aria-label="youtube" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50Zm17.9-67.374c3.838.346 6 2.695 6.474 6.438.332 2.612.626 6.352.626 10.375 0 7.064-.626 11.148-.626 11.148-.588 3.728-2.39 5.752-6.18 6.18-4.235.48-13.76.7-17.992.7-4.38 0-13.237-.184-17.66-.552-3.8-.317-6.394-2.44-6.916-6.218-.38-2.752-.626-6.022-.626-11.222 0-5.788.209-8.238.7-10.853.699-3.732 2.48-5.54 6.548-5.96C36.516 32.221 40.55 32 49.577 32c4.413 0 13.927.228 18.322.626Zm-23.216 9.761v14.374L58.37 49.5l-13.686-7.114Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_twitter"><a href="https://twitter.com/TildaPublishing" target="_blank" rel="nofollow" aria-label="twitter" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" xmlns="http://www.w3.org/2000/svg" width=48px height=48px viewBox="0 0 48 48"> <g clip-path="url(#clip0_3697_102)"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM33.3482 14L25.9027 22.4686H25.9023L34 34H28.0445L22.5915 26.2348L15.7644 34H14L21.8082 25.1193L14 14H19.9555L25.119 21.3532L31.5838 14H33.3482ZM22.695 24.1101L23.4861 25.2173V25.2177L28.8746 32.7594H31.5847L24.9813 23.5172L24.1902 22.4099L19.1103 15.2997H16.4002L22.695 24.1101Z" fill="#ffffff"/></g><defs><clipPath id="clip0_3697_102"><rect width="48" height="48" fill="white"/></clipPath></defs> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_facebook"><a href="https://www.facebook.com/tildapublishing" target="_blank" rel="nofollow" aria-label="facebook" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.6142 0 50-22.3858 50-50S77.6142 0 50 0 0 22.3858 0 50s22.3858 50 50 50Zm3.431-73.9854c-2.5161.0701-5.171.6758-7.0464 2.4577-1.5488 1.4326-2.329 3.5177-2.5044 5.602-.0534 1.4908-.0458 2.9855-.0382 4.4796.0058 1.1205.0115 2.2407-.0085 3.3587-.6888.005-1.3797.0036-2.0709.0021-.9218-.0019-1.8441-.0038-2.7626.0096 0 .8921.0013 1.7855.0026 2.6797.0026 1.791.0052 3.5853-.0026 5.3799.9185.0134 1.8409.0115 2.7627.0096.6912-.0015 1.382-.0029 2.0708.0021.0155 3.5565.0127 7.1128.0098 10.669-.0036 4.4452-.0072 8.8903.0252 13.3354 1.8903-.0134 3.7765-.0115 5.6633-.0095 1.4152.0014 2.8306.0028 4.2484-.0022.0117-4.0009.0088-7.9986.0058-11.9963-.0029-3.9979-.0058-7.9957.0059-11.9964.9533-.005 1.9067-.0036 2.86-.0021 1.2713.0019 2.5425.0038 3.8137-.0096.396-2.679.7335-5.3814.9198-8.0947-1.2576-.0058-2.5155-.0058-3.7734-.0058-1.2578 0-2.5157 0-3.7734-.0059 0-.4689-.0007-.9378-.0014-1.4066-.0022-1.4063-.0044-2.8123.0131-4.2188.198-1.0834 1.3158-1.9104 2.3992-1.8403h5.1476c.0117-2.8069.0117-5.602 0-8.4089-.6636 0-1.3273-.0007-1.9911-.0014-1.9915-.0022-3.9832-.0044-5.975.0131Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_telegram"><a href="https://t.me/tilda_global" target="_blank" rel="nofollow" aria-label="telegram" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50Zm21.977-68.056c.386-4.38-4.24-2.576-4.24-2.576-3.415 1.414-6.937 2.85-10.497 4.302-11.04 4.503-22.444 9.155-32.159 13.734-5.268 1.932-2.184 3.864-2.184 3.864l8.351 2.577c3.855 1.16 5.91-.129 5.91-.129l17.988-12.238c6.424-4.38 4.882-.773 3.34.773l-13.49 12.882c-2.056 1.804-1.028 3.35-.129 4.123 2.55 2.249 8.82 6.364 11.557 8.16.712.467 1.185.778 1.292.858.642.515 4.111 2.834 6.424 2.319 2.313-.516 2.57-3.479 2.57-3.479l3.083-20.226c.462-3.511.993-6.886 1.417-9.582.4-2.546.705-4.485.767-5.362Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_tiktok"><a href="https://www.tiktok.com/@tilda.publishing" target="_blank" rel="nofollow" aria-label="tiktok" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50Zm5.495-74.986c-1.555.002-3.113.004-4.676.028l.001.002c-.04 5.37-.038 10.742-.035 16.12.001 3.007.003 6.015-.004 9.026-.006 1.01-.005 2.019-.004 3.027.002 2.712.005 5.421-.144 8.138-.022.754-.4 1.417-.767 2.06l-.088.154c-1.212 1.977-3.442 3.327-5.769 3.352-3.51.31-6.797-2.563-7.292-5.982-.004-.167-.01-.336-.016-.505-.034-.964-.069-1.948.298-2.846.522-1.482 1.524-2.791 2.843-3.646 1.806-1.255 4.222-1.442 6.29-.773 0-1.318.022-2.636.044-3.953.03-1.767.06-3.534.036-5.303-4.525-.846-9.358.585-12.808 3.59-3.044 2.58-5.005 6.372-5.38 10.336a34.879 34.879 0 0 0 .025 3.1c.431 4.876 3.392 9.418 7.6 11.9 2.54 1.496 5.516 2.309 8.496 2.139 4.858-.082 9.588-2.686 12.313-6.682 1.694-2.4 2.655-5.299 2.818-8.211.042-4.001.04-8.01.036-12.023 0-2.068-.002-4.138.003-6.208 1.082.708 2.189 1.4 3.376 1.938 2.727 1.293 5.746 1.919 8.75 2.017v-8.39c-3.206-.357-6.501-1.415-8.83-3.726-2.335-2.255-3.482-5.504-3.646-8.693-1.156.01-2.312.012-3.47.014Z" fill="#ffffff"/> </svg></a></li> </ul> </div> </div> </div> </div> </div> <div id="rec744693715" class="r t-rec t-rec_pt_30 t-rec_pb_60" style="padding-top:30px;padding-bottom:60px;background-color:#232323; " data-record-type="56" data-bg-color="#232323">  <div class="t046"> <div class="t-container"> <div class="t-col t-col_10 t-prefix_1"> <div class="t046__text t-text_footer t-text_footer_xs" field="text"><div style="font-size: 14px;" data-customstyle="yes"><span style="color: rgb(255, 255, 255);">A learning resource with practical guides on web design and digital marketing from the </span><a href="https://tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">Tilda</a><span style="color: rgb(255, 255, 255);"> website builder. </span><br /><span style="color: rgb(255, 255, 255);">© Tilda Publishing, 2015-2024 All rights reserved. Any reproduction and redistribution of the content is prohibited. Please read our </span><a href="https://tilda.education/en/terms" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">Terms of Service</a><span style="color: rgb(255, 255, 255);"> and </span><a href="https://tilda.education/en/privacy" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">Privacy Policy</a><span style="color: rgb(255, 255, 255);">. For any questions, contact us at </span><a href="mailto:team@tilda.cc" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">team@tilda.cc</a><br /><p style="text-align: center;"><span style="color: rgb(255, 255, 255);"> </span></p></div></div> </div> </div> </div> </div> </div> <style>.csssize{height:4743px}.t-body{margin:0}#allrecords_footer{-webkit-font-smoothing:antialiased;background-color:none}#allrecords_footer a{color:#ff8562;text-decoration:none}#allrecords_footer a,#allrecords_footer button,#allrecords_footer .t-radio,#allrecords_footer .t-checkbox,#allrecords_footer .t-img-select{outline:none}#allrecords_footer a:focus-visible,#allrecords_footer button:focus-visible,#allrecords_footer .t-focusable,#allrecords_footer .t-focusable .t-btn,#allrecords_footer .t-focusable .t-btntext,#allrecords_footer .t-img-select:focus-visible+.t-img-select__indicator,#allrecords_footer .t-img-select:focus-visible+.t-img-select__indicator:after,#allrecords_footer .t-radio:focus-visible+.t-radio__indicator,#allrecords_footer .t-checkbox:focus-visible+.t-checkbox__indicator{outline-color:#2015FF;outline-offset:4px;outline-style:auto}#allrecords_footer .t-descr a:focus-visible,#allrecords_footer .t-sociallinks a:focus-visible,#allrecords_footer .ya-share2__link:focus-visible{outline-offset:2px}#allrecords_footer a[href^=tel]{color:inherit;text-decoration:none}#allrecords_footer ol{padding-left:22px}#allrecords_footer ul{padding-left:20px}#allrecords_footer b,#allrecords_footer strong{font-weight:700}@media print{body,html{min-width:1200px;max-width:1200px;padding:0;margin:0 auto;border:none}}.t-records_footer{-webkit-font_smoothing:antialiased;background-color:none}.t-records_footer a{color:#ff8562;text-decoration:none}.t-records_footer a[href^=tel]{color:inherit;text-decoration:none}.t-records_footer ol{padding-left:22px;margin-top:0;margin-bottom:10px}.t-records_footer ul{padding-left:20px;margin-top:0;margin-bottom:10px}.t-mbfix{opacity:.01;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);position:fixed;width:100%;height:500px;background-color:white;top:0;left:0;z-index:10000;-webkit-transition:all 0.1s ease;transition:all 0.1s ease}.t-mbfix_hide{-webkit-transform:translateX(3000px);-ms-transform:translateX(3000px);transform:translateX(3000px)}img:not([src]){visibility:hidden}.t-body_scroll-locked{position:fixed;left:0;width:100%;height:100%;overflow:hidden}.r_anim{-webkit-transition:opacity 0.5s;transition:opacity 0.5s}.r_hidden{opacity:0}.r_showed{opacity:1}@media screen and (max-width:1024px){a:active,button:active{-webkit-tap-highlight-color:rgba(255,255,255,.1)}}.t-text_footer{font-family:'TildaSans',Arial,sans-serif;font-weight:400;color:#000000}.t-text_footer_xs{font-size:15px;line-height:1.55}.t-name{font-family:'TildaSans',Arial,sans-serif;font-weight:600;color:#000000}.t-name_md{font-size:20px;line-height:1.35}.t-title_footer{font-family:'TildaSans',Arial,sans-serif;font-weight:600;color:#000000}.t-tildalabel{background-color:#000;color:#fff;width:100%;height:70px;font-family:Arial;font-size:14px}.t-tildalabel:hover .t-tildalabel__wrapper{opacity:1}.t-tildalabel__wrapper{display:table;height:30px;width:270px;margin:0 auto;padding-top:20px;opacity:.4}.t-tildalabel__txtleft{display:table-cell;width:120px;height:30px;vertical-align:middle;text-align:right;padding-right:12px;font-weight:300;font-size:12px}.t-tildalabel__wrapimg{display:table-cell;width:30px;height:30px;vertical-align:middle}.t-tildalabel__img{width:30px;height:30px;vertical-align:middle}.t-tildalabel__txtright{display:table-cell;width:120px;height:30px;vertical-align:middle;padding-left:12px;font-weight:500;letter-spacing:2px}.t-tildalabel__link{color:#fff;text-decoration:none;vertical-align:middle}.t-rec_pt_0{padding-top:0}.t-rec_pt_30{padding-top:30px}.t-rec_pt_75{padding-top:75px}.t-rec_pb_0{padding-bottom:0}.t-rec_pb_60{padding-bottom:60px}@media screen and (max-width:1200px){.t-text_footer_xs{font-size:14px}.t-name_md{font-size:18px}}@media screen and (max-width:640px){.t-text_footer_xs{font-size:12px;line-height:1.45}.t-name_md{font-size:16px}}@media screen and (max-width:480px){.t-rec_pt_0{padding-top:0}.t-rec_pt_30{padding-top:30px}.t-rec_pt_75{padding-top:75px}.t-rec_pb_0{padding-bottom:0}.t-rec_pb_60{padding-bottom:60px}.t-rec_pt-res-480_60{padding-top:60px!important}}.t396{-webkit-text_footer-size-adjust:100%}.t396__iframe{z-index:10000;background-color:#fff;width:100vw;height:100vh;position:fixed;top:0;left:0;border:0}.t396__body_overflow_hidden{overflow:hidden}.t396__display_none{display:none}.t396__artboard{position:relative;width:100%;height:100vh;overflow:hidden}.t396__artboard .t396__artboard_scale{overflow:visible}.t396__artboard.t396__artboard_scale .t396__elem[data-elem-type="text"] .tn-atom{word-break:normal;-moz-osx-font-smoothing:grayscale}.t396__artboard_scale .t396__carrier,.t396__artboard_scale .t396__filter{transform-origin:top left}.tn-atom__scale-wrapper{width:inherit;height:inherit}.t396__elem .tn-atom__scale-wrapper .tn-atom{width:inherit;height:inherit!important;box-sizing:border-box}.t396__artboard.rendering .tn-elem{visibility:hidden}.t396__artboard.rendered .tn-elem{visibility:visible}.t396__carrier{position:absolute;left:0;top:0;z-index:0;width:100%;height:100vh;-moz-transform:unset}.t396__filter{position:absolute;left:0;top:0;z-index:1;width:100%;height:100vh;transform:translateZ(0)}.t396__elem{position:absolute;box-sizing:border-box;display:table}.t396 .tn-atom{display:table-cell;vertical-align:middle;width:100%;-webkit-text_footer-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%}@media screen and (max-width:959px){.t396_safari .t396__artboard_scale .tn-atom{-webkit-text_footer-size-adjust:auto;-moz-text-size-adjust:auto;-ms-text-size-adjust:auto}}.t396 .tn-atom ul,.t396 .tn-atom ol{margin-bottom:0}.t396_safari .tn-atom:not(.tn-atom__form){transform:translateZ(0)}.t396 a.tn-atom{text-decoration:none}.t396 .tn-atom__img{width:100%;display:block}.t396 .tn-atom__html{vertical-align:top}.t396 .tn-atom__pin{border-radius:1000px;border-style:solid}.t396 .tn-atom__pin_onclick{cursor:pointer}.t396 .tn-atom__tip{position:absolute;box-sizing:border-box;width:300px;max-width:90vw;padding:15px;display:none}.t396 .tn-atom__pin:hover .tn-atom__tip{display:none}.t396 .tn-atom__tip-img{width:100%;display:block;margin-bottom:10px}.t396 .tn-atom__tip[data-tip-pos=top]{bottom:100%;margin-bottom:15px;left:50%;transform:translateX(-50%)}.t396 .tn-atom__tip[data-tip-pos=bottom]{top:100%;margin-top:15px;left:50%;transform:translateX(-50%)}.t396 .tn-atom__tip[data-tip-pos=left]{right:100%;margin-right:15px;top:50%;transform:translateY(-50%)}.t396 .tn-atom__tip[data-tip-pos=right]{left:100%;margin-left:15px;top:50%;transform:translateY(-50%)}.t396__ui{position:absolute;top:16px;left:196px;background-color:#fa876b;color:#000!important;height:30px;line-height:30px;width:100px;z-index:1000;text-align:center;border-radius:3px;display:none;font-size:14px}.t396__artboard.t396__artboard-fixed-active{transform:none!important;opacity:1!important}.t396__artboard-fixed-no-bg,.t396__artboard-fixed-innactive,.t396__artboard-fixed-innactive .t396__elem,.t396__artboard-fixed-no-bg.t396__artboard-fixed-innactive .t396__elem{pointer-events:none}.t396__artboard-fixed-no-bg .t396__elem{pointer-events:auto}.t396__elem-flex{position:relative!important;left:initial!important;top:initial!important;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-ms-flex-negative:0;flex-shrink:0}.t188__wrapone{position:relative;right:50%;float:right}.t188__wraptwo{position:relative;z-index:1;right:-50%}.t188__wrapper{display:-webkit-flex;display:flex;justify-content:center;-webkit-box-pack:justify;-webkit-justify-content:center;-ms-flex-pack:justify}.t188 .t-sociallinks__item,.t188__sociallinkimg{display:inline-block;padding-left:5px;padding-right:5px}#allrecords_footer .t188 ul.t-sociallinks__wrapper{margin-bottom:0;padding-left:0;list-style:none}.t188 .t-sociallinks__item a{display:inline-block}.t188__imgwrapper{background-size:contain;background-repeat:no-repeat;background-position:center}.t046__text{text-align:center;padding-top:10px;padding-bottom:4px}.t-menusub__menu{display:none}.t456__imglogo{display:block;height:auto;margin-right:30px}.t456__linewrapper{position:absolute;bottom:0;left:0;width:100%}.t456__horizontalline{margin:0;border:0;background-color:#C2C2C2;height:1px;right:0;bottom:0;margin:0 40px 0 40px}.t456__imglogo{max-width:300px}.t456__leftwrapper{display:table-cell;vertical-align:middle;padding-left:40px}.t456__rightwrapper{display:table-cell;vertical-align:middle;padding-right:40px;width:100%}.t456__menualign_left{text-align:left}.t456__menualign_right{text-align:right}.t456__menualign_center{text-align:center}@media screen and (max-width:1200px){.t456__leftwrapper{padding-left:20px}.t456__rightwrapper{padding-right:20px}}.t456{width:100%;height:80px;z-index:990;position:fixed;top:0;box-shadow:0 1px 3px rgba(0,0,0,0);transition:background-color 300ms linear}.t456__beforeready{visibility:hidden}.t456 ul{margin:0}.t456__maincontainer{width:100%;height:80px;display:table;position:relative}.t456__maincontainer.t456__c12collumns{max-width:1200px;margin:0 auto}.t456__logo{display:inline-block;font-size:24px;font-weight:400;white-space:nowrap;padding-right:30px}.t456__list{list-style-type:none;margin:0;padding:0!important}.t456__list_item{clear:both;font-family:'TildaSans',Arial,sans-serif;font-size:16px;display:inline-block;padding-left:15px;padding-right:15px;margin:0;color:#000000;white-space:nowrap}.t456__list_item .t-active{opacity:.7}.t456__list_item:first-child{padding-left:0}.t456__list_item:last-child{padding-right:0}.t456 a,#allrecords_footer .t456 a{text-decoration:none;color:#000000}.t456.t456__positionabsolute{position:absolute}.t456.t456__positionfixed{position:fixed}.t456.t456__positionstatic{position:static}.t456__mobile{display:none}@media screen and (max-width:980px){.t456__linewrapper{display:none}.t456{position:static;text-align:center;display:block;margin:0;padding:0;height:auto!important}.t456.t456__positionabsolute,.t456.t456__positionfixed,.t456.t456__positionstatic{position:relative}.t456__imglogo{width:auto!important;box-sizing:border-box;padding:20px;margin:0 auto}.t456__imglogomobile.t456__imglogo{width:100%!important}.t456__logo{text-align:center;margin:20px}.t456 img{float:inherit}.t456 .t456__list_item{display:block;text-align:center;padding:10px!important;white-space:normal}.t456__logo{white-space:normal;padding:0}.t456__logowrapper{position:static;display:block;width:100%}.t456__logowrapper2{display:block;position:static}.t456__leftwrapper,.t456__rightwrapper{width:100%!important;display:block}.t456__leftwrapper{padding:20px;box-sizing:border-box}.t456__rightwrapper{padding:20px 0!important;box-sizing:border-box}.t456__list{display:block;padding:0!important}}</style>