Разбиране на типографията 10 Полезни инструменти и ресурси

В последната ми статия за „Разбиране на типографията“ писах за това, което влиза в дизайна на типографията и как да я манипулирам, за да подобря оформлението на уебсайта ви и да подобри потребителския опит. В тази статия аз съм в списъка 10 от любимите ми инструменти за типография в мрежата.

Те могат да помогнат за изграждането на HTML мрежи и области със съдържание, създаване на CSS стилове, генериране на имена на шрифтове и куп други интересни неща. Разгледайте някои от връзките по-долу и не забравяйте да ни уведомите за мислите си в областта за след дискусии.

Препоръчително четене: Разбиране на типографията: писане за мрежата

Матрица на шрифта

Този онлайн наръчник беше публикуван от блога за 24-часовия дизайн. Той разполага с матрична таблица на всички стандартни уеб шрифтове, които ще намерите по подразбиране от различни доставчици на софтуер. Популярните заглавия включват 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

Не препоръчвам да се придържам към CSS Type Set твърде дълго, тъй като това е наистина инструмент за начинаещи. Тя ви позволява да генерирате CSS код въз основа на специфични свойства на шрифта, които избирате. Макар че е много полезна в началото, с течение на времето тя се превръща в патерица. И няма да можете да мотивирате сами да овладеете CSS свойствата. Но ако трябва да спестите време за даден проект, този инструмент не може да бъде пренебрегнат.

обръщане типично

Ето един наистина уникален пример за библиотека за преглед на шрифтове. обръщане типично включва шепа шрифтове, които са местни за вашата операционна система. Той автоматично сканира директорията с шрифтове, за да вземе най-безопасни за уеб решения. Можете да ги сравнявате рамо до рамо и лесно да избирате между любимите си опции. Това е още една страхотна спестителка, която запазвате и не мислите до последната минута.

Типографска мрежа

Много се говори за проектирането около мрежата в HTML и CSS. Най-вероятно разбирате концепцията за това как работят мрежите и измерването на уебсайт в пиксели не се различава. Този урок от CSS-Tricks е по-скоро насочен към въвеждане на основите на типографията за цифровата ера. Това е много по-сложна тема в сферата на уеб дизайна. Но ако имате някакво търпение, препоръчвам да прегледате подробностите, за да видите как тези свойства на решетката могат действително да повлияят на оформлението на страницата.

WhatTheFont!

Всички сме намерили лого или изображение с някакъв наистина готин уникален шрифт. WhatTheFont е направила кръгове в интернет за няколко години и тя все още е моя любима. Вие избирате изображение за качване и техният скрипт ще анализира текста в картината, за да съответства на подобни подобни шрифтове. Приложението дори ще ви свърже с външни продукти, където можете да закупите всеки шрифт, когато ви е удобно.

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

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