Розуміння типографіки 10 Корисні інструменти та ресурси
У своїй останній статті на тему "Розуміння типографіки" я писав про те, що входить до дизайну типографіки і як маніпулювати нею, щоб покращити макет вашого веб-сайту та покращити досвід користувачів. У цій статті я перераховую 10 моїх улюблених інструментів для типографіки в Інтернеті.
Вони можуть допомогти з побудовою HTML-мереж і областей вмісту, створенням стилів CSS, створенням назв шрифтів і набором інших цікавих матеріалів. Перегляньте деякі з наведених нижче посилань і не забудьте повідомити нам свої думки в поштовій дискусійній області.
Рекомендоване читання: Розуміння типографіки: написання для Інтернету
Матриця шрифтів
Цей онлайновий довідник було опубліковано в блозі 24-часового дизайну Він містить матричну таблицю всіх стандартних веб-шрифтів, які ви знайдете за замовчуванням у різних постачальників програмного забезпечення. Популярні назви включають програми Windows, Mac OS X, Microsoft Office та програми Adobe Creative Suite.
Перевірка контрастності кольору
Колірний контраст часто є проблемою, коли ви виходите за межі стандартної чорно-білої моделі. Коли ви знайдете відповідність, він відчуває себе як досконалість дизайну. Тим не менш, поганий колірний комбо-вибір виглядає дуже погано і негативно вплине на загальний дизайн. Цей невеликий веб-інструмент допоможе вам підібрати набір кольорів для відповідності один одному для будь-якого стилю.
HTML-Ipsum
Вам потрібна програма Lorem Ipsum, яка може робити більше, ніж просто виводити текст? Цей онлайн-генератор HTML створить кодові блоки для найбільш поширених елементів сторінки. Деякі приклади включають невпорядковані списки, списки визначень, веб-форми, таблиці та багато інших рішень.
Типкарт
Typechart є одним з моїх улюблених інструментів розробника CSS. Я часто шукаю відповідність певного шрифту в моїй системі веб-проекту, але я просто не маю часу перегортати всю свою колекцію. Цей чудовий інструмент дозволяє просіювати популярні варіанти сімей шрифтів і навіть завантажувати відповідний код CSS!
PX-to-EM.com
Якщо ви не скинуте розмір тексту браузера за умовчанням, ви, ймовірно, матимете справу з відповідними повідомленнями з пікселями. Ця програма в браузері забезпечує таблицю перетворення та інтерфейс користувача для px до em. Це дуже простий інструмент для впевненості, але він пропонує зручне керівництво з дійсно простими функціональними можливостями - і ви не можете перемогти безкоштовний цінник.
Набір типів CSS
Я не рекомендую стирчати з CSS Type Set занадто довго, оскільки це дійсно інструмент для початківців. Вона дозволяє генерувати код CSS на основі певних властивостей шрифту, які ви вибираєте. В той час, як дуже корисний спочатку, з часом це стає опорою до опори. І ви не зможете мотивувати власноруч керувати властивостями CSS. Але якщо вам потрібно заощадити час на проекті, цей інструмент не можна забувати.
flipping типовий
Ось один дійсно унікальний приклад бібліотеки попереднього перегляду шрифтів. Типовий перегортання включає декілька шрифтів, які є рідними для вашої операційної системи. Він автоматично сканує каталог шрифтів, щоб підібрати найбільш безпечні веб-рішення. Ви можете порівняти їх пліч-о-пліч і легко вибирати між улюбленими параметрами. Це ще одна велика заощадження часу, яку ви робите в закладки і не думайте про це до останньої хвилини.
Друкарська сітка
Існує багато розмов про проектування навколо сітки в HTML і CSS. Ви, напевно, розумієте концепцію роботи мереж, а вимірювання веб-сайту в пікселях не відрізняється. Цей навчальний посібник CSS-Tricks більше схожий на керовані зусилля для введення основ типографіки для цифрової ери. Це набагато більш просунута тема в області веб-дизайну. Але якщо у вас є терпіння, я рекомендую переглядати деталі, щоб побачити, як ці властивості сітки можуть вплинути на макет сторінки.
WhatTheFont!
Ми всі знайшли логотип або зображення з деякими дійсно прохолодними неідентифікованими шрифтами. WhatTheFont зробив раундів в Інтернеті протягом декількох років, і це все ще мій фаворит. Ви вибираєте зображення для завантаження, а їхній сценарій буде аналізувати текст у зображенні, щоб відповідати подібним шрифтам. Додаток буде навіть пов'язати вас з зовнішніми продуктами, де ви можете придбати кожен шрифт у зручність.
Калькулятор базової / лінійної висоти
Нарешті, дійсно потужний інструмент для створення властивостей висоти рядків і ритму. Просто введіть значення для основного розміру шрифту та висоти рядка, або вкажіть свій власний код CSS на стороні. Додаток буде генерувати попередній перегляд у декількох різних стилях, так що ви можете отримати уявлення про те, як ці властивості будуть виглядати на вашому власному веб-сайті.
