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