15 Корисні інструменти веб-типографіки, бібліотеки та фреймворки

Робота з типографікою в Інтернеті була дійсно химерною. Кожен браузер має власний алгоритм візуалізації шрифтів що може призвести до непередбачених розбіжностей. Є лише кілька властивостей CSS, які можна використовувати, щоб мати певний контроль над шрифтами, наприклад, кернінг шрифтів, згладжування шрифтів, створення DropCaps тощо..

Доброю новиною є наявність ресурсів, які можна використовувати, щоб взяти на себе колесо, коли справа доходить до типографіки сайту. Тут 15 веб-інструментів, бібліотек і фреймворків можна використовувати для цього.

Докладніше про Hongkiat:

9 Плагіни WordPress, щоб зробити більше з вашими шрифтами
20 кращих плагінів для оформлення WordPress для підвищення читабельності
Краще і чіткіші значки інтерфейсу користувача з веб-шрифтами

TypeRendering

Коротко, TypeRendering працює подібно до Modernizr, за винятком того, що він ідентифікує лише движок браузера для візуалізації шрифтів. Ця бібліотека додає користувальницькі класи на основі своїх відкриттів, які можуть бути використані для застосування спеціальних правил стилізації для візуалізації типу.

KerningJS

Kerning ще не налаштовується для використання в Інтернеті - шрифт-кернінг підтримка все ще залишається бідною на даний момент - але новий стандартний майно наближається. KerningJS це бібліотека Javascript, яка надає вам кілька нових властивостей для кращого керування керування, наприклад -лист-керн.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Майте на увазі, що наведений вище приклад не є стандартним і застосовується лише з KerningJS.

DropcapJS

Хоча створення dropcap виконується з поточними стандартами CSS, результат ще не ідеальний. Іноді це просто небажано. DropcapJS, розроблений Adobe Web Platform, покладається на місію, яка дозволяє веб-дизайнеру легко застосовувати ідеальний dropcap.

LiningJS

LiningJS є бібліотекою JavaScript, яка додає лінії класу в кожному рядку вашого абзацу. Це дозволяє стилювати лінію окремо. Вона імітує ідею :: nth-line (), :: nth-last-line () і :: останній рядок псевдо-класи, яких ще немає в CSS. Ось приклад того, як ми стилюємо перший рядок абзацу з LiningJS:

 p .line [first] font-weight: 600; text-transform: верхній регістр;

Крім того, LiningJS також підтримує китайський потік абзаців.

UnderlineJS

UnderlineJS - це бібліотека JavaScript, яка краще підкреслює текст. Перевірте демонстрацію, щоб побачити, що я маю на увазі, обов'язково наведіть курсор на рядки. Порівняйте демо з підкресленим виходом поточного CSS текст-прикраса стандарт, і ви, ймовірно, будете шанувальником underlineJS теж.

Тип потоку

Цей плагін буде динамічно налаштовувати розмір шрифту на основі певної ширини обгортки. Тип потоку допомагає застосувати ідеальну кількість символів на рядок на будь-якій ширині екрана. Бібліотека поставляється з опціями, де можна встановити мінімальну / максимальну ширину екрана, мінімальний / максимальний розмір шрифту, а також співвідношення шрифтів.

HatchShow

HatchShow Розширює розмір шрифту, щоб заповнити всю ширину його контейнера. Плагін працює з коробки з алгоритмом; Коротко кажучи, він вимірює ширину та довжину символу шрифту і додає відповідний розмір шрифту.

GridLover

GridLover є прекрасним інструментом для створення основних стилів для оформлення типографіки (розмір, висота рядка та маржа) з легким інтерфейсом слайдера. Він генерує стилі в SCSS, LESS і Stylus, тому ви можете включити його відразу в свій проект, незалежно від того, який CSS-препроцесор ви використовуєте.

TypeScale

TypeScale це онлайн-інструмент, який допоможе вам легко визначити правильний розмір шрифту для вашого сайту. Інструмент надає простий інтуїтивно зрозумілий графічний інтерфейс, щоб вставити розмір шрифту, масштаб і сімейство шрифтів, які ви хочете використовувати. Результати будуть візуалізовані для вас, щоб ви могли зіграти з масштабом, щоб отримати правильне значення. Просто візьміть CSS, як тільки ви закінчите.

Модульна шкала

Модульна шкала є інструментом для створення ідеального масштабування шрифту для тексту тіла та заголовка. Він виводить у Sass, який слід використовувати разом з бібліотекою Sass. Крім того, ви можете використовувати JavaScript .

Шрифт-ширина

Шрифт-ширина (FTW) це бібліотека Javascript, яка робить шрифт придатним до ширини контейнера. Вона визначатиме розмір шрифту разом з інтервалом, необхідним для шрифту. Якщо ви хочете зробити досить заголовок, це бібліотека, яку ви можете спробувати.

FFFFallback

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

Пара шрифтів

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

TypeSettings

TypeSettings являє собою набір правил правил CSS для визначення правильного масштабування шрифтів, вертикального ритму та відповідного співвідношення типографіки. TypeSettings поставляється в Sass і Stylus, що дозволяє гнучко відповідати потребам проекту, регулюючи змінні.

Typeplate

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

Тепер читайте: Вітрина веб-дизайнів з гарною типографією