15 полезных веб-типографских инструментов, библиотек и структур
Работа с типографикой в Интернете была очень странной. Каждый браузер имеет свой алгоритм рендеринга шрифтов что может привести к неожиданным расхождениям. Есть только несколько свойств CSS, которые вы можете использовать, чтобы иметь некоторый контроль над шрифтами, такие как кернинг шрифтов, сглаживание шрифтов, создание DropCaps и т. Д. Кроме того, нам приходится иметь дело со многими проблемами макета, когда речь идет о шрифтах..
Хорошей новостью является то, что есть ресурсы, которые вы можете использовать, чтобы взять на себя управление, когда дело доходит до типографии сайта. Вот 15 веб-инструментов, библиотек и фреймворков Вы можете использовать для этого.
Больше на Hongkiat:
- 9 плагинов WordPress, чтобы сделать больше со своими шрифтами
- 20 лучших плагинов для типографики WordPress для улучшения читабельности
- Улучшенные и четкие значки пользовательского интерфейса с веб-шрифтами
TypeRendering
В двух словах, TypeRendering работает аналогично Modernizr, за исключением того, что он идентифицирует только движок браузера для рендеринга шрифтов. Эта библиотека добавляет пользовательские классы на основе своих открытий, которые можно использовать для применения определенных правил стиля для рендеринга типов..
KerningJS
Кернинг пока не настраивается для использования в сети - шрифт-кернинга поддержка все еще слабая, но на нашем пути появляется новая стандартная собственность. 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, которая добавляет линия класс в каждой строке вашего абзаца. Это позволяет вам стилизовать линию отдельно. Это имитирует идею :: п-й строки (), :: п-й последней строки () а также ::Последняя линия псевдоклассы, которых еще нет в CSS. Вот пример того, как мы стилизуем первую строку абзаца с помощью LiningJS:
p .line [first] font-weight: 600; преобразование текста: заглавные буквы;
Кроме того, LiningJS также поддерживает китайский поток абзацев.
UnderlineJS
UnderlineJS библиотека JavaScript, которая делает текст подчеркнутым Посмотрите демоверсию, чтобы понять, что я имею в виду, обязательно наведите курсор мыши на линии. Сравните демонстрацию с выводом подчеркивания текущего CSS текст-отделка стандарт, и вы, вероятно, тоже являетесь поклонником underlineJS.
FlowType
Этот плагин будет динамически корректировать размер шрифта на основе определенной ширины оболочки. FlowType помогает вам применять идеальное количество символов в строке на любой ширине экрана. Библиотека поставляется с опциями, в которых можно установить минимальную / максимальную ширину экрана, минимальный / максимальный размер шрифта и соотношение шрифтов.
HatchShow
HatchShow расширяет размер шрифта, чтобы заполнить всю ширину его контейнера. Плагин работает из коробки с алгоритмом; в двух словах, он измеряет ширину контейнера и длину символа шрифта и добавляет правильный размер шрифта.
GridLover
GridLover это отличный инструмент для генерации основных стилей для оформления шрифтов (размер, высота строки и поля) с помощью простого пользовательского интерфейса слайдера. Он генерирует стили в SCSS, LESS и Stylus, поэтому вы можете сразу же включить их в свой проект независимо от того, какой CSS-препроцессор вы используете.
TypeScale
TypeScale это онлайн-инструмент, который поможет вам легко определить правильный размер шрифта для вашего сайта. Инструмент предоставляет простой интуитивно понятный графический интерфейс для вставки базового размера шрифта, масштаба и семейства шрифтов, которые вы хотите использовать. Результаты будут визуализированы для вас, так что вы можете поиграть с шкалой, чтобы получить только правильное значение. Просто возьмите CSS, как только вы закончите.
Модульная шкала
Модульная шкала это инструмент для генерации идеального масштабирования шрифта для текста тела и заголовка. Он выводит в Sass, который должен использоваться вместе с его библиотекой Sass. Вы также можете использовать JavaScript .
Шрифт к ширине
Ширина шрифта (FTW) библиотека Javascript, которая подгоняет шрифт к своему контейнеру ширины Он определит размер шрифта вместе со словом, необходимым для шрифта. Если вы хотите сделать красивый заголовок, это библиотека, которую вы можете попробовать.
FFFFallback
FFFFallback, удобный инструмент, который позволяет вам найти лучший стек шрифтов, который будет грациозно ухудшаться. Инструмент поставляется в виде букмарклета, который проанализирует семейство шрифтов на вашей странице и предложит набор шрифтов для использования в качестве запасного варианта..
Пара шрифтов
Google Font - одна из самых популярных библиотек веб-шрифтов, используемая миллионами, и в ней размещено более 500 семейств шрифтов.. Пара шрифтов представляет собой набор парных Google Fonts, где вы можете легко найти различные комбинации семейств шрифтов и шрифтов. Font Pair делает выбор сочетания шрифтов чуть менее сложным.
TypeSettings
TypeSettings представляет собой набор правил CSS, определяющих правильное масштабирование шрифта, вертикальный ритм и отзывчивое соотношение типографики. TypeSettings поставляется в Sass и Stylus, что позволяет гибко удовлетворить потребности вашего проекта путем настройки переменных.
паспортная табличка
паспортная табличка вероятно, один из самых полных стартовых наборов для настройки типографики. Типовая табличка поставляется с несколькими базовыми типографскими стилями, которые учитывают масштабирование, цвета, небольшой капитал, буквицу, отступы, переносы, блок-цитаты, кодовые блоки и многое другое.
Теперь читайте: витрина веб-дизайна с красивой типографикой
