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

Разберемся с тем, что такое типографика и с чем ее едят.

Типографика — это графическое оформление печатного текста посредством набора и верстки с использованием норм и правил, специфических для данного языка. Другими словами, типографика — это и искусство, и ремесло, и набор правил, которые используют шрифты и оформительские средства для достижения одной-единственной цели — сделать текст наиболее оптимальным в восприятии читателя.

Типографическое оформление текста, а мы в данном случае говорим об этом явлении в Сети, имеет три важных ограничения:

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

    Доступные инструменты. Оформленный текст будет кардинально различаться, используете ли вы в качестве инструментов масло и холст, плотную бумагу и перо, тонкую бумагу и печатную машину или же экран компьютера и разные браузеры в разных операционных системах.

Инструменты и средства типографики разнятся, цель — всегда одна

Экранная типографика, то есть оформление текста для его прочтения с монитора компьютера, в большей степени зависит от третьего ограничителя. Роберт Брингхёрст в своей книге «Основы стиля в типографике» пишет:

«Исключения есть всегда, всегда находится место для фокусов и сюрпризов. Но, наверное, мы можем согласиться, что, как правило, типографика должна оказывать читателю следующие услуги:

— пригласить читателя в текст;
— выявить содержание и смысл текста;
— прояснить структуру и последовательность текста;
— связать текст с другими элементами издания;
— ввести читателя в состояние насыщенного энергией покоя, которое идеально для чтения».

Единственное, о чем забывает упомянуть уважаемый автор, — так это то, что никакая типографика не спасет в том случае, если сам текст написан из рук вон плохо. Тем не менее тексты в Интернете живут по этим законам, но в отличие от книги или журнала обладают своими особенностями. В зависимости от браузеров и операционных систем у конечного читателя могут разниться:

  • установленные шрифты;
  • браузеры. А добиться одинакового оформления и отображения текста в разных браузерах далеко не всегда просто. К примеру, в Apple Safari по умолчанию стоит сглаживание текста, которое значительно изменяет его восприятие, в Firefox, Opera и IE этой функции нет, по-крайней мере — по умолчанию;
  • разрешение монитора и другие параметры вроде яркости, типа монитора, его калибровки и т. д. и т. п.

По этим причинам говорить о строгих правилах типографики в Интернете становится достаточно сложно. Однако можно и нужно следовать некоторым общим принципам, которые практически не зависят от инструментов.

Непреложных правил в типографике, как и в грамматике русского языка, нет. Все «правила» — это всего лишь формализованный опыт тысяч типографов , отражающий наилучшие практики и традиции. Последние, к слову, отражают привычки читателей относительно того или иного оформления текста. Привычка читать текст, оформленный общепринятым, адекватным образом, позволяет читателю полноценно воспринимать, к примеру, смысл текста, оформленного пунктуационными символами. При этом само употребление знаков препинания (и не только) остается для читателя незамеченным — мы к этому привыкли. Сейчас эта традиция размывается из-за машинописного наследия и распространения Интернета, однако наилучшие практики и общие принципы качественного оформления текстов никуда не исчезают.

Естественно, основным моментом в понятии «типографика» является понятие «шрифт». Именно от него в основном зависит восприятие текста читателем.

Одна известная поговорка утверждает, что «картинка стоит тысячи слов». Как часто бывает с некоторыми поговорками, в ней имеется доля правды, однако и она должна быть воспринята с долей сомнения. Хорошо подобранная картинка в правильном месте может стоить гораздо больше тысячи слов, а лишняя, ненужная картинка будет нести бесполезную нагрузку.

Графика и изображения в Вебе имеют тенденцию попадать в три категории: декоративные, навигационные и информационные. Никто не имеет ничего против декоративных изображений — все любят, когда результат труда выглядит привлекательно. Навигационные элементы включают в себя кнопки, стрелки, точки и другие визуальные «крошки» для разъяснения структуры информации. Но графика, как ни странно, не способна донести большой объем конкретной и точной информации. «Сколько людей — столько и мнений» — это правило в жизни любой графики играет далеко не всегда положительную роль, ведь восприятие одного и того же изображения у разных людей будет совершенно различным.

Именно поэтому язык в общем как средство передачи информации и слова в частности играют незаменимую роль в нашей жизни. Текст способен передавать гораздо большее количество информации и более гибко, чем любое изображение.

Традиции книгопечатания, формировавшиеся столетиями, помогают нам представить текст в наиболее ясной и привлекательной форме. Неважно, печатная это типографика или экранная. Единственное, что мы должны взять в расчет, — так это одно лишь слово «Интернет». Задача типографа и его инструмента — шрифта в том, чтобы спроектировать текст таким образом, дабы результат оставался привлекательным вне зависимости от операционной системы, браузера, размера шрифта, окна, графических аппаратных средств компьютера или чего-то другого. К счастью, для достижения этой цели существует множество способов.

Существует определенный стандарт стопроцентно читабельных сайтов, азбука любого типографа. Однако в отличие от детской книжки алфавит знают все, а вот самые простые и естественные законы типографики постоянно и систематически нарушаются. Думаю, не стоит приводить в пример конкретные ресурсы — любой пользователь Интернета найдет их без труда.

Типографика пришла из печати в Веб — не удивительно, что она пытается сделать из страниц книги

Если слово «типографика» в первую очередь ассоциируется с глаголом «читать», то практически все, к чему должен стремиться типограф, — это повышение читабельности текста и сайта. В то же время есть вещи, которые пользователя ни в коем случае нельзя заставлять делать, так как есть высокая вероятность того, что он текст просто не дочитает, и еще большая, что он никогда не вернется на ваш ресурс. Итак:

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

    Не нужно пытаться убедить пользователя в том, что прокрутка страниц — это плохо. В таком случае девяносто процентов всех страниц в Интернете — плохие. В прокрутке нет абсолютно ничего отрицательного, как нет негативных сторон и в перелистывании страниц книги.

    Не пытайтесь сказать пользователю, что текст на сайте не важен. Девяносто пять процентов того, чем занимается веб-дизайнер, — это типографика.

Следуя этим, несомненно, простым ограничениям, мы получаем несколько правил, достаточно простых для того, чтобы им было легко следовать.

Лебедев сделал всем дизайнерам Рунета одну огромную услугу — поставил планку, до которой никто не мог дотянуться

Кроме инструкций, которые кому-то покажутся вполне закономерными, а кто-то увидит впервые, я обещал себе ответить на один вопрос: «Почему экранная типографика в России сейчас настолько популярна?» Для того чтобы ответить на этот вопрос, нужно понять некоторые тенденции Рунета. Во-первых, не я придумал и не я утверждаю то, что «наш Интернет» отстает от «их Интернета» на энное количество лет. Это нормально, мы к этому привыкли и толкаем Рунет своим путем.

Ситуация с Вебом Европы и США в сравнении с Рунетом очень сильно напоминает взаимодействие между Солнцем и Землей. Солнечные лучи, которые мы видим и ощущаем, покинули поверхность звезды восемь минут назад, преодолев за это время гигантское расстояние. Но это неважно — ведь мы эти лучи видим здесь и сейчас, в данный конкретный момент. Вот и солнышко вышло. Только Солнце успело выпустить еще миллион таких лучей, а мы довольствуемся тем, что поймали два-три. Это все утрированно, но надеюсь, что суть понятна: Рунет пока достаточно далек от Интернета Европы и США и люди, создающие тенденции там, на голову выше наших удачливых предпринимателей и бизнесменов от Веба. То есть, другими словами, типографика у нас стала так популярна и необходима в России по одной причине — Запад это уже усвоил .

Для подавляющего большинства людей в России, связанных с дизайном, разработкой и Интернетом, типографика началась с прочтения бессмертного § 62 «Ководства» студии Лебедева, вышедшего 17 декабря 2000 года. До этого момента большинство дизайнеров о типографике либо не слышали, либо слышали, но не знали, что с ней делать, либо не хотели слушать. Сейчас же наступает такой момент, когда игнорировать эту тенденцию уже нельзя, — есть большие (и маленькие) студии, задающие темп в качестве и количестве их работ. Многое из того, чем приходится заниматься дизайнеру при создании веб-страницы, — это типографика. Самое главное, чтобы не ее отсутствие.

Типографика – процесс и искусство разработки архитектуры коммуникации; моделирование, графическое оформление материала посредством набора и верстки, на основе определенных правил, специфических для данного языка.

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

Термин типографика происходит от греческого τύπος - отпечаток + γράφω - пишу) - искусство оформления печатного текста.

Типографика – это, с одной стороны, набор правил, определяющих использование шрифтов и оформительских средств, с другой стороны – искусство графического дизайна.

Цель типографии – упростить коммуникацию с аудиторией, улучшить восприятие передаваемой информации.

Задачи типографики , наиболее творческого этапа оформления текста, предполагают:

  • определение параметров для последующих процессов набора, вёрстки и допечатанной подготовки;
  • способствование передаче эмоции, настроения, отношения задуманных автором, вовлечение в чтение и изучение;
  • моделирование вида и формы контакта аудитории с объектом авторского и дизайнерского творчества;
  • сделать текст наиболее оптимальным, ясным, максимально обеспечивая удобочитаемость текста;
  • сделать текст интересным в восприятии читателя, зрелищным, гармоничным в общей структуре коммуникации.

Типографика в маркетинге – инструмент и средство, обеспечивающее лучшую коммуникацию с целевой аудиторией. Типографика определяет общий формат итогового маркетингового материала:

  • пропорции, формат полосы набора, раскладку полей;
  • параметры шрифта: кегль, интервалы между словами и строками;
  • размеры, место расположения и меру зрительной "тяжести" иллюстраций.
Качественная типографика, с точки зрения маркетинга, оказывается всегда продуманной, подчиненной определенному авторскому замыслу.

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

История типографики начинается с середины XV века, когда формируются первые основы типографики: используется удобочитаемая "Антиква"; вводится принцип равномерности интерлиньяжа и азбучного отступа. В XVI века в типографику вводится понятие "курсив". В XVII веке типографика меняет свои задачи с целью создания книг для широкого круга читателей – уменьшается формат книг, видоизменяются шрифты, особую роль принадлежит Дж. Баскервиллу, отказавшемуся от использования орнамента в пользу именно типографики, исключительно основанной на шрифтовом оформлении.

Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.

Один из источников информации - это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.

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

Что такое типографика

Типографика - это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.

Где брать шрифты

В интернете можно найти бесплатные и платные шрифты. И те, и другие шрифты можно использовать на сайте.

Бесплатные

Большая библиотека качественных шрифтов называется Google Fonts . Шрифт легко подобрать по нужным параметрам: выбрать только кириллицу, искать антикву или гротеск. С Google Fonts их можно скачать или напрямую подключить к сайту.

Часто дизайнеры рисуют свои шрифты и

Типографика - это умение, искусство сделать текст не только красивым, но и удобным для чтения. Важно, чтобы в начертании букв отражался характер издания или определенный информационный посыл. Типографика - это умение принести визуальную гармонию в печатный текст или страницу сайта. Она не ограничивается лишь выбором шрифта контента, и выравнивания. Типографика - это искусство выразить смысл написанного не только через слова, но и через их отображение. Это очень интересная, глубокая и сложная дисциплина. В этой статье мы расскажем именно о ней.

Что такое типографика?

Чтобы или сайт, дизайнер использует текст, фотографии и графику, которые сделаны другими. Подобное разделение труда позволяет добиться наилучшего возможного результата за счет того, что работа ведется с материалами высокого качества. Дизайнер - это не фотограф и не автор текстов. Кроме того, ему даже не обязательно разбираться в компьютерной или HTML-верстке.

Универсальные специалисты - они существуют?

Совсем другой разговор, что во время полной компьютеризации заниматься даже непосредственно дизайном без знания такого инструмента, как компьютер, просто немыслимо, особенно учитывая, что и сайт, и печатная продукция изначально создаются с помощью программ.

Если вы хотите с помощью компьютера создать что-то, вам необходимо знание того, как это «что-то» можно создать. Кроме того, современное компьютерное обеспечение с каждым днем совершенствуется и предоставляет все более и более широкий спектр возможностей. И если вы не знакомы с этим спектром, то и проектировать на высоком уровне у вас вряд ли получится, так как не будет возможности создать продукт, способный конкурировать с лучшими образцами.

Разумеется, уровень владения компьютерными программами у графического дизайнера будет значительно превышать уровень обыкновенного пользователя. Графический дизайнер - это прежде всего художник. Однако между художником и «компьютерщиком» связь более чем ощутима: например, основы стиля в типографике и дизайнерские решения, которые создаются с помощью определенного программного обеспечения.

С кем работают графические дизайнеры?

Чтобы создать полноценный сайт, графическому дизайнеру необходимо сотрудничать как минимум с программистом. Особенно в том случае, если создается многоуровневый ресурс, который будет содержать множество интерактивных функций. Однако небольшой среднестатистический сайт способен сдать и один дизайнер, не нуждаясь в помощи web-мастера или программиста.

В жизни почти не встречается идеальная цепочка, состоящая из креативщика, дизайнера и верстальщика. Зачастую все эти три функции выполняет один-единственный человек, который имеет высшее художественное образование, знает большинство необходимых графических программ, дока в Интернете и компьютере, а также выдает оригинальные идеи, не затрачивая много сил. Кроме того, такой универсальный человек будет представлять себе оформление будущего журнала, все средства управления новой, еще не созданной страницы сайта, и какая именно реклама будет там располагаться.

Где готовят графических дизайнеров?

В профессии графического и web-дизайнера, как ни в какой другой, крайне важно даже не желание, а постоянное стремление воплощать свои идеи в жизнь - и это можно сказать с уверенностью.

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

Считается, что можно стать графическим дизайнером и вовсе не обучаясь в высшем или среднеспециальном учебном заведении. Достаточно многие годы постоянно заниматься ремеслом и искусством (известны и такие примеры). При этом человек усердно трудится и анализирует свои и чужие работы.

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

Разумеется, элементарные навыки работы с графическими программами вполне можно получить и самостоятельно, и на краткосрочных курсах, однако это поможет лишь залатать дыру, но не даст основательных познаний, которые можно получить в вузе.

Коммуникация играет в дизайне огромную роль. Очень важно создавать крепкую связь между веб-сайтом и непосредственно самим пользователем и затем помогать ему в достижении поставленных целей. Когда мы говорим о коммуникации в контексте веб-дизайна, обычно мы имеем в виду текст. Типографика является неотъемлемой частью данного процесса:

Более 95% информации в Интернете хранится в письменном виде.

Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста. Как отмечает Оливер Райхенштайн в статье «Веб-дизайн на 95% состоит из типографики »:

Оптимизация типографики — это оптимизация читабельности, доступности, удобства использования (!) и достижение графического баланса в целом.

1. Используйте минимальное количество шрифтов

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

Чтобы предотвратить подобную ситуацию, старайтесь свести количество используемых шрифтов к минимуму.

В целом, сведите количество шрифтов к минимуму (двух более чем достаточно, часто хватит и одного) и придерживайтесь использования одних и тех же на всем веб-сайте. Если вы решите работать с более чем одним шрифтом, убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв. Взгляните на пример, приведенный чуть ниже. У комбинации Georgia и Verdana (слева) есть общие характеристики, что позволяет им гармонично сочетаться друг с другом. Возьмем для сравнения комбинацию Baskerville и Impact (справа). «Тяжеловесный» Impact подавляет своего «засечного» напарника.

Убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв

2. Старайтесь использовать стандартные шрифты

В сервисах со шрифтами (например, Google Web Fonts или Typekit) можно найти много интересных, которые добавят в ваш дизайн нечто новое и необычное. К тому же, ими очень легко пользоваться. Возьмем, к примеру, Google:

1. Выбираете любой шрифт. Скажем, Open Sans .

2. Генерируете код и вставляете его в

Своего HTML. 

3. Готово!


Но что может пойти не так?

На самом деле, у этого метода есть одна серьезная проблема — пользователи привыкли к стандартным шрифтам и читают быстрее текст, написанный именно такими шрифтами.

Обычно наилучшим выходом будет использование системных шрифтов (Arial, Calibri, Trebuchet, etc.). Исключением может стать необходимость придерживаться каких-то шрифтов, которые задал сам клиент: например, для брендинга или для создания чего-то запоминающегося. Помните, что хорошая типографика влияет на прочтение текста, а не на визуальное восприятие шрифта.

3. Ограничьте длину строки

Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста. Выбирая ширину текста, вы должны ориентироваться не на ваш дизайн, а на ясность и четкость написанного. Обратите внимание на этот совет от Baymard Institute :

«Если вы хотите, чтобы вашему читателю было комфортно, каждая строка должна содержать не более 60 знаков. Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста».

Если строка слишком короткая, глазам придется часто менять фокус, что сбивает темп чтения. Если же строка слишком длинная, глазам читателя, наоборот, придется долго фокусироваться на написанном. Фото: Material Design

Что касается мобильных устройств, придерживайтесь диапазона в 30-40 знаков в строке. Ниже представлен пример двух сайтов, открытых на мобильных устройствах. На одном строка содержит от 50 до 75 символов (лучшее количество знаков в строке для печатного текста и разрешения компьютера), а на втором мы видим оптимальные 30-40 знаков.

В веб-дизайне можно достичь необходимого количества знаков, уменьшив ширину текстовых блоков с помощью em или пикселей.

4. Выбирайте гарнитуры, которые хорошо читаются в любом размере

Пользователи будут заходить на ваш сайт с разных устройств, у которых, соответственно, различается размер и разрешение. Большинство пользовательских интерфейсов используют текстовые элементы различной величины (кнопка «копировать», подписи полей, заголовки секций и т.д.). Необходимо выбирать гарнитуру, которая будет хорошо выглядеть, и оставаться читабельной в любом размере.

Roboto от Google

Убедитесь, что гарнитура, которую вы выбрали, легко читается на маленьких экранах! Старайтесь не использовать курсивные шрифты, например, Vivaldi (на изображении ниже): хоть они и выглядят красиво, понять написанное иногда бывает сложно.

Использование шрифта Vivaldi затруднит прочтение текста на маленьком экране

5. Используйте шрифты с четкими буквами

Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает очень легко спутать похожие буквы, особенно «I» и «L», написанные латиницей (как на изображении ниже). В некоторых же буквы расположены так близко друг к другу, что сочетание «r» и «n» можно принять за букву «m». Поэтому, выбирая шрифт, протестируйте его в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой гарнитуры у читателя не возникнет проблем с пониманием текста.

6. Избегайте капса

Текст, написанный капсом — или одними заглавными буквами — подходит для ситуации, где пользователь не вовлекается в процесс чтения (например, в аббревиатурах или логотипах). Но в других случаях не насилуйте ваших читателей текстом, написанным заглавными буквами. Как отмечает Майлз Тинкер в своей известной работе «Legibility of Print», такой текст читается гораздо медленнее текста, написанного строчными.

7. Не сводите межстрочное расстояние к минимуму

В типографике существует специальный термин для обозначения расстояния между строками — интерлиньяж (или межстрочный интервал). Увеличивая интерлиньяж, вы увеличиваете вертикальное пространство между строками, тем самым улучшая читабельность текста на экране. По правилам, для обеспечения читабельности текста интерлиньяж должен быть примерно на 30% больше, чем высота знака.

Правильное межстрочное расстояние способствует лучшей читабельности текста. Фото: Microsoft

По словам Дмитрия Фадеева, правильно подобранное расстояние между абзацами увеличивает понимание прочитанного на 20%. Умение дизайнера работать с белым пространством позволяет пользователям усваивать содержание текста целиком без упущения каких-либо деталей.

Слева: Текст написан практически вплотную. Справа: Правильное межстрочное расстояние способствует читабельности текста. Фото: Apple

8. Убедитесь, что у вас все в порядке с цветовым контрастом

Не используйте одни и те же или похожие по гамме цвета для текста и фона. Чем лучше виден текст, тем быстрее пользователи смогут прочитать его и уловить основные моменты. Консорциум Всемирной паутины советует использовать следующее соотношение для основного текста и текста изображения:

  • Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1 по отношению к фону.

  • Большие тексты (от 14 размера полужирным шрифтом/от 18 размера и выше стандартным шрифтом) должны иметь коэффициент контраста минимум 3:1 по отношению к фону. 


Этот текст не соответствует стандарту цветового контраста, поэтому его тяжело различить на фоне.

Этот текст соответствует стандарту цветового контраста, поэтому он читается легко.

Когда вы подобрали цветовую гамму, необходимо дать ваш текст для прочтения реальным пользователям и желательно на нескольких разных устройствах. Если в ходе тестирования выявятся какие-то трудности с распознаванием текста, то можете быть уверены, что в будущем многие пользователи могут столкнуться с такой же проблемой.

9. Старайтесь не использовать красный или зеленый цвет в тексте

Дальтонизм — явление довольно распространенное, особенно среди мужчин (8% мужского населения — дальтоники). Поэтому, помимо цвета, желательно использовать какие-то другие знаки для выделения важной информации. Также старайтесь не прибегать к красному и зеленому цвету, так как именно эти цвета чаще всего не распознаются дальтониками.

10. Старайтесь не использовать мерцающий текст

Информация, которая мигает или мерцает, может вызвать недомогание у восприимчивых к этому пользователей. Кроме недомогания, это также может вызвать раздражение у многих читателей, так как будет отвлекать их от процесса чтения.

Не используйте мерцающий текст!

Заключение

Типографика — это очень важная вещь. Делая правильный выбор, вы наделяете веб-сайт ясностью и четкостью. В то же время, неправильный выбор может привести к невнимательному прочтению текста, так как отвлекает все внимание на себя. Типографика должна быть читабельной, ясной и понятной.

Типографика должна уважительно относиться к контенту

Это подразумевает, что читатель никогда не должен испытывать дискомфорта при прочтении текста.

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то