Дизайн шрифты: Attention Required! | Cloudflare — DesignLessons – все о дизайне

Содержание

Изменение темы и использование ее по умолчанию в Word или Excel

Темы документов упрощают координацию цвета, шрифтов и эффектов форматирования рисунков в документах Word, Excel и PowerPoint, а также позволяют быстро обновлять их. В этом видео показано, как изменить тему целиком, а ниже описано, как настроить шрифты, цвета и эффекты темы.

В этой статье

Выбор стандартной цветовой темы

Создание собственной цветовой темы

На вкладке Разметка страницы в Excel или на вкладке Конструктор в Word нажмите Цвета и щелкните Настроить цвета.
Нажмите кнопку рядом с цветом темы, который вы хотите изменить (например, Акцент 1 или Гиперссылка), а затем выберите цвет в разделе Цвета темы.

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

Совет: Чтобы вернуться к использованию исходных цветов темы, перед нажатием кнопки

Сохранить нажмите кнопку Сброс.

Изменение шрифтов темы

На вкладке Разметка страницы в Excel или на вкладке Конструктор в Word нажмите Шрифты и выберите нужный шрифт.

Excel

Word

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

Изменение эффектов темы

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

На вкладке Разметка страницы в Excel или на вкладке Конструктор в Word нажмите Эффекты. .
Выберите эффект, который хотите использовать.

Переключение или удаление темы

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

Сохранение пользовательской темы для повторного использования

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

На вкладке Разметка страницы в Excel или на вкладке Конструктор в Word щелкните Темы > Сохранить текущую тему.
В поле Имя файла введите имя для новой темы и нажмите кнопку Сохранить.

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

Темы.

Создание новой темы по умолчанию

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

Excel

Примените настраиваемую тему к пустой книге, а затем сохраните ее как шаблон с названием «Книга.xltx».

Word

Подробнее о темах

Тема документа — это уникальный набор цветов, шрифтов и эффектов.

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

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

Кроме того, вы можете добавить шаблон для приложения Office, изменив фон Office.

См. также

вариативные шрифты как вектор будущего дизайна / Skillbox Media

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

В её портфолио более 20 уникальных шрифтов, а среди клиентов есть такие, как Nike, Bauhaus, Dazed & Confused, Harvard Graduate School of Design и многие другие.

Этим летом основатели студии приехали на «Стрелку», где провели двухдневный воркшоп.

Мы поговорили с Йоханнесом Брайером и Фабианом Харбом о том, как создать свой вариативный шрифт и в чём его преимущества перед традиционными форматами типографики.

Фото: Артём Голяков / предоставлено институтом «Стрелка»

— Что такое вариативные шрифты?

— Вариативные, или переменные, шрифты — это отчасти новый, а отчасти производный формат. У такого шрифта нет отдельных файлов с жёстко заданными стилями (Regular, Regular Italic, Bold, Bold Italic и им подобными). Файл со шрифтом всего один, но он позволяет получить великое множество начертаний.

Самое крутое в вариативном шрифте — кастомизация. Вы можете очень точно настроить, насколько тонким (Narrow) или насыщенным (Bold) будет любое начертание, какой наклон будет у его курсивного варианта и так далее.

— Как эти шрифты появились и когда стали популярны?

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

— А как использовать их преимущества на практике?

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

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

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

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

— С помощью каких инструментов создают вариативные шрифты? Есть ли какие-то тонкости?

— В Dinamo мы в основном работаем с Glyphs App и Dinamo Font Gauntlet. Чтобы использовать преимущества вариативного шрифта, нужно настроить у него оси вариативности (axis) — насыщенности, ширины, наклона и так далее. Для каждой оси задаются крайние начертания, определяющие множество промежуточных вариантов.

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

Фото: Артём Голяков / предоставлено институтом «Стрелка»

— Как думаете, какие перспективы у вариативных шрифтов?

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

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

обложка: Артём Голяков / предоставлено институтом «Стрелка»

Леттеринг, шрифт и дизайн: 50 лучших примеров

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

Бесплатные рукописные шрифты 2019

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

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25

Читайте также на MonsterPost: Глитч: помехи, шумы и бесплатные шрифты

Shopping Script

Pops

Naira

Olivia

20 премиальных шрифтов

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

Шрифт «Smoking Typeface + Illustration»

Шрифт «New York font!»

Шрифт «Southampton Signature Style»

Читайте также на MonsterPost: Кириллические рукописные шрифты в дизайне сайта

Шрифт «Parlour Sans»

Шрифт «Callem Script»

Шрифт «Bakersville»

Шрифт «Genuine Script»

Шрифт «Growler Script»

Шрифт «Scary Sign»

Шрифт «The Jacklyn Signature»

Шрифт «BAHN Pro Rough Family»

Шрифт «Aura font duo!»

Шрифт «Halimun Script Style Creative»

Шрифт «Entreaty Handlettering Script»

Шрифт «Claudia Script»

Читайте также на MonsterPost: Шрифты «от руки»: учимся рисовать

Шрифт «Rusted Brushpen Script»

Шрифт «Cast Iron Family»

Шрифт «Gastro Pub»

Шрифт «Incognito»

Шрифт «Just Because»

10 правил идеальной типографики | Применение шрифтов в веб-дизайне

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

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

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

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

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

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

1. Крупный, мелкий или средний текст?

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

Довольно часто «якобы для дизайна» коверкают текст – а следует делать наоборот! Текстовая составляющая веб-сайта всегда приоритетнее графики. Сама по себе картинка без подсказки текстом не подталкивает к выполнению целевого действия. А вот вместе с текстом – легко! Следовательно, для получения желаемого, правильно расставляйте приоритеты.

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

2. Выравнивание текста: по центру или по краю?

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

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

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

3. Какова оптимальная длина строк?

Здесь хорошо работает правило «золотой середины» — не должна быть слишком длинная (затрудняет понимание сути и забудешь, пока дочитаешь), но и не очень короткая. Оптимальная длинна строк в диапазоне от 55 до 65 символов (для декстопов) и от 30 до 40 символов (для мобильных)

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

4. Кавычки: лапки или елочки?

Вот как могут выглядеть кавычки в тексте: «кавычки» или «кавычки», немецкие „лапки“, ‘одинарные кавычки’, “двойные кавычки”. В русском языке предпочтение отдается елочкам – так уж сложилось. Лапки применяются, когда необходимо поставить одни кавычки внутри других кавычек.

Профессионалы всегда ставят елочки. А еще это важно, так как в языках программирования и HTML разметке, используются «программистские» кавычки, поэтому предпочтение следует отдавать таким «елочкам».

5. Как оформить стили заголовков?

Стили заголовков делаются по принципу пирамиды. Н1 — основной заголовок – самым крупным шрифтом, Н2 — подзаголовок второго уровня – поменьше, и так далее. Основной текст – меньше заголовка последнего уровня.

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

Не пропустите нашу новую публикацию, она поможет вам глубже изучить вопрос SEO оптимизации: Как использовать теги заголовков «h2, Н2, Н3…»

6. Спец. термины типорфики: кегль, кернинг, интерлиньяж

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

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

7. Общий стиль для одинаковых элементов

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

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

Если вам важно не рассеивать внимание пользователей, а напротив, сконцентрировать его, – тогда оформляйте однотипные элементы одинаково!

8. Какой выбрать шрифт с засечками или без?

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

Однако большинство пользователей привыкли к шрифтам без засечек, и они могут раздражать для мелкого шрифта. Разумно использовать шрифты с засечками в заголовках. Наиболее популярными и читабельными шрифтами без засечек принято считать: Rockwell, Helvetica, Futura, Garamond, Bodoni, Frutiger, Trajan, Myriad. Эти шрифты наиболее часто используются при разработке веб сайтов.

9. Какой цвет текста использовать?

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

Чтобы сконцентрировать внимание пользователей на основных блоках текста, их можно выделить, расположив на цветной подложке. Кнопка СТА всегда должна быть контрастного цвета. Осторожно экспериментируйте с «кислотными» цветами, особенно при сочетании красного на зеленом или синего на желтом.

Особенности восприятия цвета в веб-дизайне. Как зацепить клиента

10. В приоритете читабельность текстов

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

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

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

Соблюдайте эти рекомендации и ваш веб-ресурс всегда будет выглядеть достойно:

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

Коммуникация с пользователями играет огромную роль в веб-дизайне, и типографика является важнейшей частью этого процесса, ведь текстовый контент это примерно 90% всей информации на сайте. Веб-типографика используется для объединения UX дизайна с WOW эффектом, чтобы максимально доступно и выразительно преподнести торговое предложение.

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

28.11.2021

← Поделиться с друзьями !

Веб-шрифты — Изучение веб-разработки | MDN

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

Предварительные требования:	Основная компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), Основы CSS текста и шрифта.
Задача:	Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.

Как мы рассматривали в Фундаментальной стилизации текста и шрифта, шрифты применённые к вашему HTML могут контролироваться при помощи свойства font-family. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

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

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

Во-первых, у вас есть блок @font-face в начале CSS, который указывает файл(-ы) шрифтов для загрузки:

@font-face {
  font-family: "myFont";
  src: url("myFont. woff");
}

Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

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

Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:

Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.

Обратите внимание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!

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

Вы должны использовать файлы web-font-start.html и web-font-start.css как отправную точку добавляя в них ваш код (см. живой пример). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле web-font-start.css вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.

Поиск шрифтов

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

Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают Font Squirrel, dafont, и Everything Fonts.
Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например fonts.com или myfonts.com. Также вы можете купить шрифты напрямую у производителя шрифтов, например Linotype, Monotype, или Exljbris.
Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел Использование онлайн-сервиса шрифтов для более подробной информации.

Давайте найдём какие-нибудь шрифты! Отправляйтесь на Font Squirrel и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).

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

Обратите внимание: В разделе «Find fonts» в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.

Генерация требуемого кода

Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.

Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
Перейдите на Fontsquirrel Webfont Generator.
Выгрузите два ваших файла шрифтов используя кнопку Upload Fonts.
Поставьте галочку отмеченную «Yes, the fonts I’m uploading are legally eligible for web embedding».
Кликните по Download your kit.

После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.

Реализация кода в вашем демо

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

несколько версий каждого шрифта (например .ttf, .woff, .woff2 и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.
Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.
Файл stylesheet.css, который содержит сгенерированный @font-face код который вам нужен.

Для внедрения их в ваше демо следуйте следующим шагам:

Переименуйте распакованную папку на что-нибудь лёгкое и простое, например fonts.
Откройте файл stylesheet.css и скопируйте содержимое обоих @font-face блоков в ваш файл web-font-start.css — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.
Каждый из функций url() указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте fonts/ в начало каждого пути (настройте так как необходимо).
Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:

font-family: 'zantrokeregular', serif;

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

Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании @font-face кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают Adobe Fonts и Cloud.typography. Большинство из этих услуг на основе подписки, за исключением Google Fonts, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.

Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.

Отправляйтесь на Google Fonts.
Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.
Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
Когда вы выбрали семейства шрифтов, нажмите на панель [Number] Families Selected в низу страницы.
На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего <link> элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.
Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.

Обратите внимание: вы можете найти законченные версии google-font. html и google-font.css, если вам необходимо сверить вашу работу с нашей (см. live).

Давайте исследуем тот @font-face синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

Это называется «пуленепробиваемым @font-face синтаксисом», после публикации Пола Айриша (Paul Irish), с самого начала, когда @font-face начал получать популярность (Bulletproof @font-face Syntax). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:

font-family: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.
src: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (url путь) и формат каждого файла шрифта (format часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.
font-weight/font-style: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения font-weight/font-style для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. @font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.

Обратите внимание: вы также можете указать определённые значения font-variant (en-US) и font-stretch (en-US) для ваших веб-шрифтов. В новых браузерах вы также можете указать значение unicode-range (en-US), который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать

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

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

Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».

Дизайн, ориентированный на улучшение читабельности

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

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

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

Мы готовы отслеживать все нововведения в OpenType, улучшать эстетику текста с помощью пользовательских лигатур, подправлять недоработанные CSS-переносы слов и затем с умилением любоваться результатом, не отдавая себе отчёт, что оценить достоинства нашего шедевра способен разве что такой же фанат типографики. Безусловно, в определенный момент происходит возвращение к реальности и осознание того жестокого факта что текст нужен для того чтобы его читали и понимали обычные люди, причем на огромном разнообразии устройств начиная от компьютеров с Windows XP, мониторами на электронно-лучевой трубке и разрешением 72-DPI и заканчивая ноутбуками с Retina дисплеями и фантастическими смартфонами которые даже давление вам способны измерить.

“Качество шрифта не определяется тем кажется ли он красивым фанатам типографики. Текст, написанный хорошим шрифтом, должен, в первую очередь, легко читаться” — Оливер Райхенштайн (Oliver Reichenstein).

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

Итак, приступим.

Начнём с начала: исследование проекта

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

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

Контент

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

Учтите все элементы контента

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

Выражаясь на языке гипертекстовой разметки, вам нужно вычленить все элементы HTML. На данном этапе можно даже создать рабочие файлы HTML и CSS, поместить в них все элементы которые вы нашли и стилевые правила для них и сохранить Project-Typography.html. Как вы уже наверное догадались, он послужит основой для типографической системы проекта и пригодится при разработке отзывчивых элементов дизайна.

Определяем продолжительность чтения

Скорость чтения может колебаться от 100 до нескольких тысяч слов в минуту; большинство взрослых читают со скоростью 200-250 слов в минуту. Чтобы определить количество времени которое потребуется на прочтение конкретного текста, нужно просто поделить количество слов в нём на 250. Если в вашем распоряжении уже есть контент для проекта над которым вы работаете, его можно добавить в вашу любимую CMS и обработать простым скриптом, который подсчитает предположительную продолжительность чтения.

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

Оценка понятности и удобочитаемости

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

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

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

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

Расчет индекса удобочитаемости вручную для отдельных частей контента иначе как мазохизмом не назовешь, потому рекомендую взглянуть на удобный в использовании PHP-скрипт формирующий статистику относительно читабельности статьи, который был написан нашей командой Creative Nights для собственных проектов.

Контент-стратегия, информационная архитектура и микротекст

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

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

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

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

Контекст

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

Планшеты используются для презентаций, просматривания новостей в твитере за завтраком, а также чтения статей в туалете (все кто игнорирует этот факт, не понимают потребностей пользователей). 30-дюймовый монитор с разрешением в 96-DPI не идет ни в какое сравнение с мониторами следующего поколения компьютеров. Мы наслаждаемся универсальностью сети, но в то же время вынуждены учитывать огромное разнообразие пользователей и устройств.

Ограничения программного обеспечения

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

Скриншоты шрифтов Verdana, Proxima Nova, Arial, Adelle Sans и Georgia, кегль 16 пикселей (кроме Proxima, для него кегль 18 пикселей), сделанные в Firefox 18 на Windows 7. Proxima и Adelle рендерятся как веб-шрифты, остальные встроены в большинство ОС. Для скриншота верхних 5 строчек был предварительно отключён ClearType

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

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

Если поддержка Windows крайне важна для вашего проекта, советую использовать гарнитуры для которых хинтинг был произведен вручную, например TheSans Office от LucasFonts (эти ребята славятся своей любовью к хинтингу) или гарнитуры, разработанные для приложений Microsoft Office (их названия обычно содержат «Com», «Offc» или «Office»). Если поддержка аудитории пользующейся старыми версиями Windows не стоит того, чтобы выбирать для нее специализированную гарнитуру, можно ограничиться проверенными Arial, Georgia или Verdana.

Более детальную информацию по этому вопросу можно найти в статье «Внимательное изучение процесса отрисовки шрифтов» Тима Аренса (Tim Ahrens)

Ограничения со стороны оборудования

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

Символы выглядят по-разному даже на устройствах от одного производителя. На изображении шрифт Adelle, кегль 16 пикселей, на iPhone 3G, iPad 3 и iPhone 4S, изображение увеличено в Photoshop.

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

Тип интерфейса

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

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

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

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

Пользователь

В интернете нашей целевой аудиторией является любой пользователь, особенно когда дело касается многоязычного сайта. Если на кнопке места как раз впритык для надписи «Return» на английском, тогда для «Retour» на французском, «Zurück» на немецком, «Povratak» на хорватском и «Visszatérés» на угорском его может не хватить.

Проблема доступности материалов для пользователей с ограниченными возможностями

Дислексия — это расстройство при котором человек испытывает трудности со чтением. Мозг больного дислексией воспринимает символы как картинки, перекручивает буквы и отображает их в зеркальном отображении. Так, буква «а» с маленьким хвостиком в нижнем регистре, может показаться человеку, больному дислексией, неотличимой от курсивной «е».

Более того, людям, страдающим дислексией, трудно различать большинство букв геометрических гарнитур через схожесть форм и очертаний. «р» в зеркальном отображении напоминает «q», перевёрнутая «n» выглядит так же как «u». Это не значит, что нужно немедленно отказаться от большинства гарнитур в пользу специализированных, но осведомленность о таких вещах повышает общую грамотность веб-дизайнера.

И это еще не всё, в каждом четвертом случае дислексия сопровождается другим расстройством — дефицитарным расстройством внимания.

Утяжеление нижней части букв помогает их различать. На изображении шрифты Futura и Open Dyslexic

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

Люди с нарушенным цветовым зрением воспринимают буквы сглаженных шрифтов по-другому

Выбираем гарнитуру, ориентируясь на функциональность, а не на вид

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

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

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

Когда я встречаю Comic Sans в приглашении на детский утренник, первым делом (само собой), закатываю глаза. Но все же должен признать, что в этом случае он приемлем для аудитории: моих детей и их друзей. Однако если увижу что Comic Sans используется в презентации компании, я скорее всего психану.

Засечки против гротесков: с чего всё началось?

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

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

Мы часто забываем о том, что иногда нужно отстраниться и посмотреть на проект как на одно целое. Мне нравится как Виталий Фридман (Vitaly Friedman) и Еллиот Джей Стокс (Elliot Jay Stocks) объясняют выбор шрифта без засечек для основного текста на Smashing Magazine. Взглянув на структуру страницы и сайта, они сделали заключение:

«Так как в Smashing Magazine много визуального материала — скриншотов, кнопок и яркой рекламы — шрифт без засечек представился нам наиболее оптимальным и изящным решением для основного текста» — Виталий Фридман и Еллиот Джей Стокс.

Читаемость букв

Еще одним важным фактором читаемости является различие в начертании разных символов в одной и той же гарнитуре. Дизайнеры используют панграммы или короткие тестовые строчки чтобы оценить и сравнить гарнитуры, например популярные панграммы на латинице: «The quick brown fox jumps over the lazy dog», «Handgloves» and «Hamburgefonstiv».

Текст «aegh! iIl1 0O», который придумал дизайнер Джон Тэн, предоставляет дополнительные возможности. Он удобен для формирования представления о гарнитуре и определения насколько различимы «i», «I», «l» и «1» а также «0» и «O».

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

Избегайте использования букв с двусмысленным начертанием. Сверху вниз: League Gothic, Gill Sans, Myriad Pro, Neue Helvetica.

Вопрос интернациональности

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

В угорском языке часто можно встретить сочетание «gy», в иекавских диалектах некоторых южнославянских языков — «ij», часто встречаются диграфы («ch», «dž», «ij», «lj» и «ty») и триграфы («dzs» and «sch»), которые обычно передаются с помощью двух или трех отдельных символов соответственно.

Думаю вам будет интересно, что в итальянском языке буквы «k», «j», «w», «x» и «y» используются только для слов позаимствованых из других языков, причем некоторые из них используются только в разговорном языке — например “k” как вариант «c» под ударением — или что-то вроде того я услышал когда подрезал парнишку во время своего недавнего посещения Италии. Однако, я отклоняюсь от темы. Такой несколько укороченный вариант алфавита ведет к частому использованию комбинаций букв вроде «cc», «ll», «tt» и «zz» после или между «o» или «i». Как вы уже наверное догадались, такие сочетания могут негативно повлиять на читабельность.

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

Вы обязаны знать какие символы и сочетания встречаются в целевом языке

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

Художественный текст легче читать в знакомой гарнитуре, учебный — в незнакомой

Принято считать, что текст, написанный с использованием знакомой нам гарнитуры, читать легче (PDF, 11.5 MB). Даже эксперты, а именно Сюзанна Личко (Zuzana Licko) и Эрик Спикерман (Erik Spiekermann), утверждают, что легче читать текст в том формате который мы встречаем чаще всего. Изучите историю гарнитуры которую вы собираетесь использовать и сравните ее с гарнитурой, которая чаще всего используется для вашей аудитории.

Skolar, гарнитура созданная Дэвидом Брезина (David Brezina), была разработана для научных многоязычных публикаций, которые люди привыкли видеть в Times New Roman. Skolar нова и современна, и в то же время ее символы достаточно похожи на Times New Roman чтобы она была легко воспринята целевой группой пользователей. Она является хорошим беспроигрышным вариантом, но все же не помешает поэкспериментировать и попробовать другие варианты, которые могут прийтись по нраву вашей целевой аудитории.

Skolar в качестве замены для Times и Times New Roman. Можете различить два варианта Times?

Недавнее исследование на тему «Влияние отсутствия беглости речи на результат обучения» (PDF, 1.3 MB), которое провели Конор Диман-Юман (Connor Diemand-Yauman), Дениел М.Опенхаймер (Daniel M. Oppenheimer) и Эрика Б.Воэн (Erikka B. Vaughan), позволило определить, что информация, поданная с помощью трудночитаемых гарнитур, запоминается быстрее, чем информация, переданная посредством более читабельных гарнитур. Исследование показало, что снижение скорости чтения стимулирует более тщательную обработку информации, которая в свою очередь способствует улучшению запоминания. Это не значит, что нужно без раздумий выбирать самую странную гарнитуру в мире, но рассмотреть варианты, альтернативные популярной гарнитуре, все же стоит.

Гарнитуры в эпоху отзывчивого дизайна

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

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

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

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

Заголовок в одну строку, плохо читается на мобильных устройствах в гарнитуре League Gothic. При разбиении его на несколько строк, заголовок занимает слишком много пространства по вертикали.

![Иллюстрация][Использование для тех же целей Nimbus Sans Condensed и Nimbus Sans Extended]

Nimbus Sans Condensed и Nimbus Sans Extended в действии

Комбинирование гарнитур

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

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

Aller в комбинации с Minion Pro, Georgia и Adelle. Обратите внимание насколько явно Minion Pro и Georgia нуждаются в изменении интерлиньяжа

Беспроигрышный подход

Самым простым решением будет комбинировать шрифты руководствуясь родством гарнитур и здравым смыслом.

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

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

У JAF Bernino Sans есть несколько вариантов насыщенности и ширины. Буквы серого цвета являются имитацией курсива, также известные как “наклонная антиква”. Некоторые браузеры способны придавать буквам наклон с помощью CSS, но имитация курсива в типографике считается чуть ли не преступлением.

Гарнитуры созданные одним дизайнером часто хорошо сочетаются, так как их пропорции, форма, штрихи и углы — дело одних рук. Взгляните на гарнитуры которые создали Йос Буйвенга (Jos Buivenga), Вероника Буриан (Veronika Burian), Мэтью Картер (Matthew Carter), Никола Джурэк (Nikola Đurek), Эдриан Фрутигер (Adrian Frutiger), Хосе Скелион (Jose Scaglione), Марк Симонсон (Mark Simonson) и Эрик Спикерман (Erik Spiekermann) — и это лишь короткий список моих гуру — и попробуйте отследить почерк автора.

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

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

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

Инструментарий редактора

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

«Дизайнеры даже в серости находят очарование, в то время как читателю она вряд ли придётся по вкусу» — Эрик Спикерман

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

Мы несём ответственность

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

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

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

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

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

Требования к шрифтам

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

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

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

— Четкость

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

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

— Читабельность

Второе важное требование к используемым в дизайне шрифтам – это читабельность. Можно подумать, что четкость и читабельность являются практически идентичным понятием, однако в действительности это не совсем так. Читабельность определяет расположение шрифта, например, на странице веб-сайта. Здесь учитываются такие параметры, как интервалы между соседними строками абзаца (интерлиньяж), размер межбуквенного расстояния, цвет и стиль текста. Все эти параметры обеспечивают тот или иной уровень читабельности текстовой информации.

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

Группы шрифтов

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

— Шрифты с засечками

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

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

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

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

— Шрифты без засечек

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

— Рукописные шрифты

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

— Декоративные шрифты

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

Подбор шрифта

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

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

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

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

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

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

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

дизайнерских шрифтов для логотипов | FontSpace

Загрузить

Темный режим
Помощь Войти

Присоединиться бесплатно

Шрифты
Стили
Коллекции
Генератор шрифтов
(͡ ° ͜ʖ ͡ °)
Дизайнеры
Материал

2700

Связанные стили

Cool
Каллиграфия
Fancy
Надпись
Script
Рукописный ввод
Modern
1 Vintage
1 Винтаж
Кисть
Подпись
Декоративная
Elegant
Cricut
Плакат
Типографика
Craft
0 Брендинг
Приглашение
Графика
Журнал
Упаковка
Дисплей
Реклама
Разное

Фильмы

Этикетка
Продукт
Музыка
Веб-сайт
Мода
Фотография

Коммерческое использование

Сортировать по

Популярные
В тренде
Новейший
Имя