Понимание типографии: 10 полезных инструментов и ресурсов

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

Они могут помочь в создании HTML-сеток и областей содержимого, создании стилей CSS, создании имен шрифтов и других интересных вещей. Проверьте некоторые ссылки ниже и обязательно сообщите нам свои мысли в области пост-обсуждения.

Рекомендуемое Чтение: Понимание Типографии: Письмо Для Сети
Матрица шрифтов
Это онлайн-руководство было опубликовано в блоге дизайна 24ways. Он содержит матричную таблицу всех стандартных веб-шрифтов, которые вы по умолчанию найдете у разных поставщиков программного обеспечения. Популярные названия включают программы Windows, Mac OS X, Microsoft Office и Adobe Creative Suite.

Проверка цветовой контрастности
Цветовой контраст часто является проблемой, когда вы выходите за рамки стандартной черно-белой модели. Когда вы находите совпадение, вы чувствуете, как совершенство дизайна. Тем не менее, плохой выбор цвета выглядит очень плохо и отрицательно повлияет на общий дизайн. Этот небольшой веб-инструмент может помочь вам выбрать набор цветов, которые соответствуют друг другу для любого стиля макета.

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

Typechart
Typechart – один из моих любимых инструментов в качестве разработчика CSS. Я часто ищу соответствие конкретного шрифта в моей системе веб-проекту, но у меня просто нет времени пролистать всю мою коллекцию. Этот удивительный инструмент позволяет вам выбирать популярные семейства шрифтов и даже загружать соответствующий код CSS!

PX-to-EM.com
Если вы не сбросите размер текста в браузере по умолчанию, у вас, скорее всего, будут проблемы с совпадением пикселей с пикселями. Это приложение в браузере предоставляет как таблицу преобразования, так и пользовательский интерфейс для px в em. Конечно, это очень простой инструмент, но он предлагает удобное руководство с очень простой функциональностью – и вы не можете побить бесплатный ценник.

CSS Type Set
Я не рекомендую придерживаться CSS Type Set слишком долго, поскольку это действительно инструмент для начинающих. Это позволяет вам генерировать код CSS на основе выбранных вами свойств шрифта. Поначалу это очень полезно, но со временем становится опорой. И вы не сможете мотивировать самостоятельно освоить свойства CSS. Но если вам нужно сэкономить время на проекте, этот инструмент нельзя упустить.

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

Типографская сетка
Существует много разговоров о проектировании вокруг сетки в HTML и CSS. Вы, вероятно, понимаете концепцию работы сеток, и измерение веб-сайта в пикселях ничем не отличается. Это учебное пособие по сетке от CSS-Tricks больше похоже на руководство по ознакомлению с основами типографии для цифровой эпохи. Это гораздо более сложная тема в области веб-дизайна. Но если у вас есть терпение, я рекомендую пройтись по деталям, чтобы увидеть, как эти свойства сетки могут реально повлиять на макет вашей страницы.

WhatTheFont!
Мы все нашли логотип или изображение с действительно классным неопознаваемым шрифтом. WhatTheFont обходил Интернет несколько лет, и он до сих пор мой любимый. Вы выбираете изображение для загрузки, и его скрипт будет анализировать текст на картинке, чтобы подобрать любые похожие шрифты. Приложение даже свяжет вас с внешними продуктами, где вы можете приобрести каждый шрифт по своему усмотрению.

Калькулятор базовой линии / высоты линии
Наконец, действительно мощный инструмент для генерации высоты строки и свойств ритма. Просто введите значения для основного размера шрифта и высоты строки или добавьте свой собственный CSS-код в сторону. Приложение будет генерировать превью в нескольких разных стилях, чтобы вы могли понять, как эти свойства будут выглядеть на вашем собственном сайте.