Best Fonts

<!DOCTYPE html> <html ng-app="myApp" lang="en" ng-controller="appCtrl"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best Fonts</title> <meta name="description" content="Yit מתמחה במתן שירותים דיגיטליים מתקדמים בראייה של 360 מעלות, במטרה להבטיח את המענה המדויק עבור הפרויקט שלכם. הצוות שלנו כולל את הטובים בתחומם – כל אחד ואחת מהם ישמחו להעמיד לרשותכם את המומחיות, היצירתיות והניסיון שלהם"> <meta name="title" content="פיתוח אפליקציות, עיצוב UX\UI, בניית אתרים, עיצוב חווית משתמש"> <meta property="og:type" content="website"> <meta property="og:url" content="https://yit.co.il/"> <meta property="og:title" content="פיתוח אפליקציות, עיצוב UX\UI, בניית אתרים, עיצוב חווית משתמש"> <meta property="og:description" content="Yit מתמחה במתן שירותים דיגיטליים מתקדמים בראייה של 360 מעלות, במטרה להבטיח את המענה המדויק עבור הפרויקט שלכם. הצוות שלנו כולל את הטובים בתחומם – כל אחד ואחת מהם ישמחו להעמיד לרשותכם את המומחיות, היצירתיות והניסיון שלהם"> <meta property="og:image" content="https://yit.co.il/images/CustomYitLogo.png">  <meta property="twitter:url" content="https://yit.co.il/"> <meta property="twitter:title" content="פיתוח אפליקציות, עיצוב UX\UI, בניית אתרים, עיצוב חווית משתמש"> <meta property="twitter:description" content="Yit מתמחה במתן שירותים דיגיטליים מתקדמים בראייה של 360 מעלות, במטרה להבטיח את המענה המדויק עבור הפרויקט שלכם. הצוות שלנו כולל את הטובים בתחומם – כל אחד ואחת מהם ישמחו להעמיד לרשותכם את המומחיות, היצירתיות והניסיון שלהם"> <meta property="twitter:image" content="https://yit.co.il/images/CustomYitLogo.png"> <script> dataLayer = []; </script>  <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-N3XMPZ');</script>   <script async src="https://www.googletagmanager.com/gtag/js?id=AW-382876680"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-382876680'); </script>  <script> !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.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', '842366193020929'); fbq('track', 'PageView'); </script>  <link rel="canonical" href="https://yit.co.il/article/12" /> <meta property="og:title" content="Best Fonts" /> <meta property="og:type" content="article" /> <meta property="og:image" content="https://yit.co.il/images/articles/typography.jpg" /> <meta property="og:image:width" content="1920" /> <meta property="og:image:height" content="1080" /> <meta property="og:url" content="https://yit.co.il/article/12" /> <meta property="og:description" content="כיצד לבחור את הגופן הנכון לאתר שלי " /> <meta property="og:site_name" content="Yit" /> <meta property="fb:app_id" content="1662790277172042" /> <meta property="og:locale" content="he_IL" />  <link ng-if="lang =='heb'" href='/Built/style_rtl.bundle.css?v=0109.2' rel='stylesheet' type='text/css'> <link ng-if="lang =='eng'" href='/Built/style_ltr.bundle.css?v=0109.2' rel='stylesheet' type='text/css'> <link rel="icon" href="../../favicon.ico" type="image/gif" sizes="16x16"> <link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet"> <script> var appRoot = '/'; </script> <link href="/Built/articles.css" rel="stylesheet"/> <link href="/scss/vendors/owlCarousel/2.3.3/owl.carousel.css" rel="stylesheet"/> <link href="/scss/vendors/owlCarousel/2.3.3/owl.theme.default.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js"></script> <script src="/scripts/jquery-3.7.1.min.js"></script> <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script> <script src="https://www.google.com/recaptcha/api.js?render=6Ld3AcwpAAAAACIE5lNwCGTDirYAsGncaRk66854"></script> </head> <body class=" {{lang}}" ng-cloak>  <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N3XMPZ" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>   <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=842366193020929&ev=PageView&noscript=1" /> </noscript>  <header sticky class="main inverse-c"> <div class="container wrapper navpadding"> <nav class="navbar navbar-toggleable-md justify-content-center align-items-center flex-row"> <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span id="burger" class="yit-navbar-toggler-icon"> <span></span> <span></span> <span></span> </span> </button> <a class="navbar-brand" href="/"> <img class="navbar-brand" src="/images/logo white.png" alt="YIT"> </a> <a class="top-contact-btn btn rounded-corners" href="/ContactUs">דברו איתנו</a> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link p-0" href="/About"> מי אנחנו </a> </li> <li class="nav-item"> <a class="nav-link p-0" href="/Expertise"> המומחיות שלנו </a> </li> <li class="nav-item"> <a class="nav-link p-0" href="/Projects"> פרוייקטים </a> </li> <li class="nav-item"> <a class="nav-link p-0" href="/Customers"> הלקוחות שלנו </a> </li> <li class="nav-item"> <a class="nav-link p-0" href="/JoinUs"> קריירה </a> </li> <li class="nav-item active"> <a class="nav-link p-0" href="/Articles"> בלוג </a> </li> <li class="nav-item cms-item"> <a class="btn rounded-corners transparent cms-button" href="https://tamka-cms.com" target="_blank"> <img src="/images/tamka-logo-white2.png" /> </a> </li> <li class="nav-item"> <a class="btn rounded-corners" href="/ContactUs">דברו איתנו</a> </li> <li class="nav-item"> <a href="#" class="nav-link p-0" ng-click="switchLang($event)">EN</a> </li> </ul> </div> </nav> </div> </header> <main class="article-page"> <div class="article-img"> <img src="https://yit.co.il/images/articles/typography.jpg" alt="" class="img-fluid" /> <div class="d-imgwrp" style="background: url(https://yit.co.il/images/articles/typography.jpg) no-repeat center"></div> </div> <section class="container-fluid a-container"> <h1 class="article-title">Best Fonts</h1> <div class="ad-s clearfix"> <div class="ad"> <span class="author">אורן מונדשיין</span> <span class="sep">|</span> <span class="date">05.06.2018</span> </div> <div class="share row"> <a href="#" class="share-icon f-icon"> <img src="/images/icons/facebook.svg" alt="פייסבוק" /> </a> <a href="#" class="share-icon t-icon"> <img src="/images/icons/twitter-icon.svg" alt="טוויטר" /> </a> <a href="#" class="w-icon share-icon"> <img src="/images/icons/whatsapp-icon.svg" alt="וואטסאפ" /> </a> </div> </div> <article class="article"> <div class="article-short"> כיצד לבחור את הגופן הנכון לאתר שלי </div> <div class="main-cont"> <p><strong>מבוא</strong><br />בחירה נכונה של גופן יכולה להפוך את האתר שלנו מעוד אתר ברשת של האתרים שלא נעים לשהות בו לאתר שמזמין את העין לקרוא את הטקסט שמופיע בו בצורה נעימה ולא מעייפת.</p> <p>אם בעבר נאלצנו להיעזר במומחי טיפוגרפיה, היום באמצעות מספר טיפים כל אחר יכול ליצור אתר שנראה כמו אתר שהשקיעו בו הרבה מאוד כסף, אם התוכן מעניין אז אפילו מעבר לזה.</p> <p><img src="/images/articles/typo-intro.png" alt="" class="img-fluid" /> </p> <p> <strong>איכות הטיפוגרפיה</strong><br /> איכות הטיפוגרפיה של המסמך שלנו נקבעת בגדול על ידי המראה של גוף הטקסט. מדוע? מכיוון שיש יותר טקסט בגוף הטקסט מאשר בכל מקום אחר. לכן יש להתחיל כל פרויקט באופן כזה שגוף הטקסט יראה טוב, אחר כך אפשר לדאוג לשאר. </p> <p>המראה של גוף הטקסט נקבע בעיקר על ידי ארבעת ההחלטות הטיפוגרפיות הבאות:</p> <p> <strong>POINT SIZE</strong><br /> גודל הנקודה הוא הגודל של האות. בדפוס, גודל הטקסט הנוח ביותר הוא בין 10-12 נקודות. עבור האינטרנט הטווח הוא 15-25 פיקסלים. לא כל גופן יופיע באותו הגודל עבור גודל נקודה נתון, אז חשוב להיות מוכנים לעדכן לפי הצורך. </p> <p><img src="/images/articles/typo-point-size.png" alt="" class="img-fluid" /> </p> <p> <strong>LINE SPACING</strong><br /> מרווח השורה הוא המרחק בציר האנכי בין השורות. הוא צריך להיות 120-145 אחוז מגודל הנקודה. במעבדי תמלילים, יש להשתמש באפשרות מרווח שורה מדויקת (Exact line spacing) על מנת להשיג זאת. אפשרות ברירת המחדל של מרווח שורה בודד הוא צפוף מדי, האפשרות של שורה וחצי היא משוחררת מדי. בשפת CSS יש להשתמש בפקודה line-height. </p> <p><img src="/images/articles/typo-line-space.png" alt="" class="img-fluid" /> </p> <p> <strong>LINE LENGTH</strong><br /> אורך השורה הוא הרוחב של בלוק הטקסט בציר האנכי. אורך השורה צריך להיות מוצע של 45-90 תווים לכל שורה (יש להשתמש ביכולת של מעבד התמלילים לספור מילים) או לחליפין פעמיים או שלוש פעמים רצף האותיות העבריות או האותיות הלועזיות הקטנות, כמו למשל: </p> <p> אבגדה-וזחטי-כלמנסע-פצקרשת-אבגדה-וזחטי-כלמנסע-פצקרשת-אבגדה-וזחטי-כלמנסע-פצקרשת </p> <p> במסמך מודפס, זה אומר בדרך כלל ששולי הדף גדולים יותר ממה שהיה מקובל בעבר אינטש אחד. על דף באינטרנט, זה מתכוון לרוב שלא לאפשר למלל לזרום לגבולות של חלון הדפדפן. </p> <p><img src="/images/articles/typo-shalom-font.png" alt="" class="img-fluid" /> </p> <p> <strong>FONT</strong><br /> בחירת הגופן. השיפור המהיר, הקל המקנה את השיפור המרבי לטיפוגרפיה היא פשוט להתעלם מהגופנים שמגיעים חינם עם המחשב (המוכרים כגופנים של מערכת ההפעלה) ובמקומם לרכוש גופנים מקצועיים או לחליפין להוריד גופנים בחינם מרשת האינטרנט. גופן מקצועי מספק לנו את היתרונות של עיצוב מקצועי בקלות ובזול, גם אם אין לנו מומחה טיפוגרפיה צמוד. </p> <p> במידה וזה לא אפשרי, ניתן עדיין לעשות שימוש טוב בגופנים שמצויים במערכת ההפעלה. לצורך זה יש לבחור בקפידה. המחמירים יאמרו שלעולם אין לעשות שימוש בגופנים כמו TIMES NEW ROMAN או Arial, מאחר וגופנים אילו חביבים על המעצבים החובבים ולא המקצוענים. </p> <p> תרשו לי וידוי קטן וטיפ אחרון, לעתים בסביבת העבודה של מיקרוסופט אני כן עושה שימוש בגופן Arial שהוא למעשה הגופן sans serif של מיקרוסופט. יחד עם זאת חשוב לבחור בגופן הנכון Arial Unicode MS על מנת שיכול על כל האותיות לרבות עברית. </p> <p><img src="/images/articles/typo-arial-unicode.png" alt="" class="img-fluid" /> </p> <p> <strong>לסיכום</strong><br /> שימוש בטיפים המופיעים כאן ובנוסף הקפדה על תוכן מעניין עושים את העבודה והופכים את האתרים שלנו לאטרקטיביים יותר ונעימים לקריאה. </p> </div> </article> </section> <section class="more-articles"> <h3 class="ma-title a-container container-fluid">עוד כתבות שיעניינו אתכם:</h3> <div class="m-cont row"> <button class="ma-right"> <img src="/images/articles/arrow-right.png" alt="ימינה" /> </button> <div class="ma-carousel owl-carousel"> <a class="ma-item" href="https://yit.co.il/article/5"> <div class="m-img"> <img src="https://yit.co.il/images/articles/amain.jpg" alt="" /> </div> <div class="m-txt"> חדשנות על הקצה: הטייק שלנו מכנס "Innov8rs 2018" </div> </a> <a class="ma-item" href="https://yit.co.il/article/7"> <div class="m-img"> <img src="https://yit.co.il/images/articles/bmain.jpg" alt="" /> </div> <div class="m-txt"> Smart Assistant </div> </a> <a class="ma-item" href="https://yit.co.il/article/8"> <div class="m-img"> <img src="https://yit.co.il/images/articles/mentoring.jpg" alt="" /> </div> <div class="m-txt"> YIT Mentoring 2018 </div> </a> <a class="ma-item" href="https://yit.co.il/article/10"> <div class="m-img"> <img src="https://yit.co.il/images/articles/dd.jpg" alt="" /> </div> <div class="m-txt"> YIT Sorenson Squeeze Server 4 </div> </a> <a class="ma-item" href="https://yit.co.il/article/11"> <div class="m-img"> <img src="https://yit.co.il/images/articles/AmazonWebservices_Logo.jpg" alt="" /> </div> <div class="m-txt"> Amazon Elastic Transcoder </div> </a> </div> <button class="ma-left"> <img src="/images/articles/arrow-left.png" alt="שמאלה" /> </button> </div> </section> </main> <section id="contact-form-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-xxl-2 col-lg-2"> <div class="wrapper h-100 d-lg-flex flex-column"> <span class="h3"> {{footerStrings.span1}} </span> <span class="h3"> {{footerStrings.span2}} </span> <span class="h3"> {{footerStrings.span3}}</span> </div> </div> <div class="col-xxl-6 col-lg-8 d-flex flex-lg-row flex-column justify-content-between"> <fieldset> <div class="form-group"> <input type="text" class="form-control input-name" id="" aria-describedby="emailHelp" placeholder="{{footerStrings.name}}"> </div> <div class="form-group"> <input type="email" class="form-control input-email" id="" aria-describedby="emailHelp" placeholder="{{footerStrings.mail}}"> </div> <div class="form-group"> <input type="text" class="form-control input-phone" id="" aria-describedby="emailHelp" placeholder="{{footerStrings.phone}}"> </div> </fieldset> <fieldset> <div class="form-group message-group d-flex justify-content-end"> <textarea class="form-control" id="" placeholder="{{footerStrings.text}}" rows="3"></textarea> </div> </fieldset> </div> </div> <div class="row justify-content-center"> <div class="col-xxl-2 col-lg-2 no-gutters"> </div> <div class="col-xxl-4 col-lg-4 no-gutters privacyDiv"> <input type="checkbox" id="privacyCheckbox" class="privacyCheckbox"> <label for="privacyCheckbox" class="privacyCheckboxLabel">{{footerStrings.privacyText}} <a href="/Privacy.pdf" class="privacyHref">{{footerStrings.privacyLink}}</a></label> <br /> <label id="privacyErr" class="privacyErr">{{footerStrings.privacyErr}}</label> </div> <div class="col-xxl-2 col-lg-4 no-gutters text-right"> <div class="btn rounded-corners whited"> {{footerStrings.btn}} </div> </div> </div> </div> </section>  <footer class="py-5"> <div class="container"> <div class="row justify-content-center pb-1"> <div class="col-lg-1 col-3 text-center"> <a href="/"><img class="img-fluid logo" alt="logo"></a> </div> </div> <div class="row justify-content-center"> <div class="col-xl-8 col-lg-6 col-md-8 col-12 d-flex justify-content-center"> <ul class="d-flex align-items-center flex-lg-row flex-column" id="footer-contact"> <li><a href="tel:03-6082888">03-6082888</a></li> <li ng-if="lang =='eng'">Mozes 1st, Rishon Letsion</li> <li ng-if="lang =='heb'">נח מוזס 1 , ראשון לציון</li>  </ul> </div> </div> </div> </footer>  <script src="/scripts/tether.min.js" type="text/javascript"></script> <script src="/scripts/bootstrap.min.js" type="text/javascript"></script> <script src="/Built/main.bundle.js" type="text/javascript"></script> <div id="loader"> <div class="container"> <i class="fa fa-spinner rotateme" aria-hidden="true"></i> </div> </div> <div id="async-message" class="text-center async-msg"> <div class="container"> <div class="close_message"> </div> <img src="/images/thanks.png" alt="" /> <script> $("#async-message").on("click", function (e) { $("#async-message").fadeOut(); }); </script> </div> </div> <a href="tel:03-6082888"> <img id="cnt-lnk" src="/images/Contact.png" /> </a> <script src="https://images-azak.ynet.co.il/static/EquallyAI/EquallyAI.js" async></script> <script> var AppSettings = { baseUrl: 'https://yit.co.il', reCaptchaSiteKey : '6Ld3AcwpAAAAACIE5lNwCGTDirYAsGncaRk66854' }; </script> <script> $('document').ready(function () { var articleCtrl = new ArticleCtrl(); }); </script> <script src="/Scripts/vendors/owlCarousel/2.3.3/owl.carousel.js"></script> <script src="/Scripts/yit/articles/ArticleCtrl.js"></script> </body> </html>

CINXE.COM

Best Fonts