5 спосабаў вы можаце палепшыць вашу тыпаграфію

Тып - гэта асноўная частка кожнага асобнага вэб-праекта. Разборлівасць і разборлівасць, як правіла, з'яўляюцца неад'емнай часткай працы карыстальнікаў. Ведаючы, як працаваць з тэкстам, можна павялічыць канверсію, працягласць кожнай сесіі і ваш сайт для людзей больш каштоўны.

Што такое тэкст?

Літары, словы, прапановы, абзацы. Тэкст як размова - гэта спосаб данесці ідэі да людзей. Ён змяшчае інфарматыўныя і канкрэтныя паведамленні, якія можна прачытаць. Калі вы пішаце для людзей у Інтэрнэце, людзі павінны разумець, пра што вы кажаце.

Як велізарны прыхільнік мыслення Элен Люптан, я мушу цытаваць аўтара і сказаць: "У друкарні" тэкст "- гэта суцэльная паслядоўнасць слоў, якая адрозніваецца ад кароткіх загалоўкаў і субтытраў".

Добрая друкарня павінна даць карыстальнікам просты спосаб даведацца, што яны шукаюць. Пры чытанні тэкстаў вы павінны адчуваць сябе камфортна і прадуктыўна. Такім чынам, вы павінны перадаваць свае ідэі як мага больш эфектыўна. Дрэнная тыпаграфія сарве і адцягне вас, вы будзеце адчуваць сябе расчараванымі і не будзеце чытаць далей.

У гэтым артыкуле я дам вам некалькі парад, як палепшыць вашу тыпаграфію ў Інтэрнэце і зрабіць тэкставае змесціва больш чытаным і чытэльным. Такім чынам, пачнем.

Памер шрыфта

Некалькі гадоў таму для цела тэксту прынята было выкарыстоўваць 10 ці 12 пікселяў. У цяперашні час мы выкарыстоўваем FHD або UHD дысплеі, таму нам таксама трэба павялічыць памер шрыфта. Выкарыстанне вялікага стандартнага памеру шрыфта павышае разборлівасць тэкставага змесціва. Аптымальна мець шрыфт ад 16 да 22 пікселяў для вашага цела (ці ) для паляпшэння чытальнасці вашага змесціва. Пры распрацоўцы спагаднага сайта для меншых памераў экрана вы можаце паменшыць тэкст па змаўчанні да 14 да 18 пікселяў.

Гэтыя памеры таксама мінімальныя, калі гаворка ідзе пра дызайн для людзей з парушэннямі зроку (людзей, якія носяць акуляры альбо толькі для пажылых людзей).

Аптымальны памер тэксту цела складае ад 16 да 22 пікселяў, каб палепшыць чытанне тэкставага змесціва.

Аднак не забывайце, што ваш аптымальны памер шрыфта заўсёды залежыць ад абранага шрыфта для вашага вэб-праекта. Тут, на малюнку ніжэй, вы можаце ўбачыць розніцу паміж вышынёй х (адлегласць паміж базавай лініяй тэкставага радка і вяршынямі галоўнай часткі малых літар) Гельветыкі Нойе і Футуры.

Вы бачыце розніцу паміж Helvetica Neue і Futura ў тых жа памерах.

Адрэзак ліній таксама вядомы як вышыня лініі

Ён таксама вядомы як лідар у друку. Для аддзялення асобных ліній яны выкарыстоўвалі металічныя палоскі.

Пры праектаванні ў Інтэрнэце вы павінны выкарыстоўваць па меншай меры ў 1,5 раза большы памер тэксту цела для вышыні радка. Гэта з'яўляецца аптымальным і рэкамендуецца выкарыстоўваць 1,1 або 1,2 разы паміж радкамі для сваіх загалоўкаў.

Вы павінны выкарыстоўваць вышыню радка, якая не менш як у 1,5 раза перавышае памер вашага тэксту.

Што гэта значыць? На практыцы з памерам шрыфта 16 пікселяў для вашага зместу цела вышыня лініі павінна складаць каля 24 пікселяў (як вы можаце бачыць у наступным прыкладзе).

Але часам, калі вы хочаце зрабіць свае тэксты больш вытанчанымі і працаваць толькі з больш кароткімі абзацамі, вы можаце трохі павялічыць вышыню радка.

Вы ўбачыце Актыўны Гротэск з вышынёй радка 1,5 кратнага тэксту.

Даўжыня лініі

Людзі не чытаюць вялікіх блокаў тэксту ў Інтэрнэце. Сканаваць доўгія радкі ім сапраўды нязручна і цяжка. Важна, каб людзі падчас чытання не рухаліся пастаянна ўздоўж радка тэксту, а змешвалі кароткія, хуткія руху (вядомыя як саккады) з кароткімі прыпынкамі (фіксацыямі) - пра гэта распавёў французскі афтальмолаг Луі Эміль Джавал.

Людзі не чытаюць бесперапынна па лініі тэксту падчас чытання, але робяць кароткія, хуткія руху, змешаныя з кароткімі прыпынкамі.

Такім чынам, даўжыня радка павінна быць абмежаваная, а аптымальная колькасць знакаў у радку павінна складаць ад 60 да 80, каб дасягнуць станоўчага карыстацкага досведу для чытачоў. Пры распрацоўцы спагадных сайтаў вам трэба ўсталяваць даўжыню радка для меншага памеру экрана. Для мабільных прылад вы павінны выкарыстоўваць ад 30 да 40 знакаў у радку.

Лініі даўжынёй больш за 80 таксама з'яўляюцца вялікай праблемай для людзей з дыслексіяй.

На малюнку вы бачыце розніцу паміж аптымальнымі і занадта шырокімі лініямі.

Кантраст

Кантраст важны з пункту гледжання зручнасці карыстальнікаў, але таксама ўплывае на разборлівасць і разборлівасць.

Недастатковы тэкст, наадварот, цяжэй чытаць, а выдаленне з сайта не проста пекла для людзей з парушэннямі зроку. Гэта можа паменшыць колькасць канверсій і сярэдні час сеансу, альбо выклікаць каэфіцыент адмоваў.

У наш час у трэндзе выкарыстоўваецца шэры тэкст на белым фоне. Аднак не важна, ці змогуць карыстальнікі з камфортным чытаннем вашага змесціва. Людзі чытаюць больш павольна, калі кантраст не з'яўляецца аптымальным. Вам не трэба расшыфроўваць слова, вы можаце прапускаць важную інфармацыю ў тэксце, вам не трэба выяўляць спасылкі, інакш можа быць складана проста сканаваць кантэнт - нават калі вы чытаеце на мабільных прыладах, знаходзячыся на сонцы.

Кантэнт і кантэкст фону павінны быць выраўнаваны ў адпаведнасці з правілам 4,5: 1.

З пункту гледжання даступнасці, кантэкст і фонавы кантраст павінны кантралявацца ў адпаведнасці з правілам 4,5: 1, якое таксама дапамагае карыстальнікам з парушэннямі зроку, такімі як парушэнне зроку або каляровай слепаты, правільна чытаць змесціва на экране. Але стварыць аптымальны кантраст часта складаней і справа не толькі ў колерах. Напрыклад, для людзей з каляровай слепатай праблема бачыць гіпертэкставыя спасылкі, і вы павінны падкрэсліць іх (гэта таксама выдатнае рашэнне для людзей са слепатай).

Кантраст не толькі ў колерах. У людзей з парушэннямі зроку могуць узнікнуць праблемы пры пошуку гіпертэкставых спасылак, калі яны не падкрэслены.

Вертыкальны рытм

Людзі ў Інтэрнэце не чытаюць цэлых блокаў тэксту. Вы проста скануеце змест і шукаеце важную інфармацыю. З вертыкальным рытмам гэта прасцей. Для карыстальнікаў сканаванне зручней, чым чытанне ў Інтэрнэце. Мы выкарыстоўваем вертыкальны рытм, каб падтрымліваць усе вертыкальныя адлегласці паміж элементамі (загалоўкі, абзацы, подпісы ці нават выявы). Мы таксама выкарыстоўваем вертыкальны рытм, каб палегчыць карыстачу пошук важных здымкаў. На гэтым сайце вы можаце мець больш спакойны і пазітыўны досвед.

Але як працуе вертыкальны рытм?

Вы, напэўна, чулі пра Baseline - у дызайне друку вельмі важна, каб базавая лінія была нябачнай лініяй, у якой знаходзяцца ўсе персанажы. Мы таксама выкарыстоўваем гэты тэрмін у вэб-дызайне, але гэта крыху інакш. У вобласці вэб-дызайну базавая лінія вызначаецца вышынёй радка (вышыня радка таксама ўласцівасцю CSS) тэксту цела.

Калі вы вызначыце базавую лінію і створыце ўласную сетку, вам трэба пачаць з памеру тэксту ( ) і вызначце кратнае для вышыні радка (уласцівасць для вышыні радка ў CSS), а потым усё змяніце.

Як вы можаце бачыць на малюнку ніжэй, я выкарыстоўваю 16px памер шрыфта для тэксту цела і вышыню радка 24px. Гэта азначае, што 24px - гэта базавая лінія для мяне (я падзяліўся раней, каб лепш кіраваць і наладзіць усе шрыфты, звязаныя з маёй базавай лініяй) на гэты нумар на 2, 3 альбо пераважна на 4, каб мець больш кіраўніцтва на маім экране). Зыходзячы з гэтага вызначэння, усе прабелы (уключаючы кадры, прабелы або межы) павінны быць шматразовымі або дзеляцца на 6 пікс. Каб стварыць візуальную ўзгодненасць паміж абзацамі і загалоўкамі, я вырашыў стварыць прабелы ў выглядзе кратных лікаў 6 - і, нарэшце, я выкарыстаў 24 або 36 пікселяў. Мае памеры шрыфта і вышыня радкоў таксама кратныя 6 пікс.

Тут вы бачыце, як вертыкальны рытм павінен працаваць у вашых дызайнах.

Некалькі слоў як выснова

Друкарня з'яўляецца неад'емнай часткай вэб-дызайну, і калі вы прымаеце правільныя рашэнні, ваш тэкст можна чытаць, разборлівым і зразумелым. Карыстальнік мае станоўчы карыстацкі досвед чытання тэкставага змесціва і прагляду вашага сайта. Больш канверсій азначае вялікую прыбытак. Яны таксама лічаць ваш сайт больш каштоўным. Проста скарыстайцеся гэтымі некалькімі парадамі і павялічце даступнасць і сярэдні час сесіі.