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