Типографика что такое: Что такое типографика и какие шрифты использовать на сайте — руководства на Skillbox

---

10.04.2020 Разное

---

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

запись вебинара

 1ч. 58 мин.

статья

 11 мин.

Экономия времени

 1ч. 47 мин.

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

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

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

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

Базовые линии и расстояние между строчками Линия выключки

Кроме базовых линий, есть еще x-line (высота строчных букв) и cap height (высота заглавных букв). По линиям, лежащим сверху на буквах, вы можете выравнивать текстовые элементы: например, относительно картинок, которые находятся рядом.

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

Есть еще такое понятие, как кернинг. Это расстояние между буквами. Оно может быть очень маленьким, как между буквой «s» и буквой «i» на примере выше, или очень большим, как между буквами «d» и «e».

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

Важно!

Букв достаточно, чтобы испортить весь дизайн

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

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

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

Не меньшей ошибкой при построении композиции будет использование цветового круга Иттена и прочей подобной ерунды, например, color.adobe.com. Дело в том, что подобные сервисы сделаны в отрыве от законов человеческого восприятия цветов, они слишком механистические. Картинку обрабатывают не глаза, а человеческий мозг. Именно мозг решает, что хорошо, а что плохо в дизайне.

Текст и заливка должны быть разных цветов, чтобы восприниматься одинаковыми

Для подбора цветов продвинутые дизайнеры используют Dribbble.

Заходите, выбираете цвет и смотрите, какие цвета сочетаются.

Для построения композиции обычно используется правило золотого сечения (спираль Фибоначчи) и модульные сетки, однако это усложняет работу. Начинающему дизайнеру проще всего научиться выстраивать композицию с помощью метода оптических компенсаций.

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

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

На картинке справа дизайнер добавил дополнительный элемент «круг» и сгруппировал все элементы относительно фонового круга.

В результате правая иконка выглядит аккуратно — она оптически выровнена.

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

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

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

К таким навыкам относятся типографика, композиция, атмосфера и стиль.

Курс «Веб-дизайн с 0 до PRO»

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

•  32 часа теории и 16 практических заданий
• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

как и зачем с ней работать

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

Брусковый шрифт — подтип антиквы, с элементами гротеска. У брускового шрифта есть засечки, но не округлые изящные, а мощные рубленые, словно высеченные из камня. Такие шрифты впервые возникли в Англии и применялись в начале XIX века. Сначала ими набирали титульные страницы и заголовки, но в XX веке их начали активно использовать для газетного набора.

Гротеск — шрифт без засечек. В названии этих гарнитур часто встречается сочетание sans serif (лат. без засечек). Они появились в конце XVIII века и изначально применялись в рекламе как акцидентные. В XX веке с развитием новой школы типографики их начали использоваться для набора текста.

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

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

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

• Какой имидж у вашей компании?
• Какие качества ценят клиенты?
• Какие качества вашей компании вы хотите подчеркнуть: надежность, креативность, стабильность?
• Опишите свой бренд в трех словах. Какие бы это были слова?
• Кто ваш идеальный клиент?

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

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

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

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

Используйте простые и стандартные шрифты. Не слушайте тех, кто говорит, что стандартные шрифты это скучно. С их помощью можно создавать сильные знаки. Пример простой типографики: логотип студии DILETTANT. Денис Башев набрал его с помощью Arial.

У многих зарубежных компаний в основе логотипа лежит шрифт Helvetica, например, — старый логотип Microsoft, Lush, Nestle и Toyota.

Не ориентируйтесь на конкурентов. По статистике Tasty Placement, 63% мировых брендов используют гротески, из них треть — Helvetica. Это не значит, что вы должны писать все тексты на сайте и упаковке тем же шрифтом. Контраст не должен быть кардинальным. Достаточно взять шрифт с более яркими выносными элементами или другим типом засечек, выбрать более открытый гротеск, заменить шрифт на антикву или брусковый.

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

Хороший пример того, как можно выделиться среди конкурентов, — это рынок медиа. В соцсетях большинство СМИ оформляет картинки гротесками, но посты The Village заметнее благодаря антикве.

Издание Meduza использует отдельные шрифты для разных рубрик: для новостей — антиква, для историй — гротеск.

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

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

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

Вторая по распространенности ошибка: несколько кеглей в одном тексте. Для хорошей типографики достаточно одного шрифта и трех-четырех кеглей: для основного текста,  заголовка, подзаголовков и цитат.

Начинающему дизайнеру сложно разобраться, какие шрифты сочетаются, а какие нет. Можно ли, например, совместно использовать Times New Roman и Arial (нет, нельзя). Специальные сервисы помогут понять, какие шрифты хорошо работают вместе, а какие лучше не ставить рядом.

Font Pair — сервис позволяет посмотреть, как сочетаются между собой основные шрифты Google Fonts. Вы можете комбинировать шрифты для классического стиля «антиква — антиква» и для современного дизайна «гротеск — гротеск».

Typotheque — идеальный инструмент для работы со шрифтами на латинице. Кириллических начертаний здесь немного — всего 37, зато латинских — 72. Кроме этого, есть еще шрифты для арабского, иврита и греческого.

Just My Type — инструмент позволяет загрузить шрифты из сервисов TypeKit, H&FJ и проверить на совместимость.

Fast Print — шпаргалка для дизайнеров по совместимости шрифтов Google Fonts. Работает как таблица Пифагора: выбираете два шрифта и смотрите, какой цвет стоит на их пересечении. Белый — шрифты хорошо сочетаются; светло-серый — нежелательно сочетать эти шрифты; темно-серый — следует избегать сочетания этих шрифтов.

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

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

Google Fonts — самый известный сайт со шрифтами для личного и коммерческого использования. Их можно встроить на сайт или скачать для работы в графических редакторах.

Webfonts — русскоязычный ресурс с большой библиотекой бесплатных качественных шрифтов для работы в Adobe Photoshop или текста на сайте.

Dafont — одна из наиболее богатых коллекций бесплатных шрифтов. Вы наверняка найдете подходящий вариант среди20 тыс. наименований, представленных на сайте.

1001 Free Fonts — широкий выбор бесплатных шрифтов и аналогов официальных.

Typography — cайт, посвященный созданию логотипов и типографике в целом. Помимо интересных и полезных рекомендаций, вы также найдете здесь немало красивых и качественных шрифтов.

Font Space — сайт с рукописными и акцидентными шрифтами.

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

Font Base — приложение, которое позволяет брать шрифты в аренду, систематизировать шрифты по папкам и проектам, разрабатывать свои начертания. Подписка стоит3 доллара в месяц.

Бесплатные шрифты — группа во «ВКонтакте» с бесплатными шрифтами.

все, что вам нужно знать об искусстве шрифтов / Блог компании Mail.ru Group / Хабр

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



Вот уже более трёхсот лет профессионалы ищут варианты гармоничного начертания букв русского алфавита (кириллицы). В их числе — и Юрий Гордон. Книга Гордона — это обширное исследование нашей азбуки. Автор, профессиональный шрифтовик, дизайнер и иллюстратор, задаётся вопросом, что же такое кириллица и почему она выглядит именно так.

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

Задача любого шрифтовика — выработать идеальный по красоте и по читаемости шрифт. И именно её помогает решить Юрий Гордон.

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

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

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

Англоязычная версия (The Elements of Typographic Style): Amazon.

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

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

«Облик книги», как и большинство работ Чихольда, будет интересна не только профессионалам, но и широкому кругу читателей — всем людям, любящим книгу.

Книга впервые издана в Германии в 1928 году. В максимально новаторском для своего времени исследовании автор анализирует теорию социального критицизма и истории искусств, а также рассуждает, например, о возрастающей важности фотографии в графическом дизайне. Теоретический блок помогает понять основы типографики и связать её с другими видами искусства (архитектурой и пр.). А вот в практическом блоке автор с поистине немецкой скрупулёзностью предлагает правила оформления печатных материалов и практические указания по вёрстке деловых документов.

Скептики скажут, что Чихольд устарел: стандарты, описанные в книге, давно не применяются, да и сам он позже отказался от своих идей. И всё же магия великих книг заключается в их непреходящей актуальности, в их вневременном значении. Чихольда читать надо. Профессионалы по-прежнему признают «Новую типографику» одной из основных книг ХХ века и рекомендуют её не только специалистам, но и всем интересующимся темой.

Книга Джеймса Феличи целиком и полностью посвящена типографике: искусству оформления печатной продукции с помощью набора и вёрстки. Это база, основа, библия — назовите как хотите. Без книги Феличи в типографике делать попросту нечего.

Огромная историко-теоретическая база исследования подаётся не оторванной от жизни. Знание этой базы — первый шаг на пути к эстетически идеальному оформлению книги. Автор обращает внимание на компьютерные шрифты и описывает основы и тонкости работы в основных программах для вёрстки, а также сведения о веб-типографике. Удачное совмещение классических представлений и современного взгляда позволит книге Феличи занять достойное место на рабочем столе профессионального шрифтовика, оформителя или дизайнера.

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

Представлять профессиональному сообществу Эрика Шпикермана — неблагодарное дело: слишком известен. Его универсальная книга, изданная на русском языке в 2005 году, называется скромно и просто — «О шрифте» — и до сих пор остаётся неувядающей классикой. Автор рассуждает о новых шрифтовых технологиях, о современных шрифтах (обращая внимание на веб-типографику и компьютерные шрифты).

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

Англоязычная версия (Stop Stealing Sheep & Find Out How Type Works): Amazon.

В 2000 году эта работа искусствоведа и дизайнера Владимира Кричевского победила на конкурсе «Лучшие издания XIII ММКЯ» в номинации «Книга года». «Типографика в терминах и образах» — без преувеличения, одна из важнейших книг для шрифтовиков и дизайнеров. Это странное и прекрасное издание перевернёт ваши представления о пособии по типографике.

Двухтомный труд по искусству оформления текстов средствами набора выглядит очень оригинально. Первый том — справочное пособие из 158 статей, расположенных в алфавитном порядке. По очереди вы узнаете всё об абзаце, афише, бланке, буклете… Причём «всё» значит действительно всё! Спокойно и неэмоционально, логично и продуманно, обращая равное внимание на основы и детали, Кричевский рассказывает обо всех русских типографических терминах. Удивившись, что в книге по дизайну нет «картинок» (совсем нет!), вы отправитесь ко второму тому. А там… нет текста! Только картинки, которые иллюстрируют понятия из первого тома. Подробная и разветвлённая система отсылок поможет вам представить типографику во всём многообразии её проявлений.

Книга Александры Корольковой увидела свет в 2007 году и с тех пор пережила уже пять изданий. Популярная, востребованная, важная и интересная книга — «студенческая». И по тону изложения, и по замыслу автора, и по способу написания (как результат преподавательской работы школы графического дизайна). Живой, динамичный язык упрощает понимание типографических понятий (но вовсе не сами понятия!). Работа не претендует на звание «лучшей», «библии», «исследовательского труда» — вовсе нет. Это живой и яркий учебник, возможно, первая ступень для знакомства с типографикой. Несомненный плюс: книга полностью построена на русском материале, обращается к кириллическому шрифту. Примеры из переводных книг именитых типографов, к сожалению, зачастую неприменимы для «русской почвы».

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

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

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

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

Бренд «швейцарская типографика» — заслуга исключительно Рудера. В сфере типографики он действительно — «наше всё».

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

это … Работа графического и веб-дизайнера

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

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

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

Поговорим о важности типографики в современном мире

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

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

Что необходимо знать для правильной организации текста?

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

Близость. Если символы или элементы текста находятся рядом, люди имеют тенденцию воспринимать их как единое целое.

Схожесть. Если символы схожи по размеру, цвету, форме или очертаниям, они также воспринимаются целостно.

Целостность. Восприятие человека стремится воспринимать информацию целостно и упрощенно.

Замкнутость. Человек склонен визуализировать фигуру так, чтобы она приняла законченную форму.

Фон и фигура. Если правильно соотнести фон и фигуры, это положительно повлияет на точность восприятия.

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

Типографика: книга об оформлении книг

На интересующую нас тему написано уже достаточно много трудов. Вот некоторые из них:

1. «Типографика. Шрифт, верстка, дизайн» Джеймса Феличи.
2. «Новая типографика. Руководство для современного дизайнера» Яна Чихольда.
3. «Образцы шрифтов» Яна Чихольда.
4. «Типографика. Порядок и хаос» Владимира Лаптева.
5. «Живая типографика» Александры Корольковой.
6. «Типографика цвета. Практикум. Как выбрать шрифт» Тимоти Самара.

Профессия графического дизайнера

Работа «графический дизайнер» — это специальность для творческих людей. Важно помнить, что ни архитектурный, ни текстильный дизайн в их обязанности не входит. Их поле деятельности – различная печатная продукция, будь то книги, журналы, газеты, web-сайты и компьютерные программы, а также реклама.

Что это за работа? Графический дизайнер разрабатывает шрифты, отрисовывает картинки, создает коллажи и оформляет витрины.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25 правил типографики для начинающих дизайнеров

Выбираем правильный шрифт

1. Не используйте причудливые шрифты

Если у вас недостаточно опыта и знаний, даже не пытайтесь использовать необычные, затейливые шрифты. Будьте проще.

2. Забудьте о Comic Sans

Представьте, что вы его вообще никогда не видели.

3. Не избегайте стандартных, дефолтных шрифтов

Серьёзно, если кто-то вам говорит, что стандартные шрифты — это скучно, он просто не разбирается в типографике. То, как будет выглядеть шрифт, зависит от того, как он будет набран. Times New Roman может выглядеть по-настоящему здорово. И главное: пусть лучше текст будет скучным, чем уродливым или нечитабельным.

OmegaTransFer / Depositphotos

Смешиваем шрифты

4. Не используйте одновременно больше двух шрифтов

Экспериментировать с большим количеством шрифтов на начальном этапе не стоит. Двух вполне достаточно. Вы же не хотите превратить текст в разномастную ерунду, не так ли?

5. Смешивайте только контрастные шрифты

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

6. Выбирайте шрифты с одинаковой высотой букв

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

Набираем текст

7. Размер шрифта

Размер текста в вебе не должен быть меньше 13 пикселей. На мой взгляд, лучший выбор — в пределах 14–18 px. Не слишком большой и в то же время удобочитаемый.

8. Выбирайте правильную длину строки

Не верьте разговорам, что правильную длину строки можно получить, умножив размер шрифта на два. Это ерунда. Просто постарайтесь удерживать длину строки в пределах 45–75 символов. ГОСТ для печатных изданий рекомендует длину в 60 символов, но это, конечно, труднодостижимый идеал в условиях веба. И всё же к нему стоит стремиться. Определяйте на глаз, не является ли строка слишком длинной или слишком короткой.

9. Интерлиньяж должен соответствовать размеру шрифта

Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Есть ещё один способ попроще: устанавливаем интерлиньяж, равный 125% размера шрифта.

Абзац

10. Выравнивайте по левой стороне

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

11. Избегайте большого числа переносов

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

12. Без отступа

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

13. Узкая колонка

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

14. Висячая пунктуация

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

15. «Вдовы» и «сироты»

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

16. Не злоупотребляйте пробелами

Чтобы начать новую строку, нажимайте Shift+Enter. Для начала нового абзаца нажмите Enter. Вот так всё просто.

Слова

17. Кернинг

Если вы неопытный дизайнер и у вас не намётан глаз на мельчайшие детали, не керните текст вручную.

18. Трекинг

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

19. Выделения в тексте

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

20. Строчные без разрядки

Не стоит увеличивать расстояние между строчными. Причина проста: снижается удобочитаемость.

21. Прописные с разрядкой

Увеличивайте расстояние между прописными. В этом случае читабельность возрастает. Обычно хорошо работает увеличение межбуквенного пространства на 10%.

22. Не пишите всё заглавными

Не злоупотребляйте набором заглавными. Длина такого набора не должна превышать одну строку.

23. Не используйте капитель без надобности

Если в шрифт не включено специальное капительное начертание, не используйте его вообще.

Буквы

24. Не изменяйте ширину букв

Просто не делайте это. Пожалуйста.

Числа

25. Числа прописью

Пишите числа прописью, это выглядит изысканно.

Что такое типографика — Адамовна

Рекламщикам на заметку – текст послания является первым визуальным фактором, оказывающим воздействие на потенциального покупателя.

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

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

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

Многие дизайнеры называют типографику наукой об оформлении текста. Но слово «наука» нельзя употреблять совместно с типографикой. Дело в том, что все правила типографики не являются обязательными для исполнения. Это своего рода рекомендации по правильной расстановке текста и отдельных слов или символов. Более приемлемым для данного направления является определение искусства. В общих чертах, типографика характеризуется, как собрание законов, основанных на оформлении текста, в основе которых лежит восприятие читателем полученной информации.

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

Правила типографики для начинающих

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

• начиная карьеру дизайнера, не пытайтесь «перемудрить» сами себя с помощью причудливых шрифтов. Чем проще будет шрифт, тем лучше.
• не используйте Comic Sans.
• не стоит пренебрегать стандартными шрифтами. При правильном оформлении такие шрифты смотрятся уместно и выигрышно.
• в одном послании не должно быть более двух различных шрифтов.
• сочетаться вместе могут только контрастные виды шрифтов.
• если используете несколько шрифтов, то высота букв у них должна быть одинаковой.
• размер текста на странице сайта не должен быть менее 13 пикселей. Идеальный вариант – 13018 px.
• размер строки не должен превышать 77 символов. Для книг ГОСТом установлена длина в 60 символов, но к вэб-странице это не относится.
• между абзацами желательно оставлять пустую строку для удобства восприятия.
• абзаца равняются по левому краю. Даже выравнивание по ширине не дает такого благоприятного эффекта, как «по левому» краю.
• переносов слов в тексте лучше избегать.

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

Надеюсь, что я подробно изложила свою мысль для вас. Если у вас остались какие-то вопросы, то вы смело можете их задавать! Отвечу всем без исключения.

Что такое типографика? Почему это важно для графических дизайнеров?

Последнее обновление: 21 апреля 2020 г.

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

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

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

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

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

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

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

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

Графические дизайнеры используют типографику для корректировки текста в дизайне. Это помогает создавать контент с определенной целью. Спланированное использование гарнитур позволяет дизайнерам сделать дизайн эстетичным и приятным.

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

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

Различные элементы типографики

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

i.Гарнитуры и шрифты

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

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

Когда дизайнеры хотят объединить шрифты вместе, они обычно выбирают гарнитуру с аналогичной высотой по оси x. Ширина примерно равна основной части буквы и последующему пространству. Для измерения шрифта дизайнеры используют балльную систему. Итак, один балл равен 1/72 дюйма, а 12 баллов равны одной пике.

ii. Ведущий

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

iii. Ведущее значение

Расстояние между двумя строками текста является ведущим значением. Преимущественно больше, чем размер шрифта

iv. Отслеживание

Известный также как межбуквенный интервал, отслеживание — это расстояние, которое мы видим между текстовыми символами.

v. Кернинг

Кернинг — это расстояние между символами и буквами.

vi. Длина строки

Длина строки — это стандартная длина текста.

vii. Иерархия

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

viii. Размер

Размер определяет значение иерархии, и это достигается за счет использования интервала, размеров и цвета.

ix. Цвет

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

х. Выравнивание

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

xi. Контрастность

Контрастность — еще один ключевой элемент типографики, который помогает дизайнерам выделить идею или сообщение. Это делает текст значимым, привлекающим внимание и интересным.

Основные правила типографики для графических дизайнеров

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

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

i. Рассмотрим текст

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

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

ii. Показать иерархию

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

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

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

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

iii. Выберите правильный цвет гарнитуры

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

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

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

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

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

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

01. Привлекайте внимание зрителя

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

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

02. Сделайте текст удобным для чтения

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

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

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

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

03. Установите иерархию

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

04. Повышает узнаваемость

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

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

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

05. Придавайте ценность и тон вашему бренду

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

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

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

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

06. Create Harmony

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

Что такое хорошая типографика? | Практическая типографика Баттерика

что такое хорошая типографика? Подчеркивает смысл текста

Хорошая типографика усиливает смысл текста .

Почти все тексты содержат набор пунктов (петиция должна быть отклонена по трем причинам) . Иногда текст также должен инструктировать читателя (добавьте строки с 7 по 21 и введите здесь сумму) . В других текстах содержатся предупреждения или увещевания. (Для езды вы должны быть ростом 48 дюймов; ограничение скорости 75) .В любом случае хорошая типографика поддерживает и усиливает сообщение. Хорошая типографика делает текст более эффективным.

Отсюда вытекают три дополнительных предложения:

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

2. Для данного текста многие типографские решения будут работать одинаково хорошо. Типографика — это не проблема алгебры с одним правильным ответом.

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

Приостановить рассмотрение предложения №3.Типографика визуальна, поэтому легко сделать вывод, что это в первую очередь художественное или эстетическое занятие. Не так. Типографика в первую очередь утилитарна.

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

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

Посмотрите еще раз на дорожные знаки.

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

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

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

Связанный пример:

Здесь один и тот же шрифт используется во всех трех версиях этого знака.Но первые два знака не передают сообщение — ограничение скорости — 75 — потому что типографика подрывает текст. Самым важным элементом является номер 75 . Также важна подпись ограничение скорости . Только третья версия дает правильный баланс. Это единственный пример хорошей типографики из трех.

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

между прочим

• Популярная, но ошибочная аргументация утверждает, что лучшая типографика «невидима». Эта идея восходит к эссе Беатрис Уорд 1932 года «Хрустальный кубок» и в последнее время пользуется большой популярностью среди дизайнеров, стремящихся выглядеть модно. Я не согласен — см. «Утопление хрустального кубка».

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

Что такое типографика? (с изображениями)

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

Типографика включает размер шрифта, интервал и цвет.

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

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

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

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

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

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

Плохая читаемость может усилить утомляемость.

определение типографики от The Free Dictionary

В игру вступают цвет, типографика, структура, форма, размер и текстура. * Типографика. Выбор шрифта создает настроение для документа и влияет на его читабельность, согласно Костельнику и Робертсу в книге «Разработка визуального языка: стратегии для профессиональных коммуникаторов».* Бронза, общая типографика, производственный персонал, ноябрь и декабрь 2001 г. Типография используется для придания премиальной привлекательности ассортименту Premium. Дизайнеры расширяют сочетание корпоративных систем визуальной идентификации, таких как типографика, цвета, слоганы, символы или логотипы, и добавляют использование публикаций в качестве одного из основных продуктов распространения услуг по маркетингу. Из каталога типографики и искусства House Industries, номер 23, который включает набор шрифтов «Плохое соседство»: «Плохое соседство представляет печально известный Crackhouse (шрифт, который все любят) , клип-арт в формате eps, восемь других убитых шрифтов и футболку Bad Hood.«Другие названия шрифтов включают:« Домашний арест »,« Сгоревший дом »,« Обреченный дом »и« Дом для бедных », а также картинки с изображением автоматического оружия, клинков, перцовых баллончиков и пуль. Обложка — это корпоративное искусство, достойный обсуждения и анализа стиля, типографики и фотографии. Существует католическая мисалета на тонкой бумаге с элегантной типографикой, изысканными художественными иллюстрациями, дополнительными молитвами, благословениями и гимнами, а также сокращенной версией Lauds and Vespers (утренние и вечерние молитвы). ) на каждый день, а также все тексты для воскресных и будних месс.Его нетрадиционная пунктуация и типографика сделали его разговорный и экономичный стиль дополнительным акцентом, но на самом деле это книга о том, как передать информацию графически — с более эффективным использованием диаграмм, цвета, типографики, диаграмм, таблиц и макета страниц и т. Д. Линия справочных экранов. Ее первая опубликованная работа «Другое животное: стихи» (1954), напечатанная в «Poets of Today I», вызвала похвалы и получила награды за яркие образы, экспериментальную технику и типографику. «Клетка шипов» (1958) была ее первым сольным сборником, за ним последовал «Смешать со временем» (1963).Хотя само движение просуществовало относительно недолго, оно оказало значительное влияние на Баухаус, а также на современную живопись, типографику и коммерческий дизайн.

Ascender (типографика) — что это и как используется?

Восходящие элементы — это вертикальные штрихи, идущие вверх, которые возвышаются над высотой x.

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

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

источник

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

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

Британское правительство поручило дизайнерам Джоку Киннейру и Маргарет Калверт улучшить читаемость британских знаков. После многих тестов и исследований, проведенных как в Великобритании, так и в США, выяснилось, что выученные шрифты с восходящими элементами читаются легче, чем шрифты без них.

source

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

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

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

1. Pompiere

Pompiere — это сокращенный шрифт без засечек. У него очень высокие восходящие элементы и небольшая высота по оси x, в отличие от большинства шрифтов без шрифта. Из-за небольшой высоты по оси x этот шрифт идеально подходит для средних и больших размеров!

скачать этот шрифт

2.Amatic SC

Этот шрифт с маленькими заглавными буквами (SC) простой, но эффективный. Он нарисован от руки, идеально подходит для заголовков и других небольших фрагментов текста. Первоначально он был разработан для использования в Интернете веб-браузерами на различных платформах.

загрузить этот шрифт

3. Josefin Sans

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

загрузите этот шрифт

1. Uncial Antiqua

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

загрузите этот шрифт

2. Teko

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

загрузите этот шрифт

3. Francois One

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

загрузите этот шрифт

4. Anton

Это новое изобретение традиционных рекламных шрифтов без засечек, в которых буквы были оцифрованы и изменены для использования в Интернете. Как и в случае с Francois One, основы букв были оптимизированы для отображения жирным шрифтом в веб-браузерах.

загрузите этот шрифт

1. Permanent Marker

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

загрузите этот шрифт

2. Monoton

Этот шрифт является современной интерпретацией старых шрифтов Metalpress, таких как Prisma, идеально подходит для использования с размером около 30 пунктов. Monoton — это чистый дисплейный шрифт, который можно свободно использовать в Интернете.

загрузите этот шрифт

3. Bangers

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

скачать этот шрифт

Нам понравилось изучать эту тему вместе с вами.Хотите продолжать? Выберите один из этих связанных терминов, чтобы прочитать следующее:

A. Descender [dih-sen-der], существительное:

Ascender is ascending. Точно так же спускаются спусковые устройства. В этом определении мы углубляемся в более подробную информацию и предлагаем дополнительные ресурсы по типографике для амбициозных учеников… Прочитать полное определение »

B. Высота по оси X [eks-hahyt], существительное:

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

Обновление типографики — MediaWiki

(вверху) Старая типографика в OSX
(внизу) Обновленная типографика в OSX (вверху) Старая и (внизу) обновленная типографика в Ubuntu / Firefox

В этом документе описывается обновление 2014 года типографики для стандартной оболочки «Вектор» для проектов Викимедиа и программного пакета MediaWiki.

Сводка изменений [править]

Мы подошли к этому обновлению типографики Викимедиа по умолчанию с учетом следующих требований:

1. Читаемость: шрифты любого размера должны быть разборчивыми и красивыми. Тип как элемент должен помогать отличать интерфейс (например, навигацию по сайту) от содержания статьи.
2. Согласованность: единообразное визуальное восприятие на настольных и мобильных устройствах.
3. Доступность: все используемые нами гарнитуры должны быть уже доступны (или доступны) на всех платформах, на которых представлены проекты Викимедиа.Любой выбор должен плавно ухудшаться на разных устройствах и платформах (Mac OS X, Windows, Linux и мобильные операционные системы).
4. Доступность. Контент Викимедиа должен быть доступен для всех, в том числе для людей с ограниченными возможностями.

В этом контексте мы внесли следующие изменения:

Характеристики нового шрифта

Мы установили следующие семейства шрифтов: стили заголовков были установлены на «Linux Libertine, Georgia, Times, serif». Основной текст (основной текст страниц) изначально был настроен на «Helvetica Neue, Helvetica, Arial, sans-serif», но из-за проблем с нелатинскими вики был возвращен к «sans-serif», пока не будет найдено лучшее решение. найденный.

Обратите внимание, что эти списки не означают, что вы увидите все или любой из этих шрифтов. Вместо этого ваш браузер и операционная система будут искать первый шрифт в списке, который вы установили (или для которого у них есть правило «соответствия»), и представят его. ^{[1] [2]}

Новый интервал и размер для заголовков, основного текста и интерлиньяжа

При текущей ширине текста заголовки должны четко выделяться, а интерлиньяж (пробел между строками) должен быть достаточным, чтобы обеспечить читаемость без утомления глаз.Заголовки теперь будут иметь следующие значения: h2 (заголовки страниц) будут 1,3 / 1,8em, h3 (заголовки основных разделов) будут 1,3 / 1,4em. h4 будет 1.6 / 1.17em, h5 1.6 / 1em, H5 1.6 / 1em. Основной текст увеличен до 0,875em (с 0,8em). В зависимости от вашего браузера и операционной системы это приведет к немного разным значениям пикселей, но в целом приведет к немного большему размеру основного шрифта. Высота строки верхнего индекса (sup) и нижнего индекса (sub) теперь установлена ​​на 1, чтобы исправить давнюю проблему с номерами ссылок, влияющими на начало. ^[3]

Новый цвет основного шрифта

В шестнадцатеричных триплетах цвет основной копии теперь установлен на # 252525 на #FFFFFF , с # 000000 на #FFFFFF . В менее технических терминах это означает, что цвет изменился с чисто черного текста на чисто белом фоне на очень темно-серый текст на чисто белом фоне. (Цвета ссылок, заголовков и других элементов не изменились.)

Ниже приведены ответы на некоторые ключевые вопросы об этом изменении.

Кто увидит это изменение? [Править]

Все пользователи сайтов MediaWiki 1.23, использующие векторную обложку по умолчанию, включая читателей и редакторов. Он был разработан в первую очередь для читателей Викимедиа, но стилистически крайне минималистичен. Пользователи, которые используют свои предпочтения или другой метод использования альтернативной оболочки, например Monobook или Cologne Blue, не увидят никаких изменений.

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

В чем заключалась проблема с нашей типографикой? [Править]

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

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

Есть ли идеальный шрифт, который отвечает нашим потребностям в удобочитаемости во всех скриптах? Мы думаем, что это он? [Править]

Нет, не существует идеального шрифта, воплощающего …

1. Повсеместность: то есть доступность во всех популярных настольных и мобильных операционных системах.
2. Правильный рендеринг глифов и диакритических знаков: для сотен нелатинских шрифтов, а также хороший кернинг для пар символов, поэтому пользователям не нужно прищуриваться, чтобы читать символы.
3. Достойная высота по оси x: чтобы шрифт был разборчивым при небольших размерах для таких вещей, как навигация слева, подписи, условия обслуживания или дополнительная информация.
4. Подсказка: предотвращение размытости символов при малых размерах, особенно в Windows.

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

Почему увеличены размер шрифта и интерлиньяж? [Править]

Это небольшое консервативное изменение. Предыдущий размер шрифта был нечитаем для многих пользователей. Из отзывов пользователей мы обнаружили, что масштабирование текста широко использовалось, чтобы сделать текст более читаемым для людей даже с элементарными проблемами зрения или нарушениями. Поскольку мы стремимся сделать информацию доступной для всех пользователей, это изменение было основным требованием для любых улучшений в этой области. Наряду с размером шрифта интерлиньяж также был увеличен до 21 пикселя в соответствии с типографскими стандартами интерлиньяжа i.e 120% от размера шрифта. Это помогает читателям, которые проходят мимо введения и читают длинные абзацы.

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

Почему мы используем шрифты с засечками для заголовков? [Править]

Объединение шрифтов с засечками и без засечек не является необычной или оригинальной идеей. ^{[4] [5]} В данном случае мы делаем это, чтобы обеспечить лучший контраст и различие между основной частью и заголовками. Заголовки действуют как точки входа, когда пользователи просматривают страницу в поисках информации. И заголовки, и изображения играют важную роль в разрушении визуальной монотонности страницы, что имеет решающее значение, учитывая, что большая часть контента Викимедиа (контентные страницы, страницы обсуждений, справочный текст, политики и т. Д.)) довольно длинные и содержат много разделов.

Почему мы указали Linux Libertine, Georgia и Times в качестве шрифтов с засечками? [Править]

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

Linux Libertine не является широко доступным, но представляет собой хорошо разработанный и бесплатный / открытый шрифт с засечками, который также используется в логотипе Википедии.Это делает его неотъемлемой частью языка дизайна Викимедиа, а также его можно использовать в заголовках. Georgia — шрифт, оптимизированный для браузеров и экранов. Он также широко доступен на наших самых популярных платформах, в том числе для пользователей Windows, Mac OSX и iOS. Linux Libertine и Georgia действуют как хорошие дополнительные шрифты и хорошо сочетаются с Helvetica и Arial. Время установлено специально для того, чтобы пользователи в системах Linux имели хорошие засечки по умолчанию — системы Linux по умолчанию не включают ни Linux Libertine, ни Georgia.Установив Times, большинство пользователей Linux увидят Nimbus Roman No9 L.

Языки и скрипты, для которых сообщалось о проблемах с Georgia или Times, включают русский / кириллица, иврит, арабский, польский, китайский, японский и корейский языки.

Почему мы указали новые шрифты без засечек? [Править]

Предыдущее состояние нашего основного содержимого состоит в том, что был указан только «без засечек», оставляя на усмотрение браузера использовать его по умолчанию без засечек. За исключением Helvetica, Arial и Nimbus Sans L, шрифты, которые большинство браузеров используют в этом состоянии, не учитывают правильное отображение глифов, пар и диакритических знаков небольшого размера.Нет бесплатного / открытого шрифта, который удовлетворяет эту потребность и доступен повсеместно (см. Таблицу).

Мы указываем Neue Helvetica для пользователей Mac, поскольку это немного более развитая версия Helvetica, где пунктуация была улучшена, высота по оси x немного более согласована, а в некоторых случаях она имеет более закругленные чаши и счетчики. В целом это оптимизация Helvetica, хотя она может быть не такой идеальной для всех скриптов. ^[6]

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

В прошлом мы экспериментировали с несколькими альтернативными шрифтами, которые были бесплатно лицензированы, в том числе: Arimo, Liberation Sans и другие. В конечном итоге эти шрифты либо не устанавливаются пользователями обычно (не создавая эффекта), либо они плохо отображаются на старых системах или системах без сглаживания / хинтинга шрифтов.

Почему мы включили несвободные шрифты в стек шрифтов? [Править]

В стеке указан диапазон шрифтов от Helvetica Neue до Arial, которые доступны на всех основных платформах. Несмотря на то, что Arial широко используется по умолчанию, нам нужно указать его, чтобы деградация CSS была предсказуемой. Чтобы обеспечить максимальную надежность для пользователей на разных платформах, мы решили включить в стек несвободные шрифты, поскольку во многих операционных системах (таких как Windows, MacOS и iOS) по умолчанию не установлены шрифты FOSS.Между тем многие операционные системы будут использовать шрифт FOSS (например, Nimbus Sans L) вместо Helvetica.

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

А как насчет использования веб-шрифтов? [Править]

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