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

Типография и послание

Нека разберем какво наистина влияе типографията в уеб дизайна.

Първо, изображението на уеб ресурса. Висококачествената разработка се вижда с невъоръжено око и не е нужно да сте мегаспециалист, за да прецените колко дълго искате да останете на сайта. Кривият нечетлив текст е първата причина, поради която посетителят ще напусне линка ви 10-15 секунди след влизане.

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

типография

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата в изграждането на уебсайт

Основи на типографията в уеб дизайна

Шрифтове в уеб дизайна

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

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

Въвеждането на свойството @font-face CSS просто развърза ръцете на дизайнерите. Регистрирах връзка към всеки файл с шрифтове и сега той вече се използва на страниците на сайта. В тази тема еизвестно недоволство от страна на разработчиците, но това се оказа напълно разрешим проблем.

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

Макро и микро типография

Както вероятно вече сте разбрали от името на тези термини:

макро ниво - изгражда общата структура на текста, определя разположението на съдържанието спрямо дизайна;

микро ниво - обръща внимание на най-малките детайли, интервали, интервали, отстъпи и др.

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

типография

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата в изграждането на уебсайт

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

Шрифтовете за уеб дизайн за предпочитане трябва да бъдат посочени в относителни единици (% или "em"), това допринася за адаптивността и гъвкавостта на съдържанието. Има смисъл да се използват по-познатите „px“ пиксели за неотзивчиви контейнери, когато те се движат при преоразмеряване на екранаблокове и шрифтът остава стабилен.

Текстова декорация

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

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

Сега относно оформлението. Тук има правила:

Блокът с текст трябва да бъде ограничен до 40-50% от ширината на страницата.

Между абзаците трябва да има разстояние 1,5.

Контрастът на фона и текста трябва да бъде в рамките на 75–90%.

Удобният за окото шрифт е 12–16 px, но дори и най-малкият блок не трябва да е по-малък от 10 px.

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

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

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

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

шрифтове

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата в изграждането на уебсайт

шрифтове

Искате ли да знаете какво е необходимо, за да създадете уебсайт?