ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Типография

Текстът в Интернет. От Евгени Динев.

Удобство на четене

Характеристики на шрифта
  • Терминология

    • Семейство - съвкупност от шрифтове, обединени под общи признаци (font-family);

    Начертание - комплект символи от дадена гарнитура, които се различават по цветова наситеност, пропорции, контраст и наклон (typeface);

    Тежест - определя се от дебелината на основните и съединителни контури в различни начертания;

    Пропорции - показател за промяна на ширината;

    Контраст - отношение на дебелината на съединителните контури към дебелината на основните контури;

  • Класификация

    • Всички шрифтове могат да се класифицират в три основни групи - серифни (serif), безсерифни (sans-serif) и шрифтове свободен стил (декоративни, ръкописни и т.н.).

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

    Изисквания и фактори за удобочетимост

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

    Garamond–Light, Garamond–Iitalic, Garamond–Condensed…

    Скоростта зависи от анатомията на буквите. Шрифтът написан с главни букви (А, Б, В…) се чете 12 пъти по-бавно от шрифта написан с малки букви (а, б, в…). Курсивният шрифт (а, б, в…) се чете също толкова добре както нормалния, но само в “среден по дължина” текст.

    Буквите трябва да са достатъчно контрастни и тъмни на бял или слабо наситен сив фон. Всички други варианти от гледна точка на удобочетимостта са губещи.

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

    Големината на шрифта (кегел) зависи от типа на текста. Най-разпространен е вариантът от 12-14px. Дребният текст (9-10px) ще бъде прочетен тогава, когато не е обемист и се намира във фокуса на вниманието.

    Пробели (бели полета)

    Ще изясня общите изисквания:

  • Абзац (Paragraph) — Определя темпа на четене. Разстоянието, което отделя абзаците един от друг, по подразбиране е 1em (16px). Увеличаването на това разстояние създава впечатление, че абзацът е самостоятелна единица;
    • CSS - p {margin:1em}
  • Отстъп (Text Indent) — Разстоянието в началото на първия ред в абзаца;
    • CSS - text-indent {}
  • Междуредов пробел (Leading) — Разстоянието между базовите линии в два съседни реда. Междуредовото разстояние е приблизително 120% от използвания кегел на шрифта. Заглавията и дребния текст се четат по-добре ако leading-ът е около100–110%;
    • CSS - line-height {}
  • Tracking и Kerning — Тези функции определят разстояниятя между думите и разстояниятя между буквите. Оставяме ги със стойности по подразбиране.
    • CSS - letter-spacing {} word-spacing {}

    Подравняване

    Както знаем от любимия MS Word, съществуват четири вида подравняване на текста: ляво, дясно, централно и двустранно.

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

    • Текстът като част от уеб дизайна

    Основни знания за шрифтовете в интернет

    За по-голяма яснота, най-напред ще отделя стандартните разбирания за функциите на шрифта използвани в интернет от тези в предпечата:

  • Размер (кегел) — Приблизителната разделителна способност на един 17" монитор при резолюция 1024х768px е 96dpi. В офсетовия печат стандартната разделителна способност е 2400dpi. Измервателната единица е пункт (1pt=0,352mm). При компютрите пикселът е най-малкият размер, който може да бъде изобразен на екрана. В интернет приложенията се препоръчва кегелът да се задава в проценти:

    • 16px = 12pt = 100%

  • Семейство шрифтове (font family) — Типографското разнообразие в интернет не е голямо. То се ограничава с наличието на разпространените стандартни шрифтове. Благодарение на политиката на Microsoft, съществува неголям набор от TrueType шрифтове, наречени “Core Fonts for Web”, които са безплатни и са достъпни за масовата интернет аудитория. Това са:

    • Core Fonts for Web

    Те са оптимизирани за нискоекранна резолюция и са предназначени специално за използване в WEB. Освен тях популярни са:

    Интернет шрифтове

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

    Какво може и какво не шрифтът в web

    Поради ниската си екранна резолюция, мониторът не е в състояние да изобразява твърде малки детайли. Ако на хартия може да се напечата текст от порядъка на 1–2pt, то на един стандартен дисплей минимумът е 7–8pt.

    За четлив се смята шрифтът, не по-малък от 9px (минимум), в най-добрия случай той трябва да е безсерифен, поради отсъствието на допълнителни елементи (засечки).

    Шрифтовете с кегел над 17px (удебелени - наклонени) използват функцията Anti-Alias за заглаждане на контурите (italic bold). Шрифтът ще изгуби уникалността на начертанията си, ако намалим кегела под допустимия размер на мащабиране (italic bold).

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

    В сравнение със списанията, които използват множество цветови съчетания между текст и фон, компютрите са много по-напред със своите True Colors (24bit).

    В най-добрия случай четири цвята са напълно достатъчни за различните елементи в една web страница.

    Естетика и още нещо

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

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

    Несерифни шрифтове

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

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

    Серифни шрифтове

    Courier е монохромен шрифт, всички негови символи имат една и съща ширина, поради което е удобен за дефиниции на отделни думи в текста; Georgia е визуално красив и приятен шрифт, той подхожда повече за дълъг текст. Неговите букви са закръглени и широки, което допринася за лесното му възприемане; Times New Roman е шрифтът, който се среща най-често, както в книгите, така и в интернет. Той гарантирано има ефект въху дълги и къси пасажи, в заглавия, цифри и др.

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

    Текстови блокове

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

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

    Текстът се възприема най-добре, когато не надвишава 60–90 символа на ред. Могат да се използват няколко варианта: задаване на оптимален стационарен размер на тектовия блок или задаване на процентно отношение, което да е с възможност за увеличаване или намаляване до определен минимален размер. Вариантът, в който е включено използването на хоризонталния scroll, не е за предпочитане.

    Има и други варианти. Можем да използваме колони (но не повече от три) с фиксиран или динамично променящ се размер или да ограничим една - две от тях до 20–30 символа на ред, ако текстът е предназначен за бърз преглед (новини, коментари, бележки и др.)

    Разпределяне на текста в колони, според неговата важност

    Проблемът при дългия по обем текст е, че се увеличава вертикалната дължина на страницата, което е свързано с две ограничения: (1) Превъртане на вертикалния scroll; (2) превишаване на оптималния размер на страницата - 30KB. Има един изход - разпределяне на съдържанието в отделни страници. Това решение не е идеално, защото откъсва читателя от основната тема, като изисква от него допълнителни действия. Неудобство в случая е и изчакването на повторно зареждане на съдържанието.

    Гъвкавост

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

    Шрифт и графика

    Заглавията и навигацията, които са приоритет на текста, са почти напълно отнети от графиката.

    В много случаи използването на стандартни шрифтове не може да задоволи изискванията към дизайна, що се касае до изписването на къси фрази или заглавия, които да изглеждат както е преценил авторът:

    Това е работилницата
    на Евгени Динев
    текст Verdana 10px графика

    Текстът и графиките могат да бъдат съчетани заедно:

    Предимството на графиката в този случай е, че лесно може да се постигне желания резултат, докато при използването на стандартни шрифтове не винаги може да ни се удаде това.

    Забележете, че ако се опитате да създадете прекалено малък шрифт, не винаги ще получите желания резултат:

    От примера се разбира следното — шрифт 1 е нарисуван, шрифт 2 е Lozen с изключен Anti-Alias, шрифт 3 също е Lozen, но с включен Anti-Alias.

    Ясно е, че за да бъде четим дребения шрифт е по-добре той да се нарисува на ръка. Разликата се състои в това, че конструкцията на TrueType и PostScript шрифтовете е векторна, което значи, че те могат да бъдат мащабирани в големи граници, като запазват максимално идентичността си, а стандартния екран, който е с резолюция 72dpi не може да отрази точно прекалено малките мащаби.

    Забележете, че качествените списания използват резолюция над 2400dpi, където е възможно използването дори на микроскопични шрифтове.