Типография 101 – разбиране за анатомията на буквите

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

Важно нещо да се разбере е анатомията на типовете (видове) шрифтове. Ascenders, descenders и serifs (сори, някой неща просто не могат да бъдат преведени без да звучат нелепо) могат да ви звучът като сложни думички, които даже ги няма в никой език, но те са основни при разбирането на стила на различните шрифтове и как той се отнася към вашият проект. Днес ще се пробвам да обесня някои термини в тази насока. Термини, които е желателно да влязат в речника ви.

Анатомия на шрифт

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

Baseline се нарича долната част на системата, върху която лежат всички букви. Тя се използва с няколко цели – от това буквите да стоят на един ред до това текста да остане подреден в колони. Baseline-a задава чиста линия и чувство за изчистеност. Липсата на такава линия би позволила разместването на буквите и създава усещане за хаос (всеки е писал на чисто бял лист, без редове).

baseline image

Горната част на буквите също задава хоризонтална мрежа, която се нарича x-height. Тази линия се създава от височината на малките букви във шрифта. Името идвва защото буквата “x” обобщава този принцип, описан надълго и нашироко в “Type Idea Index: The Designer’s Ultimate Tool for Choosing and Using Fonts Creatively.” Или просто казано – колкото по голям е x-height-а, толкова по – голям ще изглежда шрифта, дори и при съпоставка с друг шрифт в същия размер.

x-height

Някои букви запълват изцяло разстоянието между x-height-a и baseline-a. Но както се досещате има и такива букви, които излизат имат части, излизащи извън тези рамки. Те се наричат ascender-и и descender-и. Ascender-ите са частите от буквите, които излизат извън x-height-а (например буквата „б”). Descender-ите са частите от буквите, които излизат извън baseline-а (буквата „у”). Големината и дебелината на ascender-ите и descender-ите варира в зависимост от шрифта и трябва да го вземете предвид при правенето на дизайна. Шрифтове с по – големи ascender-и например, могат да влязат в пространството на букви от горен ред. (естествено тук зависи и какво е разстоянието между редовете)

ascenders descenders

Лигатори

Първо – този термин поне на мен ми звучи супер забавен – като име на герой от игра. Та сериозно – лигаторите са комбинация от две букви във единичен символ. Това е свойство на някой шрифтове и опция при други. Дизайнерите трябва да внимават при използването им и при предпечатни и при електронни варианти. Лигаторите трябва да се избягват при проекти, където подравняванията зависят от разстоянията между буквите, защото те не позволяват увеличаване на разсоянието между самите букви, образуващи символа. Най – често срещани са F-ligature-ите. Когато малката буква например „f” е поставена до буква от друг шрифт, със центриран ascender, те могат да се слеят. Например “fl” или “fi” (не знам дали от шрифта който ползвам ще стане ясно, но съм сигурен че сте виждали за какво става въпрос). Почти във всички случаи “f” закрива част от следващата буква. При някой шрифтове “Th” също може да създаде лигатори. Помислете за други лигатори, които се срещат и са типични шрифтове работещи с кирилица.

To Serif or Not?

Под скорошно влияние на Хамлет съм и не измислих по – подходящо заглавие.

Тук въпроса е – какво усещане искате да предизвикате? Модерно или класическо? Шрифтът може да ви помогне. Стила на шрифта може да допринесе за смисъла на проекта ви.

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

Санс серифните шрифтове (sans serif) или тези, които нямат отрязани краища, са най – често срещаните при описания в дигиналния дизайн.(под описания разбирайте големи параграфи с текст) Санс серифтните шрифтове са по – лесни за четене, особенно когато големината на шрифта е по – малка, защото краищата на серифните шрифтове (отрязаните) могат да се слеят. Чистите линии правят по – лесно четим един сайт. Това е причината, когато имате голямо съдържание текст да е препоръчително да използвате санс серифен шрифт.

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

cursive and fentasy

Курсивните, фентъзи и моноспейс шрифтовете са по – рядко използвани. Всеки от тези типове шрифтове се използва за декориране на проекта, но не и когато искаме да четем дълъг текст. Курсивните шрифтове, като например „Monotype Corsiva” имат линиики между буквите, които ги свързват. Фентъзи шрифтовете като „Comic Sans MS” са смесица от закачливи символи и шрифтове и могат да нямат визуализация за всеки символ. Някои дизайнери не правят разлика между курсивните и фентъзи шрифтовете (за жалост). Моноспейс шрифтовете, като например „Courier” имат фиксирана широчина и се използват най – често при кодирането от програмисти.

Да увелича ли още малко?

Големи vs Малки типове

При печатните проекти, обмислете използването на шрифтове с по – малкък x-height, когато смятате да използвате по – малък размер на шрифта (нормално 8 points или по – малко). Колкото по – закръглени, хоризонтално насочени, без допълнителни детайли, толкова по – лесно четими са шрифтовете при малък размер. При проекти с по – голям шрифт, обмислете използването на смесица от серифни и санс серифни шрифтове. Прекрасен пример е главната част на текста да е серифна, а заглавието санс серифно.

Смесване на стиловете

При проекти, състоящи се само от няколко думи (плакати, визитки) също обмислете смесване на различни шрифтови стилове. Уверете се, че стила на главния шрифт подхожда проекта ви – сериф за по – традиционно полване и санс сериф за по – съвременно излъчване.

Използвайте стандартни шрифтове

При дигиталните проекти, дизайнера задължително трябва да се съобрази със стандартния набор от шрифтове. Browser-ите използват само шрифтове инсталирани на всеки компютър, за да рендират сайтове (ако се наложи сменят шрифта на сайта). За да си подсигурите съвместимост на сайта ви при всички browser-и насочете се към стандартните шрифтове.

Някой от най – често използваните cross – platform (Windows и Mac)шрифтове са Arial, Comic Sans MS, Courier, Impact, Times New Roman, Trebuchet MS и Verdana. Естествено можете да се отцепите от колектива и да използвате @font-face и да използвате и най – изчанчения шрифт, но за това – в следващ пост.

Заключение

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

Разбирането и мисленето за шрифтовете още при ранните етапи на проекта може да ви даде солидна основа. Мислете за размера, формата на всеки шрифт при всеки проект. Следвайте правилото, че baseline-а ви трябва да задава усещане за организираност. Запомнете, че шрифтове с по – голям вертикален x-height ще изглеждат по – големи от тези с по – малък x-height.

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


9 Responses to “Типография 101 – разбиране за анатомията на буквите”

  1. Анджелика Тодорова says:

    Много хубава статия! Имам само 1 въпрос.
    Там където е ” Големината и дебелината на ascender-ите и descender-ите варира в зависимост от фона и трябва да го вземете предвид при правенето на дизайна. Фонове с по – големи descender-и например, могат да влязат в пространството на букви от горен ред. ”
    Та въпроса ми е аз ли не съм разбрала правилно или там не трябва да е “фон”, а “фонт” (респективно нали за шрифт си говорим, което както всеки знае на английски е font)? Все пак мисля, че има разлика между фон и фонт.

    • Pavel Kolev says:

      Мерси за корекцията – права си. Просто като пишеш по цял ден font font font и накрая като почнеш да пишеш с превод на български и може да се допуснат такива грешки.
      Мерси отново

      • Анджелика Тодорова says:

        И аз благодаря за отговора :)
        Продължавай в същия дух, лично на мен ми разпали интереса, много се ентусиазирах.

      • Георги Янков says:

        “Шрифтове с по – големи descender-и например, могат да влязат в пространството на букви от ГОРЕН ред.” – В конкретната фраза, мисля че трябва да е ДОЛЕН ред.

        Наистина ценна статия!

        edit by pavel: мерси поправих го

  2. Miroslav says:

    Супер е статията, сложи едни соц бутони, за да споделяме :)

  3. dpeeva says:

    Хубаво въведение и ясно написано. :)
    Има какво да се желае в правописно и пунктуационно отношение, но предполагам и на това ще му дойде ред някой ден. Хубаво е поне да се коригира горе – правилното е лигатура (ligature), не “лигатор”.

    Поздрави!

  4. dpeeva says:

    Още едно допълнение: серифните шрифтове се определят като такива със “засечки” (има ги и в старобългарската кирилица), а не че краищата им са “отрязани”. Напротив, санс-серифните, т.е. не-серифните шрифтове имат “отрязани” (изчистени откъм хасти) краища. По тази причина за електронни медии се предпочитат несерифните шрифтове: по-лесни са възприемане на монитор; обратно, серифните шрифтове са класиката в печатните текстове, тъй като е доказано, че най-малко напрягат при четене, лесно се различават и асимилират буквите от четящия. Ако тоя текст в момента го четяхте на Times New Roman (класически сериф), щеше да натежи една идея повече. :} Отделна е темата, че самият шрифт вече толкова се е изтъркал от употреба, че много хора бягат от него; зависи и какви са целите на дизайна, разбира се…. :) Май се разпрострях, млъквам. ххх

  5. Dilyan Tarashoev says:

    Отлична и крайно необходима статия – дори може би тема, надявам се.
    С принципната забележка – типографията, или типографиката – визуалното възприемане на печатния текст – не се е появило с компютърните технологии, а доста векове по-рано. И съответно, дори и на български, си има отдавна възприета и изпитана от времето терминология – макар и позабравена при революционните промени в книгоиздаването и полиграфията през втората половина на миналия век.
    Асендерите и десендерите например на български се наричат горни и долни дължини. Термина сериф е възприет на български, макар че някои го наричат и засечка. Вместо санс серифни се казва просто безсерифни, блокови или гротескови.
    Виж, със “анатомията”, колега Колев, или конструкцията, нещата са малко по-сложни. Основната шрифтова линия (baseline) е по-скоро средна. Долната граница на “размера” на шрифта, който всъщност се нарича кегъл, е линията на долните дължини. По същия начин над х-линията има линия на горните дължини, линия на главните букви (понякога съвпадаща с линията на горните дължини) и дори още една – линия на екстрите като тилди, умлаути и т. н. И кегъла (размера) на шрифта е именно размера от тази най-горна линия до линията на долните дължини. Така че всъщност х-височината няма нищо общо с “големината” на шрифта – това зависи в много голяма степен от съотношението й със горни и долни дължини, и процента й от височината на кегъла силно варира в различните шрифтове. Относно навлизането: горните и долните дължини на два съседни реда НЕ ТРЯБВА да навлизат една в друга, защото това нарушава четливостта на текста.
    Още много може да се допълни по горния текст, но да се надяваме че това е само началото на една важна и полезна тема. С нетърпение ще чакаме продължение.

    • Pavel Kolev says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *