Понимание книгопечатания 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

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

CSS Type Set

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

листать типично

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

Типографская сетка

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

WhatTheFont!

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

Калькулятор базовой линии / высоты линии

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