15 Інструменти онлайн типографіки Усі дизайнери повинні знати
Типографіка є основою будь-якого дизайну, тому що читання є одним з найосновніших речей, які ми робимо в Інтернеті. Вибрану типографію впливає на декілька аспектів веб-сайту, зокрема зручність для читання, настрою та загальний досвід користувачів. Це дуже важливо для дизайнерів і розробників знати основні принципи типографіки до створювати зручні для читання проекти.
Ми раніше говорили про інструменти для створення шрифтів, і сьогодні ми поділимося з вами інструментами типу, які дозволяють досягти кращого досвіду читання на веб-сайтах, які ви створюєте та / або створюєте.
Ось плагіни, онлайнові інструменти та сценарії, які допоможуть вам створювати чудові заголовки і чистий текст.
Typeplate
Це не призведе до розробки дизайну для вас, але визначить правильну розмітку зі стилем для звичайних типографічних шаблонів. Він також може дати вам поради про те, як правильно стилювати копію тексту.
Перевіряти: Демо | Документація
Гутенберг
Gutenberg є гнучким і простим у використанні типографічним стартовим набором для розробників і дизайнерів. Це допоможе вам встановити розмір базового типу, висоту рядка і максимальну ширину. Гутенберг є проектом з відкритим вихідним кодом, тому не соромтеся робити свій внесок, адаптуватися та змінювати його.
Перевіряти: Демо | Документація
Lettering.js
Lettering.js - це додаток jQuery, який надає вам контроль над типом кернінгу. Це дозволяє легко отримувати редакційний дизайн і керувати кодом. На сайті представлені дивовижні приклади типографіки, зроблені з цим плагіном для натхнення.
Перевіряти: Демо | Документація
Typebase.css
Typebase.css є настроюваною таблицею стилів оформлення. Він містить як SAAS, так і менше версій і легко змінюється в сучасні веб-проекти.
Перевіряти: Демо | Документація
FitText
FitText - це плагін, який зробить ваші розміри шрифтів сайту гнучкими. Це допоможе вам досягти масштабованості заголовків для різних дозволів екрану; іншими словами, зробіть вашу друкарню чуйною. Він створений лише для відображення величезного тексту.
Перевіряти: Демо | Документація
Kerning.js
Kerning.js допомагає автоматично трансформувати, масштабувати та змінювати типографіку за допомогою CSS. Почати роботу з Kerning.js легко.
Перевіряти: Демо | Документація
Typesettings.css
Typesettings.css - це ваш майданчик для створення мінімалістичних веб-проектів або блогів. Усі типографічні стилі, що використовуються тут, надихаються основами графічного дизайну.
Перевіряти: Демо | Документація
Рюкзак
З Rucksack ви можете створити дивовижну типографію рідини завдяки новому, реагує властивість на розмір шрифту. Створення чуйної типографіки зроблено виключно просто.
Перевіряти: Демо | Документація
FlowType.JS
Найбільш читабельна типографія містить від 45 до 75 символів на рядок, але для того, щоб визначити, що баланс є складним завданням для розробників. FlowType.JS змінює розмір шрифту, а згодом і висоту рядка на основі ширини конкретного елемента.
Перевіряти: Демо | Документація
Blast.js
Blast.js допоможе вам розділити тексти для полегшення маніпулювання типографікою. Він містить 4 вбудованих роздільника: символ, слово, речення та елемент. Він також може збігатися з користувацькими виразами та фразами.
Перевіряти: Демо | Документація
slabText
slabText - це простий скрипт, який розбиває заголовки на рядки, щоб повністю заповнити наявний горизонтальний простір. Сценарій обчислює ідеальну кількість символів, які можна встановити в кожному рядку, розділивши доступну ширину на розмір шрифту пікселя.
Перевіряти: Демо | Документація
Тип Шкала
За допомогою Type Scale ви можете переглядати та вибирати правильну шкалу типів для вашого проекту. Немає ніяких правил - просто грайте з розміром шрифту, масштабом і різними веб-шрифтами.
Перевіряти: Демо | Документація
Друкарські
Друкарська допомога допомагає зробити друкарський супровід. Все, що вам потрібно зробити, це просто вибрати кілька шрифтів, встановити кілька налаштувань, і ви отримаєте хорошу чуйну типографіку.
Перевіряти: Демо | Документація
Typi
Typi - це суміш із саасами, який можна використовувати для легкого створення чуйної типографіки. Він створює розмір шрифту та висоту рядків для HTML та інших елементів. Крім того, Typi має функцію вертикального ритму для обчислення висоти ліній.
Перевіряти: Документація
Lining.js
За допомогою плагіна Lining.js ви отримаєте повний контроль над веб-типографікою. Він підтримується найпопулярнішими браузерами, такими як Safari, Google Chrome, Opera та Mozilla Firefox.
Перевіряти: Демо | Документація
Бонус: 2 більше інструментів!
Стан веб-типу
Стан типу Web - це веб-сайт, який пропонує найновіші дані про підтримку типу та функцій у мережі. Ви можете скористатися пошуковими або категоріями, наприклад, кернінг, інтервал між копіями, завантаження шрифтів CSS та багато іншого, щоб знайти саме те, що вам потрібно.
Типограф
Типограф - це чудовий веб-плагін і ескіз, який дозволяє розміщувати нерозривні пробіли після однобуквенних слів, підключати номер і пристрій. Він також видаляє подвійні пробіли, входи, крапки та інші помилки, так що ви можете досягти чистої красивої типографіки, яку легко читати.
Перевіряти: Документація
