Шрифти для сайту

1. Стандартні шрифти для сайтів
2. Безпечні шрифти для веб
3. Шрифти із зарубками і без
4. Красиві шрифти для сайту
5. Шрифти гугл для сайту
6. Чи не гулом єдиним живе інтернет
7. Як використовувати google шрифти і додати їх на сайт
8. Якщо не відображається шрифт на сайті
9. Який шрифт краще використовувати для сайту
10. Як дізнатися шрифт на сайті
11. Подяки

Наша взаимовыгодная связь https://banwar.org/

26 січня 2015 • HTML & CSS • Коментарі: 0

Заходячи на різні сайти я помічаю, що на деяких шрифт «не читається», причому до такої міри, що інформація не сприймається і хочеться скоріше закрити сторінку. А на інших зовсім навпаки - «очей не відірвати». Природно, що другі сайти мають більш високу конверсію.

Конверсія в інтернет-маркетингу - це відношення числа відвідувачів сайту, що виконали на ньому будь-які цільові дії (приховані або прямі вказівки рекламодавців, продавців, творців контенту - продажу, реєстрації, підписку, відвідування певної сторінки сайту, перехід по рекламному посиланню), до загальної кількості відвідувачів сайту, виражене у відсотках.
Матеріал з Вікіпедії.

Стандартні шрифти для сайтів

Більшість сайтів в мережі використовують стандартні шрифти. Тобто ті, які присутні у користувачів на комп'ютері. При цьому існує список так званих безпечних шрифтів. Це ті шрифти які з імовірністю 99% присутні на всіх комп'ютерах в світі, а також на смартфонах і в планшетах. При використанні таких шрифтів текст буде виглядати однаково на Windows, Linux, iOS, Mac OS і Android.

Безпечні шрифти для веб

Після прочитання не однієї тонни сторінок на цю тему я склав свій список 100% сумісності шрифтів між Windows і Mac.

Windows fonts / Mac fonts / Font family

• Arial, Arial, Helvetica, sans-serif
• Arial Black, Arial Black, Gadget, sans-serif
• Courier New, Courier New, monospace
• Lucida Sans Unicode, Lucida Grande, sans-serif
• Tahoma, Geneva, sans-serif
• Times New Roman, Times New Roman, Times, serif
• Verdana, Verdana, Geneva, sans-serif

Приклад CSS стилю для безпечного шрифту на сайті:

font-family: Arial, Helvetica, sans-serif;

Шрифти із зарубками і без

Як ви звернули увагу, всього три типи шрифтів. І якщо не брати до уваги моно Courier New, то нами доводиться мати справу з двома родинами - це шрифти із зарубками serif (serif - «зарубка») і шрифти без зарубок sans-serif (sans - «без»). Наступний малюнок наочно все демонструє.

За 100 років досліджень в напрямку розбірливості шрифту вченим так і не вдалося сформулювати конкретні теоретичні установки на предмет того, яку роль в розбірливості шрифту грають зарубки. Оптимально підібраний шрифт буде розбірливим завжди, і має набагато більше сенсу сперечатися про потрібність чи непотрібність зарубок в рамках естетичності, ніж розбірливості.

Красиві шрифти для сайту

Як відомо HTML документ передає на комп'ютер користувача текст, але не його графічне зображення. Для управління зовнішнім виглядом використовують стилі, які описують назву шрифту, його розмір, товщину і т.п. Саме тому ми і говорили вище про безпечні шрифтах.

І щоб використовувати альтернативні красиві шрифти, нам потрібно підсунути користувачеві шрифт необхідний для відображення вашого сайту. Тобто, щоб користувач побачив ваш сайт таким, як ви його задумали, необхідно, щоб комп'ютер користувача автоматично завантажив необхідний нестандартний шрифт.

Шрифти гугл для сайту

Для початку розберемося де брати шрифти для сайту. Сайтів зі шрифтами багато. Є як платні, так і безкоштовні. Але я рекомендую почати з безкоштовних від Google. Для цього необхідно відвідати відповідну сторінку http://google.com/fonts/ . Ресурс англійською мовою, але інтерфейс простий і розібратися не складно.

Якщо ваш сайт російською мовою, то потрібно відфільтрувати шрифти з кирилицею. Робиться це в лівій частині екрана.

Чи не гулом єдиним живе інтернет

Якщо вам не подобається скромну кількість російських шрифтів у Google, то зверніть увагу на вітчизняну альтернативу http://webfont.ru . На цьому сайті кириличних шрифтів набагато більше.

Як використовувати google шрифти і додати їх на сайт

Сподобався шрифт необхідно підключити до вашого сайту. Для того щоб браузер відвідувача знав який шрифт ви використовуєте і де його взяти. Є кілька способів, я використовую наступний варіант.
Наприклад, для шрифту Amiro на початку CSS файлу стилів вашого сайту робимо такий запис:

@import url (http://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic);

А у властивостях елементу, який ви хочете відобразити цим шрифтом (нехай це будуть всі заголовки H1, H2, H3, H4, H5, H6), пишете наступне:

h1, h2, h3, h4, h5, h6 {font-family: 'Arimo', sans-serif; }

Якщо не розібралися, то перегляньте оригінальну документацію по використанню шрифтів від Гугла - https://developers.google.com/fonts/docs/getting_started

Якщо не відображається шрифт на сайті

Якщо впевнені, що все зробили без помилок, а шрифт на сайті не відображається, то в першу чергу перебуваючи в браузері натисніть одночасно дві клавіші [Ctrl] + [F5]. Це змусить ваш браузер заново перечитати ваш сайт, а не брати дані з збереженого кеша.

Який шрифт краще використовувати для сайту

Я час від часу шукаю відповідь на питання: «який вибрати шрифт для сайту». З огляду на, що веду і позиціонують свій блог як сайт для людей, необхідно враховувати наступне. По-перше шрифт повинен бути читається (розбірливий). По-друге він не повинен гальмувати завантаження сайту. По-третє хочеться, щоб було красиво.

Щоб не винаходити велосипед, потрібно використовувати популярні шрифти для сайту. Для цього подивіться який шрифт використовує сподобався вам сайт. Якщо очей «чіпляється» за текст, то спробуйте і ви використовувати цей шрифт.

Як дізнатися шрифт на сайті

Немає нічого простішого. Заходимо на будь-який вподобаний сайт. Нехай це буде Блог Касперського .

Натискаємо одночасно клавіші [Ctrl] + [U] І отримуємо вихідний код сторінки. В якому серед іншого буде посилання на файл стилів.

Клацаємо по ній і отримуємо всі необхідні нам дані по використовуваних шрифтів.

Як бачимо блог Касперського використовує популярний шрифт Open Sans від Google. І якщо він (шрифт) вам подобається, то після прочитання цієї статті ви знаєте як використовувати його на своєму сайті.

Подяки

При написанні статті були використані наступні джерела

Поділися цією сторінкою з друзями!