Практическа типография за Уеб

Типография на сайт

Ръководство за перфектна Уеб типография на сайтове!

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

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

Бързи съвети за добра уеб типография

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

Ако искате да направите големи подобрения в кратък период от време, започнете от тук:

  • Използвайте добре познати шрифтове. Това е лесен начин да се направи огромна промяна.
  • Никога не използвайте повече от два, най-много три шрифта. Това създава усещане за разхвърляност и забавя времето за зареждане на страниците. Трябва ви един основен шрифт, един допълващ и един за специални случай.
  • За мобилни дисплей се препоръчва размер на шрифта между 12 -14 px, a за по-големите екрани параграфния текст е добре да бъде 16 px. В онлайн книгата „Практичекса типография“ авторите препоръчват буквите за уебсайтове да бъдат от 15 px до 25 px.
  • Броя на символите в един ред е между 45 -90.
  • Междуредието трябва да бъде 120 – 145 % от размера на буквите.
  • Използвайте предварително зададени размери на шрифта с пиксели в тялото на кода и ремикси на останалите размери.
  • Използвайте мащабируеми заглавия. Направете математическа разбивка на вашето съдържание, ако се чудите какво число да използвате може да се спрете на златното сечение – 1,681. Още Леонардо да Винчи е открил, че човешките фигури са много по съразмерни ако са с отношение 3:2. Ако разделите тези две числа ще получите точно 1,681 и е нарекъл това божествена пропорция, която може да се прилага във всички обекти.
  • Имайте в предвид, че хората четат не отделните букви в заглавието, а думата като цяло.
  • Използвайте кратки изречения и параграфи. Не повече от 10-15 думи в изречение или 2-5 изречения на параграф.
  • Задължително тъмен текст на бял фон, но за самите букви не използвайте напълно черно #000000 или напълно бяло #ffffff.

Ако искате да направите перфектната типография продължавайте да четете.

Дефиниране на перфектната уеб типография

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

Но какво е добра уеб типография?

  • Тя е лесна за четене. Използва перфектните пропорции за да увеличи  скоростта на четене.
  • Зарежда се бързо и не увеличава скоростта на отваряне на страницата.
  • Балансирана е математически и отзивчива. Мащабируемата йерархия и CSS са необходими за да се показва правилно на всяко устройство.
  • Разпознава кирилица за българските сайтове, а при излизане на международния пазар и на повече азбуки.

 

Нека да започнем с избора на шрифт

Като цяло има два вида шрифтове серифни и безсерифни шрифтове. Първите, като Georgia имат различни завъртулки и чертички в края на буквите и са по-подходящи за печатни материали, а вторите kato Verdana са по закръглени,  без излишни украшения. Те се препоръчват за Уеб сайтове, защото при минимизиране се губи ефекта на украсата, а и са по четливи на екран.

От техническа гледна точка в Интернет пространството се използват 3 вида шрифтове.

  • Най-безопасни за използване са тъй наречените системни шрифтове. Това са такива дето ги има на всеки компютър и при отваряне на страницата се зареждат от съответния компютър. Ако правите сайта с някой шрифт, който е само на вашия компютър може на хората да има излизат ченгели и завъртулки. Затова използвайте сигурни шрифтове, като Arial. Times New Roman. Verdana Georgia, Verdana, Helvetica, Time New roman.
  • Втория вид са тъй наречените Уеб шрифтове, качени на  хостинг услуги,  като Google Fonts, който е безплатен и Typekit.  Те са все по-разспространени на последък и Postvai.COM също използва такива в момента, като Open Sans и Oswald.
  • Третия вид е да си качите шрифтове на самостоятелен хостинг за да измегнете евентоални проблеми от трета страна.

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

За намиране на допълващ към основния шрифт,  може да използвате инструменти като Type Genius да намерите перфектната комбинация на шрифтовете. Ето няколко основни принципа за избор на втори шрифт:

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

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

Вместо да зареждате всички класове и стилове на дадения шрифт инсталирайте само тези, които ще използвате за да не натоварвате излишно страницата.  За постигане на максимална скорост на зареждане на сайта е най-добре да запазите вашите уеб страници под 2MB. Ако не сте внимателни, един шрифт с всичките си класове и стилове може да се добави  25% от горе.

Изграждане на типографска система

Сега, когато имате избрани шрифтове, трябва да подберем мащабите им. Мащаба има два аспекта:

  1. Математически аспект. Шрифтовете на вашите заглавия, подзаглавия и текст трябва да са в математическа пропорция.
  2. Отзивчивост на шрифтовете, чрез използване на ремикси базирани на размера на бодито.

С други думи може да вземете за база размера на основния шрифт в body на HTML кода. Всеки останал размер да е в мащаб спрямо него.

За определяне на височината на реда по златното сечение може да използвате онлайн инструмента  Golden Ratio Calculator. С него в лявата колона задавате избрания от вас размер на шрифта, широчината на колоната от решетката на сайта предназначена за основното съдържание и броя на думите в един ред. В дясно ще ви даде златната пропорция на останалите размери, като височината на линията в пиксели. Има и възможност да сменяте шрифта за да видите ка к изглеждат в реална обстановка.

Използвайте онлайн инструмента  Gridlover за да видите перфектната изходната решетка. Нещо като начертана тедрадка, която показва редовете според зададените от вас размери и предоставя HTML код.

За да разберете какво трябва да е пропорционалното мащабиране на заглавията и подзаглавията може да разгледате Type Scale. Той предоставя възможност от избора на няколко мащаба, като „златно сечение“, „перфектната петица“ и други. В Postvai.COM сме използвали т.н. „перфектна четворка“, защото е с увеличение 1,333  което е точно по средата на препоръчаните в науката размери на междуредието от 120 – 145 %  увеличение от базата, а освен това не използваме повече от 4 заглавия H1, H2, H3 и H4 .

Използвайте “rem” при генериране на CSS кода за да коригирате размера на заглавията на шрифта, защото това е на база тялото на шрифта, а не да се добавя елементи към майката.  Ако използвате пиксел базирани размери, ще се наложи да коригирате всички размери на екрана.

Повтарящи се дизайн компоненти

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

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

Технически погледнато обаче текстът трябва да пада на вертикалната линия, поради което в Интернет текстовете се подравняват в ляво. Плюс това, на малки екрани, където екрана може да е само 15 пиксела и полето е ценно, списъците може да станат нечетливи. Въпреки това лявото подравняване в цитирането е масово не използвано и аз лично препоръчвам отстъп на цитирането, но не и на списъците.

Ако имате нещо да добавите, моля пишете в коментарите, а и ще се радвам да го споделите в социалните мрежи.

Автор: Петко Димов

Библиография:
1. Димов, П. (2011). Копирайтинг за Уеб ISBN 978-954-2952-17-6.
2. Димов, П. (2016) Оптимизация за български сайтове.