15 полезных веб-типографских инструментов, библиотек и структур

Работа с типографикой в ​​Интернете была очень странной. Каждый браузер имеет собственный алгоритм рендеринга шрифтов, который может привести к неожиданным расхождениям. Есть только несколько свойств CSS, которые вы можете использовать, чтобы иметь некоторый контроль над шрифтами, такие как кернинг шрифтов, сглаживание шрифтов, создание DropCaps и т. Д. Кроме того, нам приходится сталкиваться с множеством проблем с макетом, когда речь идет о шрифтах. ,

Хорошей новостью является то, что есть ресурсы, которые вы можете использовать, чтобы взять на себя управление, когда дело доходит до типографии сайта. Вот 15 веб-инструментов, библиотек и фреймворков, которые вы можете использовать для этой цели.

Больше на Hongkiat:
TypeRendering
В двух словах, TypeRendering работает аналогично Modernizr, за исключением того, что он определяет только механизм браузера для рендеринга шрифтов. Эта библиотека добавляет пользовательские классы на основе своих открытий, которые можно использовать для применения определенных правил стиля для рендеринга типов.
KerningJS
Кернинг пока не настраивается для использования в Интернете – в настоящее время поддержка кернинга шрифтов все еще слаба – но на нашем пути появляется новое стандартное свойство. KerningJS – это библиотека Javascript, которая предоставляет несколько новых свойств для лучшего управления кернингом, например -letter-kern.

#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 () и :: last-line, которых пока нет в CSS. Вот пример того, как мы стилизуем первую строку абзаца с помощью LiningJS:

p .line[first] {
вес шрифта: 600;
преобразование текста: верхний регистр;
}

Кроме того, LiningJS также поддерживает китайский поток абзацев.
UnderlineJS
UnderlineJS – это библиотека JavaScript, которая делает текст подчеркнутым. Проверьте демонстрация чтобы понять, что я имею в виду, обязательно наведите курсор мыши на линии. Сравните демонстрацию с выводом подчеркивания текущего стандарта оформления текста CSS, и вы, вероятно, тоже будете поклонником underlineJS.
FlowType
Этот плагин будет динамически корректировать размер шрифта на основе определенной ширины оболочки. FlowType помогает вам применять идеальное количество символов в строке на любой ширине экрана. Библиотека поставляется с опциями, в которых можно установить минимальную / максимальную ширину экрана, минимальный / максимальный размер шрифта и соотношение шрифтов.
HatchShow
HatchShow расширяет размер шрифта, чтобы заполнить всю ширину его контейнера. Плагин работает из коробки с алгоритмом; в двух словах, он измеряет ширину контейнера и длину символа шрифта и добавляет правильный размер шрифта.
GridLover
GridLover – отличный инструмент для генерации базовых стилей для расположения шрифтов (размер, высота строки и поля) с помощью простого пользовательского интерфейса слайдера. Он генерирует стили в SCSS, LESS и Stylus, поэтому вы можете сразу же включить их в свой проект независимо от того, какой CSS-препроцессор вы используете.
TypeScale
TypeScale – это онлайн-инструмент, который поможет вам легко определить правильный размер шрифта для вашего сайта. Инструмент предоставляет простой интуитивно понятный графический интерфейс для вставки базового размера шрифта, масштаба и семейства шрифтов, которые вы хотите использовать. Результаты будут визуализированы для вас, чтобы вы могли поиграть с шкалой, чтобы получить только правильное значение. Просто возьмите CSS, как только вы закончите.
Модульная шкала
Модульная шкала – это инструмент для генерации идеального масштабирования шрифта для текста тела и заголовка. Он выводит в Sass, который должен использоваться вместе с его Sass библиотека, Вы также можете использовать JavaScript ,
Шрифт к ширине
Font-To-Width (FTW) – это библиотека Javascript, которая подгоняет шрифт к своему контейнеру ширины. Он определит размер шрифта вместе со словом, необходимым для шрифта. Если вы хотите сделать красивый заголовок, вы можете попробовать эту библиотеку.
FFFFallback
FFFFallback, удобный инструмент, который позволяет вам найти лучший набор шрифтов, который будет изящно деградировать. Инструмент поставляется в виде букмарклета, который проанализирует семейство шрифтов на вашей странице и предложит набор шрифтов для использования в качестве запасного варианта.
Пара шрифтов
Google Font это одна из самых популярных библиотек веб-шрифтов, которая используется миллионами и содержит более 500 семейств шрифтов. Font Pair – это набор парных шрифтов Google, в которых можно легко найти различные комбинации семейств шрифтов и шрифтов. Font Pair делает выбор сочетания шрифтов немного менее сложным.
TypeSettings
TypeSettings – это набор правил CSS, которые определяют правильное масштабирование шрифта, вертикальный ритм и отзывчивое отношение типографики. TypeSettings поставляется в Sass и Stylus, что позволяет гибко удовлетворить потребности вашего проекта путем настройки переменных.
паспортная табличка
Типовая табличка, вероятно, является одним из наиболее полных стартовых наборов для настройки типографики. Типовая табличка поставляется с несколькими базовыми типографскими стилями, которые учитывают масштабирование, цвета, небольшой капитал, буквицу, отступы, переносы, блок-цитаты, кодовые блоки и многое другое.
Теперь читайте: витрина веб-дизайна с красивой типографикой