5 начина как да подобрите вашата уеб типография

Типът е основна част от всеки отделен уеб проект. Четливостта и четимостта са съществена част от потребителския опит като цяло. Ако знаете как да работите с тип, можете да увеличите конверсията, продължителността на всяка сесия и уебсайтът ви ще бъде по-ценен за хората.

Но първо, какво е текст?

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

Като голям фен на Мисленето с тип от Елън Луптън, трябва да цитирам автора и да кажа: „В типографията„ текстът “се определя като непрекъсната последователност от думи, различаващи се от по-къси заглавия или надписи.“

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

В тази статия ще ви кажа няколко съвета как да подобрите вашата уеб типография и да направите текстовото си съдържание по-четливо и четимо. Така че нека започнем.

Размер на шрифта

Преди няколко години беше обичайно да се използва 10 или 12px размер за текста на тялото. В наши дни използваме FHD или UHD дисплеи, така че трябва да увеличим и размера на шрифта. Използването на голям шрифт по подразбиране ще увеличи четливостта на текстовото ви съдържание. Оптимално е да използвате от 16 до 22px размер на шрифта за вашето тяло (или

), за да направите съдържанието си лесно за четене. Тогава, когато проектирате отзивчив сайт за по-малки размери на екрана, можете да намалите мащаба на текста по подразбиране до размери от 14 до 18 пиксела.

Тези размери са минимални, докато се проектират и за хора със зрителни увреждания (тези, които носят очила или само възрастни хора).

Оптималният размер на текста на тялото е от 16 до 22 пиксела, за да се увеличи четливостта на текстовото ви съдържание.

Но не забравяйте, че вашият оптимален размер на шрифта винаги зависи от шрифта, който сте избрали за вашия уеб проект. Тук на изображението по-долу можете да видите разлика между x-височина (разстоянието между основната линия на типа и върховете на основното тяло на малки букви) на Helvetica Neue и Futura.

Можете да видите разлика между Helvetica Neue и Futura в еднакви размери.

Разстоянието между линиите също е добре известно като височина на линията

При печат, той също се нарича водещ, те са използвали метални ленти за отделяне на отделни линии.

Докато проектирате за уеб, трябва да използвате поне 1,5 кратно от размера на текста на тялото си за височината на линията си и е оптимално и препоръчително да използвате около 1,1 или 1,2 кратни като интервал между редовете за заглавията си.

Трябва да използвате височина на линията най-малко 1,5 кратна от размера на текста на тялото.

Какво означава? На практика, когато използвате 16px шрифт за съдържанието на тялото си, височината на линията ви трябва да е около 24px (както можете да видите по-долу).

Но понякога, когато искате да направите текстовете си по-елегантни и работите само с по-кратък абзац, можете малко да увеличите височината на реда.

Можете да видите Aktiv Grotesk с височина на реда на размер 1,5 кратна на текста на тялото.

Дължина на линията

В мрежата хората няма да четат широки блокове текст. За тях наистина е неудобно и трудно да сканират дълги линии. Важното, което трябва да забележа, е, че хората не се движат непрекъснато по ред текст, докато четат, а правят кратки, бързи движения (добре известни като сакади), премесени с кратки спирки (фиксации) - това беше описано от френския офталмолог Луи Емиле Джавал.

Хората не се движат непрекъснато по реда на текста, докато четат, но правят кратки, бързи движения, преплетени с кратки спирки.

Така че дължината на реда трябва да бъде ограничена и оптималният брой знаци на ред е от 60 до 80, за да се направи положително потребителско изживяване за читателите. Когато проектирате отзивчиви сайтове, трябва да коригирате дължината на реда към по-малки размери на екрана - за мобилни устройства трябва да използвате от 30 до 40 знака на ред.

Линии по-дълги от 80 знака също са огромни проблеми за хората с дислексия.

На изображението можете да видите разлика между оптимални и твърде широки линии.

Контраст

Контрастът е важен от гледна точка на използваемостта, но влияе и на четливостта и четивността.

Текст, който не е достатъчно контрастен, е по-трудно да се чете, а отписването на сайта е ад, не само за хората, които имат зрителни увреждания. Това може да намали реализациите, средната продължителност на сесията или да доведе до степен на отпадане.

В днешно време тенденцията е да се използва сив текст на бял фон. Но няма значение дали потребителите не могат да четат вашето съдържание удобно. Хората четат по-бавно, когато контрастът не е оптимален. Не е нужно да дешифрират нито една дума, те могат да пропускат важна информация в текста, не трябва да откриват връзки или може да им е трудно да сканират лесно съдържанието - дори и да четат на мобилно устройство, докато се разхождат на слънце.

Контрастът на съдържанието спрямо фона трябва да се ръководи от правило 4.5: 1.

От гледна точка на достъпността контрастът между съдържанието и фона трябва да се ръководи от правило 4.5: 1, което помага и на потребители с всякакви зрителни увреждания, тъй като слабото зрение или цветната слепота четат правилно съдържанието на вашия екран. Но да се създаде оптимален контраст често е по-сложно и не става въпрос само за цветовете. Например за хора с цветна слепота е проблем да виждат хипертекстови връзки и трябва да ги подчертаете (също така е чудесно решение за хора със слепота).

Контрастът не се отнася само за цветовете, хората със зрителни увреждания могат да имат проблем да намерят хипертекстови връзки, когато не са подчертани.

Вертикален ритъм

Хората в мрежата не четат цели блокове текст. Те просто сканират съдържанието и търсят важна информация. С вертикален ритъм е по-лесно. За потребителите е по-удобно да сканират, отколкото да четат в мрежата. Използваме вертикален ритъм, за да поддържаме последователни всички вертикални пространства между елементите (заглавия, абзаци, надписи или дори изображения). Също така използваме вертикален ритъм, за да напътстваме потребителя лесно да намира важни изображения и те ще имат повече релаксиращ и положителен опит, докато използват нашия уебсайт.

Но как работи вертикалният ритъм?

Вероятно сте чували за базова линия - наистина е важно в дизайна на печат, където основната линия е невидимата линия, където седят всички знаци. Ние също използваме този термин в областта на уеб дизайна, но е малко по-различно. В областта на уеб дизайна, основната линия се определя от височината на реда (височината на линията е също свойство CSS) на основния текст.

Когато дефинирате основната си линия и създавате своя собствена решетка на основната линия, основният момент откъде да започнете е определянето на размера на текста на тялото ви (

) и неговия кратен за височината на реда (свойство на височина на линията в CSS) и след това мащаб на всичко нагоре.

Както можете да видите на изображението по-долу, използвам размер на шрифта 16px за текста на тялото и височината на линията 24px, което означава, че 24px е за мен основната линия (за по-добро ръководство и настройка на всички шрифтове към основната ми линия, използвах за разделяне това число с 2, 3 или най-вече 4, за да има повече водачи на екрана ми). Въз основа на тази дефиниция, всички пространства (включително граници, подплънки или полета) трябва да бъдат умножими или разделими на 6px. За да направя визуална съгласуваност между абзаци и заглавия, реших да създам интервали като кратни на числото 6 - и накрая използвах 24 или 36px. Размерите на шрифта ми, височините на линиите също са кратни на 6px.

Тук можете да видите как вертикалният ритъм трябва да работи във вашите дизайни.

Малко думи като заключение

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