Как шрифт выбрать для сайта: Как подобрать правильный шрифт для своего дизайна

Как подобрать правильный шрифт для своего дизайна

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

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

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

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

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

Разборчивость очень важна

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

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

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

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

Самый часто задаваемый вопрос при выборе шрифта: с засечками или без?

Самые распространение категории шрифтов – это serif или sans serif. Serif – это шрифты с заческой на концах букв. Sans serif же, соответственно — шрифты, которые засечек не имеют.

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

Огромное количество хороших шрифтов существует и в той, и в другой категории. Можно намного лучше начать понимать шрифты, изучая различные классификации, такие как humanist, modern, slab serif, geometric, old style и transitional. Некоторые дизайнеры даже советуют создавать свои собственные категории для удобной работы с различными проектами.

Выбираем правильный шрифт для веб-сайта и используем их правильно

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

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

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

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

Выбор правильного шрифта для печати

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

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

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

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

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

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

Вывод

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

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

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

Источник: say-hi.me
Фото на обложке: ShutterStock

Шрифты для сайта — правила выбора и основные варианты сочетания

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

Основные группы шрифтов

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

Serif (с засечками)

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

Slab serif (прямоугольные засечки)

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

Script (пропись)

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

Blackletter (готический шрифт)

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

Sans serif (без засечек)

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

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

Handwriting (рукописный шрифт)

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

Decorative (декоративный)

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

Подборка и совмещение шрифтов

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

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

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

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

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

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

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

Как смешивать и использовать шрифты в тексте

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

Сайт должен быть читабельным

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

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

Не используете большое количество разных шрифтов

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

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

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

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

Не используйте неподходящие сочетания

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

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

Примеры объединения шрифтов

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

Заголовки:
Sentinel (serif slab)

Параграфы:
Gotham Narrow (sans-serif)

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

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

Заголовки и параграфы:
Freight Text Pro (serif)

Остальное:
Freight Sans Pro (san-serif)

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

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

Заголовки:
PMN Caecilia (slab serif).

Параграфы:
Gill Sans (sans-serif)

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

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

Заголовки и параграфы:
Skolar (serif)

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

Как подобрать шрифт для дизайн проекта

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

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

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

UX Buddy

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

Я работаю в GitLab, где мы назначаем UX buddy (UX-приятеля) к дизайнерам, недавно присоединившимся к команде, чтобы помочь им влиться в рабочий процесс (UX-приятель – просто дизайнер, которому поручено помочь новичку). Первые несколько месяцев ошеломляют новых дизайнеров, поэтому UX-приятели помогают им, объясняют, как все работает, и побуждают их делать определенные вещи. С этим курсом я хочу сделать то же самое для дизайнеров, у которых застой в карьере. Но вместо того, чтобы быть их приятелем только после того, как они присоединятся к компании, я хочу помочь со всем, что предшествует этому – поиск хороших UX-компаний, написание кейс-стади, собеседование и т.д.

Предстоящие воркшопы

Готовый сайт UX Buddy

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

Получите лучшую UX-должность

для заголовка страницы, и:

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

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

Выбор шрифта

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

Цель сайта и его контент

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

Основной текст или заголовки

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

Текст

Чтение текстового контента сайта, для которого мы проектируем дизайн, имеет фундаментальное значение. Иначе, как выбрать шрифт для чего-то, о чем вы не знаете? Необходимо читать образцы текста в самом начале процесса проектирования. Не используйте Lorem Ipsum, если вы не можете получить образцы контента, попробуйте найти аналогичный веб-сайт и «позаимствовать» его контент, пока вы не получите образцы текста.

Для UX Buddy у меня уже было название и ценностное предложение. Поэтому я мог приступить к работе.

Что я искал

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

Сначала я просмотрел такие шрифты в наборах Google Fonts и Adobe Fonts, но не смог найти подходящий. Например, я знал, что хочу, чтобы шрифт имел одноэтажные строчные буквы «a» и «g».

Двухэтажные «a» и «g» слева, одноэтажные «a» и «g» справа

Мне просто нравится их простота, и я подумал, что она хорошо сочетается с минималистичным и упрощенным брендингом, к которому я стремился. Я не смог найти подобные шрифты в этих наборах, поэтому я перешел на myfonts.com. Я нашел там пару отличных вариантов: Larsseit, Nexa, Axiforma, Mont, Sofia Pro и Gilroy. Я также знал, что хочу использовать полужирный в качестве основного стиля, чтобы вызвать чувство дружелюбия. На изображении ниже, шрифты представлены в основном цвете, который я планировал использовать.

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

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

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

Давайте вспомним руководящие принципы, которые я установил для брендинга проекта:

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

Сужение выбора

Взгляните на название UX buddy в шрифтах Larsseit, Nexa и Sofia Pro. Вы замечаете что-нибудь общее?

Вы заметили повторяющийся паттерн в букве «у»?

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

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

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

Вы замечаете треугольную форму строчной буквой «t» в шрифте Mont? Она сильно выделяется

Я сразу заметил кое-что интересное в шрифте Mont: строчная буква «t» имеет очень специфический стиль (взгляните на слово «better» на изображении выше). Это сильно выделяется. Мне это не понравилось, поэтому я убрал Mont. Axiforma и Gilroy показались мне действительно хорошими вариантами, поэтому я изучил их подробнее. Я решил написать ценностное предложение курса каждым шрифтом и провести их параллельное сравнение.

Делая выбор

Сначала мне понравилось, как строчная буква «f» в Axiforma выровнена с другими буквами в словах («Portfolio» на изображении ниже). Но также стало очевидно, что она выглядит немного странно, когда находится в конце слова («of» на изображении ниже). Это кажется неуравновешенным и странным.

Мне нравится поток букв «rtf», но в других словах он выглядит неуравновешенным

Кроме того, некоторые нижние выносные элементы в Axiforma завернуты вверх, что начинает выделяться в более длинном тексте, как в примере ниже. Посмотрите на строчные буквы «j» и «y».

Нижние выносные элементы в Axiforma завернуты вверх по самому краю, в то время как в Gilroy они резко обрезаются

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

В целом мне нравится, насколько сбалансированным выглядит Gilroy. Он хорошо согласуется с брендингом проекта, поэтому я решил использовать его. Я хотел, чтобы он выделялся на веб-сайте, поэтому я решил объединить его с системным шрифтом для основного текста. В этом случае системный шрифт является идеальным компаньоном, потому что нет более общего шрифта, чем шрифт, который пользователь видит повсюду на своем компьютере. San Francisco от Apple в Mac OS и Segoe от Microsoft в Windows хорошо смотрятся рядом с Gilroy, и именно эти шрифты увидит большинство посетителей сайта. На скриншоте ниже комбинация шрифтов для Mac OS:

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

Какой шрифт выбрать для сайта

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

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

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

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

Читабельность при выборе шрифта

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

Сделав написанное удобочитаемым, вы немедленно опередите по крайней мере половину своих конкурентов, что на самом деле здорово, потому что не так уж сложно!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Как выбрать гарнитуру шрифта?

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

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

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

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

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

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

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

Выбор пары

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

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

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

Саймон Коллисон (Simon Collison) использует в своем сайте идеально подобранные шрифты, выбирая мощный sans-serif для основных заголовков и простой Serif для всех прочих, меньших заголовков, а также для основного текста. Это партнерство искусно передает то, что пытается сказать вебсайт так, как не смог бы выразить каждый шрифт по отдельности.

Размер

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

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

Иерархия

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

Ее ключевой момент, о котором нужно помнить – то, что все относительно. Текст на сайте просто должен выделяться по сравнению с другими текстами. Возьмите как пример сайт Уилсона Майнера (Wilson Miner). Его заголовки довольно маленькие для своей важности и на удивление близки по размеру. Однако использование им цвета дает возможность различить самые важные заголовки и придает им больше веса.

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

Межстрочный интервал

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

С помощью свойства CSS line-height (высота строки) можно легко установить пробел между строками основного текста. В общем говоря, для больших текстовых блоков хороший размер – в 1,5 раз больше размера текста. У более мелкого текста должен быть меньший междустрочный интервал, а у огромного – большой. На самом деле не так сложно.

Трекинг

Трекинг – это пробел между знаками в тексте. Отмечу, что он – нечто непонятное, когда дело доходит до «практической разметки текста», тут CSS не дает нам сильно контролировать его. Обычно в маленьком тексте вам не придется об этом беспокоиться, это становится проблемой только для заголовков. В общем, при добавлении в CSS letter-spacing: 1px; или letter-spacing: 2px; между буквами будет достаточный интервал.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Цвет

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

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

Сетка

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

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

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

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

Выделение

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

Шрифты

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

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

У The Design Cubicle – очень уникальный логотип и дизайн. Он мощный, однако классный, привлекающий внимание, но изящный. Когда я смотрю на этот проект, у меня остается чувство высокого класса этого сайта. Он говорит мне: «Я знаю, что делаю».

Будьте небанальны

Сколько вы знаете вебсайтов с логотипом размером во все содержимое? Как насчет ультратонкого заголовка? В отличие от моего последнего пункта, быть небанальным – значит смотреть на то, что делают другие, а затем сделать все наоборот.

Ребята из Savvy Belfast умны. Они заметили, какими стесненными смотрятся большинство вебсайтов и решили заменить весь бессмысленный основной текст одним предложением.

Даже бросив на их сайт единственный взгляд на одно мгновение, вы не можете не запомнить их название.

Приводите свой дизайн в соответствие

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

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

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

Эмоциональный текст

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

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

Впервые посетив Solid Giant, я улыбнулся. Я улыбнулся в следующий раз, когда его увидел, и даже в следующий. Внезапно я ощутил родство с этим проектом. Эта большая, пушистая «G» слишком очаровательна, чтобы ее можно было забыть!

Если честно, я думаю, что это гениально.

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

Заключение урока о том какой выбрать шрифт для сайта

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

Как вы считаете, что самое важное в типографской разметке сайта? Оставьте свое мнение в комментариях!

Автор: Max Luzuriaga

Источник: //webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

25 великолепных веб-безопасных шрифтов для вашего сайта

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

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

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

Но что еще важнее, чтобы они были безопасными для Интернета шрифтами.

Что такое безопасные веб-шрифты?

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

Почему важны веб-безопасные шрифты?

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

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

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

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

Должен ли я использовать веб-безопасные шрифты для моего сайта?

Короткий ответ: Абсолютно.

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

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

Как добавить эти веб-безопасные шрифты?

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

Если вы все еще не уверены, просто выполните следующие несколько простых шагов:

1. Загрузите файл header.php
2. Скопируйте исходный / стандартный код шрифта (см. Ссылку 1)
3. Вставьте код в верхней части файла заголовка.
4. Загрузите свой style.css, поместите код шрифта, чтобы изменить текст шрифта по вашему выбору. (см. ссылку 2)

Ссылка 1

Ссылка 2
body {font-family: 'Abel'; font-size: 22px;}
25 Gorgeous Web Safe Fonts для вашего сайта
1. Arial
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
2. Calibri
 Ссылки / Источник: Fonts. com / Шрифт шрифта CSS 
3. Helvetica
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
4. Пользовательский интерфейс Segoe
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
5. Trebuchet MS
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
6. Камбрия
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
7. Palatino
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
8. Perpetua
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
9. Грузия
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
10. Consolas
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
11. Новый Курьер
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
12. Tahoma
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
13. Verdana
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
14. Optima
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
15.
 Gill Sans
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
16. Готический век
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
17. Candara
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
18. Андале Моно
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
19. Дидо
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
20. Копперская готика
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
21. Rockwell
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
22. Бодони
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
23. Франклин Готик
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
24. Влияние
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 
25. Calisto MT
 Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
Шрифтовые инструменты для проверки
В Интернете существует ряд инструментов, которые вы можете использовать для проверки и тестирования различных шрифтов, которые вы можете использовать для Ваш сайт, Если у вас возникли проблемы с выбором шрифта или вы просто хотите узнать, какие типы веб-безопасных шрифтов доступны, эти сайты — отличный инструмент для использования.
Шрифтовая пара
Шрифтовая пара предлагает массу ресурсов, плагинов, электронных книг, руководств, видеороликов и даже вдохновляет на что угодно и все, что связано с типографикой. У них даже есть раздел, который дает вам самые популярные шрифты, доступные в Google Fonts, и какие шрифты лучше всего сочетаются друг с другом.
Wordmark.it
Если вы хотите быстро просмотреть, как будет выглядеть ваш текст с определенным шрифтом, Wordmark.it дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах. Просто введите слово или фразу на панели своей главной страницы, нажмите «Ввод», и он покажет вам текст с разными шрифтами, такими как Candara или Lucida Console.
WhatTheFont
WhatTheFont это инструмент, который вы можете использовать для определения и идентификации шрифта, который вы видели в Интернете. Все, что вам нужно сделать, это просто загрузить изображение шрифта, и WhatTheFont перекрестно проведет поиск в своей базе данных, чтобы дать вам самые близкие результаты. Если вы все еще не можете найти точный шрифт, вы даже можете форум, чтобы обратиться за помощью.
Это все о шрифтовой игре
Если вы похожи на меня, то, скорее всего, вы проводите много времени в Интернете, читая и посещая тонны веб-сайтов. Из-за этого вы по достоинству оцените, когда веб-сайт использует хорошую типографику для дополнения визуального дизайна своего сайта.
Когда вы используете веб-безопасные шрифты, приятные для глаз, ваши пользователи будут благодарны и более охотно возвращаются и потребляют больше вашего контента. Чего же ты ждешь? Начните использовать эти шрифты и сделать потрясающий сайт для вашего бизнеса!
Как выбрать шрифт для сайта?
Выбор оптимального шрифта для сайта — это не только вопрос привлекательности дизайна сайта, но также и вопрос обеспечения необходимого уровня юзабилити. Ведь зачастую именно неверно подобранный шрифт на сайте приводит к нежеланию посетителей вчитываться в текстовый контент страниц и провоцирует их покидать сайт практически сразу после открывания. Как же выбрать шрифт для сайта правильно?

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

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

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

его гарнитура должна поддерживаться любым компьютером;
его размер должен быть удобным для большинства посетителей;
его цвет должен быть контрастным по сравнению с цветом фона.
 
Оптимальный размер основного шрифта на сайте составляет обычно 10-12 пунктов, а оптимальными цветами шрифтов считаются черный, темно-серый или темно-синий на белом фоне. Что же касается оптимальной гарнитуры шрифта, то выбор можно осуществлять среди так называемых безопасных шрифтов — тех, что поддерживаются всеми популярными операционными системами. Примерами безопасных шрифтов могут служить такие как Arial, Verdana, Impact, Georgia, Tahoma и др.

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

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

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

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


Теги:
 
как выбрать шрифт, 
шрифт для сайта, 
как выбрать шрифт для сайта, 
веб-дизайн, 
безопасные шрифты, 
дизайн сайтов, 
создание дизайна сайта
Как правильно подобрать шрифт для сайта
Создание потрясающих шрифтовых композиций – это скорее искусство, чем наука. Действительно, красота шрифтов не имеет границ. И хотя нет абсолютных правил их сочетания между собой, все же хорошо следовать лучшим практикам веб-типографики. В данной статье показаны лучшие приемы сочетания шрифтов, а также традиционные ошибки.
1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)
Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.
Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.
Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.
2. Избегайте шрифтов одного класса
Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».
На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к Slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.
А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon. Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.
3. Присвойте шрифтам разные роли
Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.
Отчетливый Rockwell Bold мы оставили для привлечения внимания к заголовку. В целом использовали уже открытую нами схему сочетания рубленого шрифта и шрифта с засечками. И даже при таком выборе у нас большое количество вариаций по размеру, весу и функциям шрифтов. В общей сложности использовались 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!
4. Контрастная насыщенность шрифтов
Самый лучший способ испортить макет – не разделить элементы текста друг от друга по их иерархии. Кроме использования разных размеров, убедитесь, что ваши шрифты разного веса (жирности), чтобы дать читателю «путеводитель» по вашему дизайну. 
На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.
Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.
5. Создайте на странице различную тональность текста
В типографии тональность достигается различными способами – толщиной, размером, шириной строк, кернингом и пр. Самый простой способ «увидеть» тональность – смотреть на макет не прямо, а боковым зрением. Посмотрите на пример внизу, направив взгляд немного справа или слева от картинки, так, чтобы вы уже не могли читать текст, но могли видеть его общий тон. При таком взгляде вы заметите, что пример слева сливается в один серый блок текста, немного темнее внизу. А вот пример справа отчетливо сохраняет свою визуальную иерархию. Как бы далеко вы не находились от текста, у вас не возникает сомнений по поводу того, где находится заголовок, и куда ваш взгляд перейдет потом.
Умное использование текстовой тональности усиливает визуальную иерархию на странице, что напрямую связано с передачей смысла сообщения.
6. Не смешивайте настроения шрифтов
Одна из частых ошибок – игнорирование присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!
На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.
Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.
7. Сочетайте яркое с нейтральным
Чистый, читабельные типографский дизайн требует внимательного отношения к намеренному и непреднамеренному напряжению между шрифтами. Столкновение разных личностей шрифтов – это только одна причина ненужного напряжения. Если один из шрифтов имеет яркую личность, то второй должен быть нейтральным.
На примере слева Dax Bold стоит рядом с Bernhard Modern. Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.
Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon, который относится к классу Old style, но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.
8. Избегайте несоизмеримых сочетаний
Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.
Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.
9. Будьте проще – не используйте более двух шрифтов
Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.
Как добиться всего этого без лишних усилий? Во-первых, если вы возьмете шрифты из одной и той же гарнитуры, то наверняка получите отличную визуальную совместимость даже не задумываясь над этим. Во-вторых, мы выбрали проверенную временем комбинацию – сочетание нейтрального заголовочного шрифта и опять же нейтрального шрифта для текста. И Helvetica Neue, и Garamond обладают выраженной, но нейтральной личностью, и они могут сочетаться в сложных макетах друг с другом, потому что мы изначально заложили строгую иерархию. Следование правилам при использовании правильных шрифтов помогает достичь высоких результатов без лишних затрат энергии.
10. Используйте различные размеры шрифта
Самый простой принцип мы оставили напоследок: используйте разные размеры шрифта для достижения контраста между ними. На примере слева заголовок и текст сливаются в один серый кирпич. Используйте боковое зрение — прием, описанный выше, — чтобы взглянуть на оба примера. В то время как левый текст сливается, в правом примере наблюдается огромная разница между заголовком и содержимым.
Справа использовались те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера. Использование шрифтов различных размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографике.
В заключение
Не существует жестких и быстрых правил комбинирования шрифтов, поэтому процесс принятия правильных вариантов отнимает много времени и, возможно, оказывается даже немного утомительным. Тем не менее, хорошо иметь под рукой удобный набор принципов и правил подбора шрифтов, а также понимать результаты некоторых типографских ситуаций, чтобы избежать ошибок и направить процесс в русло достижения нужного результата.
(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine (в ред. автора)
 Как выбрать шрифт для своего сайта 
 20 Dec 2019 Как выбрать шрифт для своего сайта 
 Одна из задач, которые мы ставим перед нашими клиентами на ранних этапах планирования, до того, как начнется проект веб-дизайна, — это выбрать шрифт для вашего веб-сайта. Для некоторых это может быть забавной задачей. В то время как другие боятся принимать решения о гарнитуре и шрифтах, не имея представления, как начать этот процесс. Поэтому мы составили это полезное руководство о том, что следует учитывать при выборе нового шрифта или гарнитуры для вашего веб-сайта.А также несколько советов и подсказок о том, где их найти.
 Выбор шрифта для нового веб-сайта 
 Рассмотрите свой существующий брендинг 
 Если у вас уже есть бизнес с логотипом и фирменным знаком, стоит подумать об использовании тех же шрифтов. Таким образом, создайте согласованный имидж бренда для вашей компании или организации в Интернете. Мы всегда рекомендуем использовать один и тот же шрифт из логотипа вашей компании в заголовках и тексте высокого уровня. При использовании шрифта, который дополняет это для текста и абзацев нижнего уровня.
 В качестве альтернативы, если вы все же хотите выбрать новый шрифт для своего веб-сайта, вы должны выбрать тот, который дополняет ваш существующий брендинг. Тот, который похож и не умаляет того, что у вас уже есть. Мы также предлагаем нашим клиентам услуги онлайн-брендинга и графического дизайна, если вы захотите провести ребрендинг.
 Учитывайте особенности вашего бизнеса 
 Основываясь на дизайне выбранного вами шрифта, вы представляете миру определенный образ вашего бизнеса с первого взгляда.Прежде, чем кто-либо прочитает вашу миссию или узнает больше о ваших продуктах или услугах. Так же, как цвет вызывает эмоции, шрифты тоже. По этой причине невероятно важно, чтобы вы выбирали шрифт для своего нового веб-сайта, который соответствовал бы общему тону вашей компании или организации и не создавал ложного имиджа.
 Всегда важно выбирать шрифт в зависимости от типа клиента, которого вы хотите привлечь. Например, если вы юрист, вы с большей вероятностью выберете традиционный стиль шрифта, который отражает профессиональный тип выполняемой вами работы.В отличие от причудливого шрифта, который больше подошел бы визуальному художнику или музыканту. Какой тип личности вы пытаетесь передать?
  Категории 
 Есть 4 категории шрифтов;
  Serif  — официальный и традиционный (например, Tiffany & Co, HSBC или Vogue)
  Без засечек  — Повседневный и игривый (Facebook, Google или Netflix)
  Рукописный  — Курсивные шрифты могут быть элегантными или игривыми. (Harrods, Ford или Coca-Cola)
  Декоративный  — Причудливый, креативный и веселый. (Дисней, Фанта или Лего)
 Стоит учитывать имидж бренда, связанный с этими стилями шрифтов. Решите, какой ваш бренд ближе всего к вашему с точки зрения их имиджа и индивидуальности, которые вы надеетесь продемонстрировать своей аудитории в Интернете. Гораздо проще выбрать шрифт, если вы сузили категорию шрифта, который ищете.
 Как шрифт может улучшить успех вашего бизнеса в Интернете 
 Взаимодействие с пользователем 
 Это очень важно! Пользовательский опыт чрезвычайно важен.У вас может быть самый красивый веб-сайт на планете и самые невероятные продукты. Однако, если пользователь не может прочитать шрифт на ваших веб-страницах, вам будет сложно удержать их на веб-сайте, не говоря уже о том, чтобы преобразовать их в клиентов или клиентов.
 Да, мы знаем, что современная каллиграфия сейчас популярна. (Не поймите нас неправильно, нам это тоже нравится!) Однако для этого есть время и место. Некоторые шрифты не так хорошо переводятся, особенно когда дело касается заголовков и призывов к действию. Это те области вашего веб-сайта, которые нам необходимо сделать так, чтобы они были удобочитаемыми и легко читаемыми.Обеспечение того, чтобы пользователь знал, какое действие мы хотим, чтобы он предпринял. Будь то «купите сейчас», «свяжитесь с нами», заполните контактную форму »или« свяжитесь с нами »и т. Д. Вы уловили идею.
 Также важно выбрать шрифт для вашего веб-сайта WordPress, который хорошо переводится с различными размерами текста и весами шрифтов. Поэтому он успешно используется во всех ваших кампаниях по брендингу и маркетингу. Некоторые шрифты отлично смотрятся в виде полужирного заголовка, но становятся менее разборчивыми, когда они превращаются в небольшой логотип на визитной карточке.Ваш шрифт должен быть совместим как в цифровом, так и в печатном виде.
 Выбор лучшего шрифта для вашего сайта 
 Нет ничего плохого в выборе одного шрифта. В качестве примера возьмем наш собственный сайт Primal Space. Где Монтсеррат использовался от логотипа компании и брендов до заголовков, призывов к действиям и основного текста. Однако единственный минус в том, что нужно проделать довольно много работы, чтобы создать контрасты в тексте. В данном случае это было успешно достигнуто путем изменения толщины, размера, регистра и высоты строки шрифта для создания контраста между акцентными шрифтами и основным текстом.В то время как цвет использовался, чтобы выделить важный призыв к действию. Таким образом создается более рациональный пользовательский интерфейс.
 Использование более одного шрифта на вашем веб-сайте 
 Мы считаем, что отличный веб-сайт состоит из двух шрифтов, которые хорошо дополняют друг друга. Рассмотрим форму треугольника. Верхний уровень — это шрифт, который используется меньше всего, но он отображается в заголовках и призывов к действию. Все, что вы хотите сделать в центре внимания на своих веб-страницах. Между тем нижняя часть треугольника относится к шрифту, который чаще всего используется на веб-сайте в виде абзацев и основного текста.Он должен немного отличаться от шрифта заголовка, но в то же время дополнять заголовок. Большинство веб-сайтов с каталогами шрифтов предлагают предложения о том, какой дополнительный шрифт работает с выбранным вами шрифтом заголовка. Подробнее об этом чуть позже.
 В некоторых случаях может быть исключение, когда используется третий шрифт. если вы снова рассмотрите треугольник, этот третий шрифт станет верхней частью и будет использоваться только как акцентный шрифт. Точно так же, как у вас будет акцентный цвет.Это часто встречается в более креативном дизайне веб-сайтов и часто представляет собой рукописный или декоративный шрифт. Который, если использовать его во всех заголовках и призыве к действию, был бы слишком силен. Если используется третий шрифт, его часто используют экономно.
 Мы никогда не рекомендуем клиенту использовать более 2–3 шрифтов, так как это отрицательно скажется на опыте пользователя.
 Где найти шрифты в Интернете? 
 Существует множество отличных веб-сайтов, чтобы выбрать шрифт для своего веб-сайта.Однако мы рекомендуем вам использовать Google Fonts в качестве начальной платформы выбора. Он содержит тысячи актуальных шрифтов и позволяет выполнять фильтрацию по желаемой категории и стилю. Он также предлагает шрифты, которые хорошо работают вместе, и позволяет экспериментировать с гарнитурами, размерами, стилями и начертанием. Кроме того, все шрифты Google Fonts полностью совместимы с WordPress. Поэтому мы никогда не столкнемся с техническими ошибками, которые могут привести к тому, что вам придется заплатить за покупку прав на использование пользовательского шрифта на своем веб-сайте.
 В случае, если требуется установка настраиваемого шрифта. Мы используем собственный CSS, чтобы добавить желаемый шрифт на ваш сайт WordPress. Примером этого из нашего портфолио является веб-сайт The Hairy Coo, где мы успешно использовали CSS, чтобы ввести в дизайн собственный шрифт Adobe.
 Хотя оба метода работают хорошо. Следует учитывать, что шрифты Google немного медленнее, чем загрузка шрифта. Или обслуживать его напрямую с того же сервера, что и сайт. В качестве дополнительного запроса необходимо обработать и просмотреть, что может немного снизить скорость загрузки.
 Лучшие шрифты для вашего нового сайта 
 Надеюсь, к настоящему времени вы должны лучше понимать важность выбора правильного шрифта для вашего веб-сайта, имитирующего желаемый имидж бренда. А также категории шрифтов и то, как они соотносятся с тоном и индивидуальностью, которых вы пытаетесь достичь. В результате сужения выбора шрифтов главное — это обеспечить.
 1) Ваш шрифт для вашего сайта удобен для пользователей
 2) Что он хорошо работает в цифровом и печатном виде
 3) Что он совместим с WordPress
 4) Он представляет ваш бренд и тип клиентов, которых вы хотите привлечь.
 Теперь, когда вы выбрали шрифты для своего нового веб-сайта, почему бы не прочитать дальше, чтобы узнать, как получить бесплатные стоковые изображения?
 Если вы хотите узнать больше о наших услугах, мы будем рады услышать от вас. Вы можете рассказать нам больше об идее своего веб-сайта, заполнив нашу форму требований к проекту веб-сайта. Один из наших сотрудников свяжется с вами, чтобы обсудить ваш проект и то, как мы можем вам помочь.
 Как выбрать шрифты для вашего сайта 
 Как выбрать правильные шрифты для своего веб-сайта 
 Привлекательные изображения, красивые цвета и удобный дизайн — залог успеха веб-сайта, как и шрифты, которые вы выбираете, чтобы рассказать свою историю.
 Знание того, какие гарнитуры наиболее эффективны в веб-среде, может означать разницу между веб-сайтом, который привлекает ваших посетителей или отвлекает их. Хотя существует множество шрифтов, из которых можно выбрать, лишь немногие из них пользуются успехом в Интернете.
 Вот некоторые основы шрифтов и несколько инструментов, которые помогут вам сделать лучший выбор для вашего веб-сайта. Если вам нужна дополнительная информация, обратитесь в компанию по веб-дизайну в Остине, которая может вам помочь.
  Прочтите нашу новую статью в блоге — Выбор правильных курсивных шрифтов — преодоление неестественного страха перед курсивными шрифтами 
  Serif vs.Без засечек 
 В мире типографики существует пять основных типов шрифтов: с засечками, без засечек, курсивом, фантазийным шрифтом и моноширинным шрифтом. Из них шрифты с засечками и без засечек используются для представления основного текста. Первый шаг в выборе шрифта для вашего веб-сайта — решить, нужен ли вам шрифт с засечками или без засечек, и узнать, чем они отличаются.
  Шрифты с засечками  имеют мелкие штрихи или линии, идущие от концов букв и символов. Они могут выглядеть как маленькие ножки, кепки, хвосты, флажки или точки.Поскольку линии делают каждый символ более отчетливым, текст с засечками легче читать. Шрифты с засечками веками использовались в печатных книгах, журналах и газетах и ​​являются предпочтительными шрифтами для текста, имеющего «гуманистическую тему».
 •  Рассмотрите шрифт с засечками для своего веб-сайта , если вы хотите передать одно из этих качеств: теплое, личное, артистическое, величественное, традиционное, консервативное или интеллектуальное. Шрифты с засечками эффективны в качестве заголовков, для основного текста и для документов, которые предназначены для загрузки и печати.
  Шрифты без засечек  простые и понятные, в них отсутствуют «линии» шрифтов с засечками («sans» по-французски означает «без»). Поскольку отдельные символы шрифтов без засечек менее различимы, их труднее читать. Отсутствие индивидуальных деталей также делает их менее индивидуальными. Эти шрифты обычно используются для заголовков газет, подписей к фотографиям и технических документов. Поскольку разрешения экрана компьютеров различаются, шрифты с засечками могут выглядеть размытыми на многих компьютерах. Простота шрифтов без засечек облегчает их чтение на компьютере.Они являются предпочтительным выбором для веб-сайтов и презентаций PowerPoint.
 •  Рассмотрите шрифт без засечек для своего веб-сайта , если вы хотите передать одно из следующих качеств: технический, крутой, чистый, четкий, молодой, современный или лаконичный. Шрифты без засечек эффективны в качестве заголовков, для общего текста и для текста с техническим содержанием. Однако шрифты без засечек также можно рассматривать как холодные и безликие.
 После того, как вы выберете шрифт с засечками или без засечек, следующим шагом будет определение шрифтов, которые наиболее эффективны и доступны в Интернете.
  Поиск общих шрифтов 
 ПК и Mac имеют разные операционные системы и, во многих случаях, разные шрифты. Новые шрифты были разработаны с момента появления компьютеров, и многие традиционные шрифты были адаптированы для каждой системы, некоторые с разной степенью успеха. В результате некоторые шрифты лучше смотрятся на ПК (например, Arial), а другие лучше всего смотрятся на компьютерах Mac (например, Helvetica и Geneva).
 В 1996 году был выпущен один новый шрифт — Verdana.Это шрифт без засечек с «гуманистическим качеством», который хорошо смотрится как на ПК, так и на Mac. По этой причине это один из самых популярных и широко используемых шрифтов в Интернете. (Примечание. В настоящее время вы читаете текст в Verdana.)
 Чтобы контролировать отображение текста веб-страницы, важно выбрать шрифт с засечками или без засечек, который предустановлен как на ПК, так и на Mac. Если на вашем веб-сайте используется шрифт, который не был предварительно установлен, браузер пользователя будет отображать вашу страницу с использованием шрифта браузера по умолчанию.Это изменит общий вид вашего веб-сайта. Этого можно избежать, выбрав шрифт, общий для обеих операционных систем.
  Выбор правильных шрифтов 
 Ниже перечислены несколько шрифтов, предустановленных на ПК и MAC. Выбрав один или несколько из этих шрифтов для своего веб-сайта, вы сможете управлять тем, как ваш текст будет отображаться в большинстве браузеров.
  Serif : Times New Roman или Georgia 
  Sans serif : Arial, Trebuchet, Verdana, (Andale Mono, Impact)
 Примеры этих шрифтов представлены ниже в различных размерах и стилях шрифта.
 После того, как вы выбрали шрифт для основного основного текста, пора выбрать шрифт для неграфических заголовков и подзаголовков. Это может быть тот же шрифт, что и ваш текст, или контрастный шрифт. Общий дизайн вашего сайта должен помочь вам решить, какой стиль лучше всего подходит для вашего сайта.
 Советы. Обдумайте сообщение, которое вы хотите передать на своем сайте. Помните об общем дизайне и визуальном оформлении вашего сайта. Посмотрите на другие веб-сайты в вашей отрасли, которые вам нравятся, и посмотрите, сможете ли вы распознать шрифты.Скорее всего, они будут использовать один из шрифтов из этого списка.
  Изменение размера текста 
 Теперь, когда вы выбрали шрифты, пора установить размер основного текста, заголовков, подзаголовков и других текстовых элементов.
 Для основного текста начните с наиболее распространенного и читаемого размера шрифта — 12 пикселей. Если 12px. выглядит слишком большим, попробуйте 10 пикселей. (Примечание: системные шрифты доступны в определенных размерах, таких как 8, 9, 10, 12, 14 и т. Д.) Визуальная высота и ширина отдельных символов могут варьироваться от одного семейства шрифтов к другому, а также от шрифтов с засечками и без засечек.Доверьтесь своему глазу, чтобы подсказать вам лучшие размеры.
  Предлагаемые размеры шрифта для этих текстовых элементов: 
 Текст: 10 пикселей или 12 пикселей 
 Основные заголовки: 14 пикселей, 16 пикселей или 18 пикселей 
 Подзаголовки: 12 пикселей или 14 пикселей 
 Подписи: 8 пикселей, 9 пикселей или 10 пикселей
 (Совет: Избегайте Тип 8px и 9px для основного основного текста. Большинство людей не будут тратить время на чтение такого маленького текста, особенно пожилые люди и люди с нарушениями зрения.)
  Добавление стиля 
 Вы можете добавить стиль и интерес к своему тексту за счет использования «атрибутов. Эти стилистические элементы вносят разнообразие и помогают лучше передать ваше сообщение. Наиболее распространенными атрибутами шрифта являются простой, полужирный, курсив, подчеркивание, заглавные буквы и цвет. При использовании эти элементы становятся частью общего дизайна вашего сайта. При умеренном использовании они могут быть эффективными. При чрезмерном использовании ваша страница может выглядеть загроможденной и непрофессиональной. Применяя атрибуты, будьте последовательны и помните, что «лучше меньше, да лучше».
 • Обычный: используется для основного текста на белом или светлом фоне и больших заголовков.
 •  Полужирный : используется для выделения, например, заголовков и подзаголовков, ключевых слов, текстовых меню и небольших блоков слов. Используйте экономно. Рассмотрите возможность использования полужирного шрифта для основного текста, когда светлый текст появляется на темном фоне.
 •  Курсив : используется для выделения, например, ключевых слов, цитат, фотографий, подписей и заголовков. Слишком много курсива трудно читать. Используйте экономно.
 • Заглавные буквы: используйте основные правила грамматики при использовании заглавных букв в тексте.Для заголовков вы можете использовать строчные или заглавные буквы в качестве первой буквы заголовка. (Пример: about или About)
 • ЗАГЛАВНЫЕ БУКВЫ: Избегайте использования всех заглавных букв, кроме очень коротких слов. Все заглавные буквы отображаются как БЛОКИ ТЕКСТА и могут отвлекать внимание и их трудно читать.
 • Подчеркнутый: избегайте использования подчеркивания на веб-страницах, потому что подчеркнутые слова можно спутать со ссылками.
 •  Цвет : используйте цвет, чтобы привлечь внимание (например, иди, остановись, смотри!), Или чтобы выделить слово или выделить группу слов.Убедитесь, что выбранные вами цвета дополняют ваш общий веб-дизайн. Используйте дополнительный цвет экономно, иначе ваш веб-сайт будет выглядеть загроможденным.
  Заключение 
 После того, как вы выбрали шрифты для своего веб-сайта, определились с размерами и атрибутами шрифта, ваш выбор будет занесен в таблицу стилей, которая будет определять, как текст будет отображаться на вашем веб-сайте. Любое желание изменить семейство шрифтов, размер и / или атрибуты для выделения текста на отдельных веб-страницах может быть выполнено через раздел администратора вашего веб-сайта.
 Хотя шрифты могут показаться не такими важными элементами дизайна, как цвет и графика, при выборе следует тщательно продумать их. Шрифты передадут важную информацию о вашей компании, товарах и услугах. Они помогут посетителям перемещаться по вашему сайту и взаимодействовать с вами. Прочтите о наших услугах по веб-дизайну и свяжитесь с нами, чтобы обсудить ваш веб-сайт и шрифты.
 Самое главное, правильные шрифты будут способствовать общему настроению вашего сайта и впечатлениям посетителей. Если это позитивно и приятно, значит, вы сделали правильный выбор.
 Заставьте эти элементы веб-сайта работать на вас:
 Цвет | Шрифты | Поисковые системы | Оптимизация
 Типографика 101: Как выбрать лучшие шрифты для веб-сайтов — Создание вашего веб-сайта 
 Типографика может быть очень мощным инструментом в создании общего положительного опыта пользователей на вашем веб-сайте. Лучшие шрифты для веб-сайтов могут помочь вам передать ваше сообщение намного эффективнее и привлечь посетителей. Хорошая типографика может означать разницу между сайтом любительского вида и профессиональным сайтом, поэтому важно выбирать шрифты с умом.Вот хорошее руководство для начинающих по выбору правильных шрифтов для вашего сайта.
 1. Шрифты вашего веб-сайта должны соответствовать имиджу вашего бренда 
 Выбирая лучший шрифт для содержания веб-сайта, не нужно следовать модным тенденциям и использовать их. Тенденции приходят и уходят, но ваш бренд и ваш сайт останутся надолго. Вы хотите выбрать шрифт, соответствующий индивидуальности и стилю вашего бренда. Необязательно проявлять смелость, если ваш бренд больше придерживается консервативных взглядов.Ваша аудитория почувствует разрыв между вашим брендом и дизайном вашего веб-сайта, если вы выберете шрифт, полностью противоположный имиджу вашей компании.
 2. Достаточно не более трех гарнитур 
 Нет ничего хуже, чем загроможденный и сбивающий с толку контент веб-сайта. Сохраняйте свой дизайн чистым, выбирая до трех хороших шрифтов для веб-сайтов. Слишком много разных шрифтов для веб-сайтов создают разрыв связи и создают впечатление, что одна группа текста не связана с другой.
 3.Узнайте о различных классификациях шрифтов и о том, как они обычно используются 
 При поиске хороших шрифтов для веб-сайта может быть полезно узнать о различных классификациях шрифтов и о том, когда они обычно используются. Например, шрифты с засечками широко используются в печатных СМИ, таких как книги и газеты. Они считаются более элегантными и классическими, и они нравятся более старшей аудитории. В последние годы они стали применяться к веб-сайтам, особенно к тем, дизайн которых ориентирован на рустикальный и винтажный стиль.
 Между тем, шрифты без засечек — одни из лучших шрифтов для веб-сайтов, поскольку они хорошо отображаются на экранах компьютеров и мобильных устройств. Они также выглядят современно, поэтому хорошо работают с веб-сайтами, аудитория которых состоит из гораздо более молодой аудитории.
 Наконец, шрифты Script относятся к рукописным шрифтам и делятся на формальные и случайные варианты. Эти гарнитуры, как правило, привлекают внимание к тексту, потому что они имеют тенденцию выделяться, но вы хотите использовать их больше в заголовках, а не в тексте абзаца.
 4. Немного перемешать 
 Не бойтесь смешивать разные стили шрифтов, чтобы найти лучшую комбинацию, которая будет представлять ваш бренд. В редакторе веб-сайтов Strikingly есть сотни шрифтов, с которыми вы можете поиграть. Если у вас учетная запись Pro, вы также можете загрузить свой собственный шрифт, чтобы сделать свой сайт более уникальным. Протестируйте все через редактор сайта и просмотрите свой сайт на разных экранах, чтобы получить хорошее представление о том, как ваша страница будет выглядеть с различными комбинациями шрифтов.
 Если вы хотите быть в безопасности, вы также можете использовать шрифты из того же семейства. Это группа шрифтов, которые могут различаться только по ширине, весу или ориентации, но не по дизайну в целом. Хорошим примером является семейство шрифтов Roboto. Вы найдете Roboto normal, который представляет собой шрифт без засечек, узкую версию под названием Roboto Condensed и шрифт с засечками под названием Roboto Slab. Вы можете комбинировать эти шрифты на своей копии.
 5. Подумайте о своем содержании 
 Ваш выбор лучших шрифтов для веб-сайтов также будет зависеть от вашего контента.Если у вас сайт с большим количеством текста, возможно, имеет смысл выбрать шрифты без засечек в тексте абзаца, чтобы он был удобнее для глаз. Использование скриптовых шрифтов в этой части контента может повлиять на удобочитаемость, особенно когда ваш сайт просматривается через меньший экран. Кроме того, если у вас много контента, не стоит использовать слишком узкие гарнитуры.
 Как выбрать правильные шрифты для своего веб-сайта 
 Выбор шрифта может оказаться сложной задачей. Существует бесконечное количество вариантов, и вы можете потеряться, пытаясь найти лучший шрифт, который демонстрирует настроение, которое вы пытаетесь изобразить.
 Хотя простых правил выбора наилучшего шрифта не существует, существует множество принципов, которые помогут вам выбрать подходящее решение.
 В мире шрифтов есть шрифты с засечками и без засечек.
 Что такое засечки? 
 Засечки — это тип шрифта, который включает хвост в верхней и нижней части буквы. Шрифты с засечками считаются более формальными и традиционными. К распространенным шрифтам с засечками относятся Times New Roman, Courier и Palatino, которые можно найти на всех компьютерах.
 Шрифты
 с засечками более читабельны, чем без засечек. Вот почему многие преподаватели требуют, чтобы документы были написаны шрифтом Times New Roman. Исследования показали более высокую скорость чтения и лучшее понимание при чтении шрифта с засечками.
 Шрифт без засечек — это шрифт без хвоста. Шрифты без засечек считаются неформальными и игривыми. К распространенным шрифтам без засечек относятся Helvetica, Arial и Futura. Шрифты без засечек читаются сложнее.
 По этой причине они чаще всего используются для коротких текстовых разделов, таких как заголовки или подписи.
 Размер шрифта
 создает настроение: 
 Размер вашего шрифта влияет на тон и значение, которые вы пытаетесь передать.
 Крупный шрифт может указывать на небезопасность, предполагая, что автору нужно заполнить место. Мелкие шрифты более удачливы для мощных сообщений.
 Еще один фактор, который необходимо учитывать, — может ли использование нескольких шрифтов улучшить сайт. Одна из тактик — выбрать два контрастных шрифта. Два явно разных шрифта могут создать напряжение или оживить страницу.
 Если два шрифта слишком похожи, общее сообщение на странице может быть скрыто. Использование одного шрифта с засечками и одного шрифта без засечек — хороший принцип для достижения баланса на вашем веб-сайте.
 Что и нельзя делать при выборе шрифтов: 
 Выбранные нами шрифты влияют на наших читателей.
 Вот что можно и чего нельзя делать при выборе шрифтов:
  У  выберите шрифт, который будет разборчивым и легко читаемым.
  Не используйте  слишком много шрифтов.У шрифтов есть семейства шрифтов, которые могут передавать широкий спектр эмоций. Шрифты могут быть обычными, курсивными, полужирными, полужирными, черными, круглыми или в нескольких других комбинациях. Хороший типограф сможет вызвать эмоции, используя только один шрифт.
  Не забывайте о межстрочном интервале. Строки, расположенные близко друг к другу, могут казаться переполненными и трудночитаемыми. Линии, которые расположены далеко друг от друга, кажутся более светлыми и открытыми. Более широкие линии также могут казаться пустыми, как если бы они пытались занять место.
  Не используйте  шрифты, такие как Papyrus или Comic Sans.Есть много других вариантов, которые могут и будут служить вам лучше, чем шрифт кеша. Эти шрифты будут раздражать дизайнера, из-за чего он будет менее склонен работать с вами над любыми дальнейшими проектами.
 Выбрал с умом: 
 Для вашего проекта не существует одного идеального шрифта, но может быть отличная комбинация. Шрифты с засечками и без засечек могут гармонично сочетаться на вашем сайте. Шрифты без засечек лучше всего подходят для заголовков, а шрифты с засечками — для длинных основных абзацев, поскольку их легче читать.
 Обратите внимание на размер шрифта, который вы используете. Слишком большой размер может показаться некомпетентным или требовательным, а слишком маленький — потерять четкость.
 Держитесь подальше от таких шрифтов, как Papyrus и Comic Sans. Будьте внимательны к своим пользователям и, если сомневаетесь, выбирайте легко читаемый шрифт.
 Теперь вы можете выбрать подходящий шрифт.
 Сайтов с бесплатными шрифтами: 
 Вот несколько веб-сайтов, которые я рекомендую, если вы ищете новые шрифты.
 Font Squirrel: На этом сайте есть отличный каталог бесплатных семейств шрифтов.
 DaFont.com: этот сайт содержит множество шрифтов, которые отлично подходят для заголовков. Однако будьте осторожны с промежутками между символами в каждом шрифте. На этом сайте много плохих шрифтов, для которых нужен кернинг, пробел между символами.
 Автор: Аарон Уорд 
 Выбор второго шрифта | Типографский веб-дизайн 3 
 Распространенное заблуждение состоит в том, что текст следует набирать шрифтом с засечками, а заголовки — шрифтом без засечек.Это не всегда необходимо. Вам не понадобились два шрифта (один с засечками и один без засечек), чтобы библиография работала на предыдущем уроке HTML / CSS. Если вы разумно используете размер, регистр и стиль, вы можете создавать элегантные, хорошо организованные решения практически для любого проекта, используя только один шрифт.
 Однако иногда вам нужно (или вы хотите) использовать два шрифта. В этой главе я покажу вам, как выбрать два шрифта для совместной работы.
 Тип дисплея: использование второго шрифта 
 Тип отображения (18 пикселей или больше, обычно используется для заголовков и кавычек) — распространенный способ добавления второго шрифта.
 Определите, что вам нужно 
 Первый шаг при выборе второго шрифта для типа отображения — спросить себя, почему вы хотите его использовать. Если ваша единственная причина — создать контраст, я рекомендую вам пересмотреть. Вы можете создать контраст с помощью одного шрифта, используя размер, цвет, регистр, толщину и расположение.
 Второй шрифт добавляет больше, чем просто контраст; он также добавляет голос к тексту. Второй шрифт передает эстетику или эмоции, которых нет в исходном шрифте.
 Чтобы выбрать нужный стиль второго шрифта, ответьте на пару вопросов:
 Какой дополнительный смысловой слой (коннотацию) вы хотите передать?
 Для чего вам нужен второй шрифт?
 После того, как вы ответите на эти вопросы, вы будете готовы искать отображаемый шрифт, соответствующий вашему тексту.
 Рассмотрим Concord и Contrast 
 Когда два шрифта используются вместе, они должны иметь правильный баланс согласования и контраста. Слишком большое сходство или контраст между шрифтами создает разногласия.
 Если два шрифта слишком похожи, они похожи на два оттенка одного цвета, которые не совсем совпадают, но кажутся необходимыми. Если у двух шрифтов нет ничего общего, им кажется, что они не принадлежат друг другу.
  Топ : Надя Сериф (в заголовке) в сочетании с Грузией.Шрифты слишком похожи, чтобы хорошо работать вместе. Недостаточно контраста.  Внизу : Надя Сериф и Вердана подходят лучше. Шрифты контрастируют штрихами и засечками, но имеют схожую структуру букв и высоту по оси x.
  Top : NeoRetroDraw в сочетании с Грузией. Шрифты слишком разные, чтобы работать вместе. NeoRetroDraw нарисован от руки, без засечек, заглавными буквами и геометрическими фигурами. В Грузии нет ничего из этого.  Bottom : NeoRetroDraw с Verdana лучше подходит, если типограф ищет второй шрифт, нарисованный вручную; оба шрифта без засечек.
  Top : Красивый ES в сочетании с Verdana. Шрифты слишком разные, чтобы работать вместе. В дополнение к контрасту между письменным и римским шрифтами, Beautiful ES имеет толстые и тонкие штрихи, которые обычно ассоциируются с более традиционными шрифтами. Штрихи Verdana более однородные, поэтому шрифт кажется менее традиционным.  Bottom : BlackJack with Verdana лучше подходит, если типограф ищет второй шрифт для сценария. BlackJack имеет меньший контраст между толстым и тонким, менее наклонный и менее традиционный вид, чем Beautiful ES.
 Хорошее практическое правило выбора второго шрифта — «Не соглашайтесь». Если отображаемый шрифт не соответствует настроению текста или не соответствует типу текста, продолжайте поиск. Всегда будьте готовы вернуться и разработать новые решения, а не соглашаться на неправильный шрифт.
 Если вы не можете найти нужный шрифт для дисплея, не используйте его! В последнем упражнении вы достигли согласованности, используя один и тот же шрифт. Вы создали контраст с помощью размера, веса или корпуса.
 При работе с двумя шрифтами необходимо учитывать их структуру (высота по оси x, форма чаши), штрихи (монолинии, толщина / тонкость), стили (шрифт, ретро, ​​рваные, нарисованные от руки) и засечки.Если слишком много одинаковых характеристик, шрифты, вероятно, слишком похожи. Если слишком много разных характеристик, вероятно, слишком большой контраст.
 Тип текста: использование второго шрифта 
 Тип текста (14–16 пикселей, обычно используется для текста) — еще один способ добавить второй шрифт. Использование второго шрифта для текста в Интернете становится все более распространенным по мере того, как становятся доступными более разборчивые, хорошо продуманные и легальные веб-шрифты.
 Определите, что вам нужно, во втором текстовом шрифте 
 Первый шаг в выборе второго шрифта для текста — спросить себя, почему вы хотите его использовать.Если ваша единственная причина — добавить аромата, потому что Джорджия и Вердана настолько распространены, я рекомендую вам пересмотреть. Вездесущий тип подобен вездесущему воздуху.
 Добавить второй шрифт для придания аромата — все равно что распылить освежитель воздуха, потому что вы хотите привлечь внимание к запаху комнаты. Иногда хочется, чтобы люди заметили, как пахнет в комнате (особенно если вы отлично готовите), но обычно это не так. Запах может быть навязчивым, отвлекая людей от намеченного опыта. Пытаться прочесть информацию и идеи через шрифт со вкусом — все равно что пытаться насладиться фильмом, когда парень позади вас носит слишком много одеколона.
 Чтобы выбрать второй нужный шрифт, задайте себе несколько вопросов:
 Как второй шрифт поможет вам уважать, разъяснять и делиться информацией и идеями в тексте?
 Для чего вам нужен второй шрифт?
 Учитывайте баланс и непрерывность 
 Согласие и контраст еще более важны, когда вы выбираете шрифт второго типа. Тип дисплея призван выделяться; его следует читать отдельно от текста.Однако текстовый тип обычно следует читать как непрерывную единицу.
 Второй шрифт придает тексту еще один голос. Он может подчеркивать или приуменьшать; он может озвучить разум или создать сказочное состояние. Это не должно заставлять читателей останавливаться на достигнутом (если, конечно, автор не намеревался произвести такой эффект). Как и в случае с отображаемым шрифтом, два текстовых шрифта не должны быть слишком похожими. Один из шрифтов будет выглядеть ошибочно или слишком контрастным.
  Top : DejaVu Serif в сочетании с Грузией.Шрифты слишком похожи, чтобы хорошо работать вместе.  Внизу : DejaVu Serif в сочетании с Verdana — лучшее совпадение. Шрифты контрастируют по штрихам и засечкам, но имеют схожую структуру букв.
  Top : Walkway Bold в сочетании с Грузией. Шрифты слишком разные, чтобы работать вместе. В дополнение к контрасту между шрифтами с засечками и без засечек, Walkway Bold имеет геометрические формы (чаша представляет собой идеальный круг) и более тонкую обводку. Даже смелая версия кажется легкой по сравнению с Грузией.  Внизу : PT Sans с Джорджией — лучший вариант. Шрифты контрастируют с засечками, но их формы чаши менее контрастны, а их толщина штрихов дополняет друг друга.
 При смешивании текстовых шрифтов постарайтесь найти два шрифта с похожей структурой. Избегайте значительных различий в размерах чаш (узкие / круглые / широкие), удлинения зажимов и спусковых элементов (длинные / короткие), высоты по оси x (большие / маленькие) и отверстий (открытые / закрытые). Если один из шрифтов кажется больше или меньше другого, балансируйте шрифты оптически, а не математически.
 Оптическая балансировка шрифтов. Размер шрифтов должен соответствовать их высоте по оси x. К сожалению, это правило не всегда возможно в веб-типографике, потому что вы не можете работать с шагом меньше одного пикселя. Но подойдите как можно ближе. Verdana 72px (слева) нужно уменьшить до 64px (в центре), чтобы соответствовать Джорджии 72px (справа).
 О шрифтах, используемых в этой главе 
 Семь новых шрифтов, используемых в этой главе, разрешены к использованию с @ font-face и доступны бесплатно от fontsquirrel. com.
 Советы 
 При выборе второго шрифта дисплея… 
 Определите, что вы ожидаете от шрифта.
 Сбалансируйте гармонию и контраст (не слишком похожи; не слишком различаются).
 Учитывайте структуры (высота по оси x, форма чаши), штрихи (монолинии, толщина / тонкость), стили (шрифт, ретро, ​​потертые, нарисованные от руки) и засечки.
 Не соглашайтесь на шрифт, который не работает.
 При выборе второго шрифта для текста… 
 Определите, как второй шрифт поможет уважать, разъяснять и делиться информацией и идеями в тексте.
 Создайте преемственность, уравновешивая согласие и контраст.
 Избегайте значительных отклонений в размерах чаш, удлинителей зажимных и спусковых элементов, высоты по оси x и отверстий.
 Баланс шрифтов оптически, а не математически.
 Как выбрать шрифт для проекта 
 Недавно я получил электронное письмо от дизайнера по имени Джаред. Он прошел уроки типографии, которые я предлагаю в рамках бесплатного курса, и был за них очень благодарен.Он сказал, что многому научился, но у него есть один важный вопрос: как мне выбрать шрифт для моего проекта?
 Он сказал мне, что работает в дизайнерском агентстве, и выбор шрифтов для веб-сайтов, над которыми они работают, — это то, чем он занимается постоянно. Это также очень его расстраивает, поскольку он никогда не изучал дизайн и типографику, поэтому в основном делает это «интуитивно». Или он копирует шрифт с понравившегося сайта. Он осознает свои ограничения, когда дело доходит до выбора оригинального шрифта, и его разочарование растет с каждым днем.И он не одинок.
 С тех пор, как я запустил свой бесплатный курс веб-типографии в 2017 году, я, как правило, получаю пару похожих писем каждый месяц. Я писал о выборе шрифтов более подробно в своей книге по веб-типографии, а также объяснил свой процесс на конкретном примере. Но не все покупают книгу, поэтому я решил снова объяснить свой процесс на другом примере — новом личном проекте, над которым я недавно начал работать.
 UX приятель 
 UX Buddy — это онлайн-курс для дизайнеров UX и продуктов, которые хотят сделать следующие шаги в своей карьере.Мне пришлось сменить много работ, прежде чем я нашел ту, которая соответствует тому, что я хочу делать, и тому, что  я должен делать . Поэтому я хочу поделиться своим опытом и помочь дизайнерам с меньшим опытом найти лучшую UX-работу.
 Я работаю в GitLab, где мы назначаем друга по UX новым дизайнерам, чтобы помочь им начать работу (друг по UX — это просто еще один дизайнер в команде, которой поручено помогать новому дизайнеру). Первые несколько месяцев являются непосильными для начинающих дизайнеров, поэтому друзья по UX помогают им, направляя их, объясняя, как работают вещи, и побуждая их делать определенные вещи.В этом курсе я хочу сделать то же самое для дизайнеров, которые застряли в своей UX-карьере. Но вместо того, чтобы быть их другом только после того, как они присоединятся к компании, я хочу помогать во всем, что происходит до этого, — в поиске хороших UX-компаний, написании тематических исследований, собеседовании, поддержке и т. Д.
 Готовый сайт для UX Buddy (Источник)
 Вот откуда пришла идея UX Buddy и каковы его цели. Это действительно хорошая отправная точка для определения брендинга.Поскольку курс основан на моем опыте соискателя работы, а также в качестве интервьюера в процессе приема на работу, я хотел, чтобы брендинг отражал мою личность. Я хотел, чтобы он был минималистичным, но не бесплодным. Тепло, но не непрофессионально.  В точку  вместо  бьется по втулке .
Затем я провел двухдневный дизайн-спринт, чтобы придумать ценностное предложение курса и некоторый контент для веб-сайта. Целью было представить курс на единой веб-странице. Я придумал:
 Получите лучшую работу UX
 для заголовка страницы и:
 Этот курс не только о создании вашего UX-портфолио, он о том, чтобы вы получили отличную UX-работу, на которой вы будете выполнять лучшую работу в своей жизни.
 за ценностное предложение. Это было здорово, и этого более чем достаточно, чтобы начать работу над сайтом и, соответственно, выбрать шрифт.
 Выбор шрифта 
 Хорошо, а как нам выбрать шрифт для нашего проекта? В своей книге по веб-типографике я рекомендую рассмотреть семь вещей, ключевые три из которых следующие:
 Цель сайта и его содержание 
 Цель здесь — представить мой новый курс и меня как надежного и способного человека преподавать по этой теме.Сайт не предназначен для чтения длинных статей, он должен быстро привлечь внимание посетителей.
 Основной текст или заголовки 
 Выбираем ли мы шрифт для основного текста или для заголовков? Поскольку цель — заинтересовать посетителей, я хотел сосредоточиться на выборе правильного шрифта для заголовков.
 Текст 
 Чтение текста, для которого мы разрабатываем, имеет фундаментальное значение. Как выбрать шрифт для того, о чем вы не знаете, о чем он? Чтение образцов текста должно происходить в самом начале процесса. Не используйте Lorem Ipsum, если вы не можете получить образцы контента, попробуйте найти аналогичный веб-сайт и «одолжите» его контент, пока не получите их.
 Для UX Buddy у меня уже было название, ценностное предложение и название. Так что я был в порядке.
 То, что я искал 
 На этом этапе у меня был некоторый текст, с которым нужно было работать, я знал, какова его цель, и я также знал, что сосредотачиваюсь на поиске идеального шрифта для заголовков. Это, в сочетании с брендингом, отражающим мою личность, привело меня к использованию геометрического шрифта без засечек, моего любимого стиля.Если вы не знаете основные стили шрифтов и не знаете, как их различать, ознакомьтесь с моим руководством по распознаванию стилей шрифтов. Это самый первый шаг к выбору оригинального шрифта.
 Сначала я просмотрел шрифты этого стиля в Google Fonts и Adobe Fonts, но не нашел соответствия. Например, я знал, что хочу, чтобы шрифт имел одноэтажные стили строчных букв «a» и «g».
 Двухэтажные «а» и «г» слева, одноэтажные «а» и «г» справа.
 Мне просто нравится их простота, и я подумал, что она хорошо сочетается с минималистичным и упрощенным брендом, который мне нужен.Я не смог найти подобных шрифтов у этих поставщиков шрифтов, поэтому продолжил поиск на myfonts.com. Я нашел там пару отличных совпадений: Larsseit, Nexa, Axiforma, Mont, Sofia Pro и Gilroy. Я также знал, что хочу использовать жирный шрифт в качестве основного стиля, чтобы вызвать это чувство дружелюбия. Вот они, уже установленные в основном цвете, который я планировал использовать.
 Обратите внимание, что Larsseit использует двухэтажный стиль для буквы «а», но можно переключиться на одноэтажный стиль с помощью функции альтернативных стилей OpenType.
 Интересно, что все эти шрифты были разного веса и имели хорошую поддержку OpenType и языка. Шрифты с myfonts.com также можно сразу загрузить как веб-шрифты, поэтому я знал, что с их размером в килобайтах проблем не возникнет. С этими заверениями я сосредоточился на стилях шрифтов. Далее я установил текст, с которым мне приходилось работать, для каждого из этих шрифтов и внимательно изучил их. Я начал с названия проекта.
 Примечание: я с самого начала знал, что хочу сделать логотип предельно простым.Так что я стремился создать логотип, состоящий только из текста.
 Давайте вспомним правила, которые я установил для брендинга проекта:
 Минималистичный, но не стерильный
 Тепло, но не непрофессионально
  В точку  вместо  бьется вокруг куста  Они отлично подходили для следующего шага сужения списка и выбора.
 Сужение 
 Взгляните на имя UX-приятеля, установленное в Larsseit, Nexa и Sofia Pro ниже.Вы замечаете что-нибудь общее?
 Вы замечаете повторяющийся узор в букве «у»?
 Обратите внимание на букву «y». Видите, насколько резким и резким это кажется? Это выглядит холодно и формально. Возможно, даже стерильным, особенно по сравнению с тремя другими шрифтами, у которых спусковые элементы слегка изогнуты (Gilroy справа на изображении ниже).
 Два стиля спуска: очень острый, крутой и холодный слева, закрученный и при этом чуть теплее и приятнее справа.
 Это не соответствовало бренду, который я имел в виду, поэтому я сразу удалил эти три шрифта. Теперь у меня остались Аксиформа, Монт и Гилрой. Давайте посмотрим, как выглядит заголовок страницы в сочетании с ними.
 Вы замечаете треугольную форму строчной буквы «t» в Mont? Это слишком сильно выделяется.
 Я сразу заметил кое-что интересное в Mont: строчная буква «t» имеет очень специфический стиль (взгляните на слово «лучше» на изображении выше).Настолько, что это выделяется. Мне это не понравилось, поэтому я исключил Монт. Аксиформа и Гилрой казались действительно хорошими вариантами, поэтому я изучил их еще больше. Я решил сформулировать ценностное предложение курса одним предложением в каждом из них и провести параллельное сравнение.
 Делаем выбор 
 Сначала мне понравилось, как строчная буква «f» в Axiforma сочетается с другими буквами в словах («Портфолио» на изображении ниже). Но теперь также стало очевидно, что это выглядит немного странно, когда стоит в конце слова («из» на изображении ниже).Выглядит неуравновешенно и странно.
 Мне нравится поток букв «rtf», но, другими словами, он выглядит несбалансированным.
 Тут прояснилось кое-что еще. Некоторые из спусковых элементов в Axiforma закручены вверх, что начинает выделяться в более длинном тексте, подобном этому. Обратите внимание на строчные буквы «j» и «y».
 Нисходящие элементы в Axiforma загибаются вверх на самом краю, в то время как в Gilroy они обрезаются несколько резко.
 Гилрой тоже не идеален, мне не нравятся кавычки и запятая.Стиль от Axiforma выглядит намного дружелюбнее и теплее.
 Но в целом мне нравится, насколько гармонично выглядит Гилрой. Это также хорошо согласуется с тем, чего я хотел достичь для брендинга проекта, поэтому я решил использовать его. Я хотел, чтобы он выделялся на веб-сайте, поэтому решил объединить его с системным шрифтом для основного текста. Системный шрифт — идеальный компаньон в этом случае, потому что какой шрифт более общий, чем шрифт, который пользователь видит повсюду на своем компьютере? Apple San Francisco в Mac OS и Microsoft Segoe UI в Windows хорошо смотрятся рядом с Gilroy, и это шрифты, которые увидит большинство посетителей.Вот последняя комбинация, как она выглядит в Mac OS:
 На этом мы завершаем практический пример выбора шрифта. Я с самого начала установил правила брендинга и придумал контент, с которым мог бы работать. С этого момента я стал искать подходящие шрифты и продолжал сужать список до тех пор, пока не остался лучший вариант. При таком подходе я получаю выбор шрифта, который хорошо согласуется с целью проекта и его брендингом, но также хорошо сочетается с его содержанием. Это намного лучше, чем использовать шрифт, который всего лишь  хорошо смотрится на веб-сайте, на который я наткнулся .
 Между прочим, если UX Buddy звучит как интересный курс, вы уже можете присоединиться к списку ожидания, и вы будете одними из первых, кто узнает, когда он будет запущен!
 Улучшите типографику на своем веб-сайте 
 Присоединяйтесь к более чем 20 000 дизайнеров и разработчиков, получите 7 бесплатных уроков и улучшите свои навыки веб-типографики.
 Получите бесплатные уроки
 Просто классная веб-типографика, без спама.
 Об авторе 
 Матей — старший дизайнер продуктов в GitLab и автор проекта Better Web Type.Родом из Словении, но его страсть к простому и удобному дизайну привела его в путешествие через Германию, Люксембург, Лондон и весь путь до Эдинбурга в Шотландии. Он процветает в серой зоне между дизайном и разработкой.
 @matejlatin | matejlatin.co.uk
 Комментарии 
 Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
 CSS шрифтов 
 Выбор правильного шрифта для вашего сайта очень важен!
 Выбор шрифта важен 
 Выбор правильного шрифта имеет огромное влияние на то, как читатели воспринимают
интернет сайт.
 Правильный шрифт может создать сильную идентичность для вашего бренда.
 Важно использовать легко читаемый шрифт. Шрифт добавляет
значение вашего текста. Также важно выбрать правильный цвет и размер текста.
для шрифта.
 Общие семейства шрифтов 
 В CSS существует пять общих семейств шрифтов:
  Шрифты Serif  имеют небольшой штрих по краям каждой буквы. Они создают ощущение формальности и элегантности.
  Шрифты без засечек  имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный вид.
  Моноширинный  шрифтов — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
  Курсивный шрифт  имитирует человеческий почерк.
 Шрифты
  Fantasy  — это декоративные / игривые шрифты.
 Все различные имена шрифтов принадлежат к одному из общих семейств шрифтов.
 Разница между шрифтами с засечками и без засечек 
  Примечание:  На экранах компьютеров шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.
 Некоторые примеры шрифтов 
 Общее семейство шрифтов
 Примеры названий шрифтов
 Serif
 Times New Roman 
 Джорджия 
 Гарамонд 
 Без засечек
 Arial 
 Verdana 
 Helvetica 
 Моноширинный
 Courier New 
 Lucida Console 
 Monaco
 Курсив
 Brush Script MT 
 Lucida Рукописный ввод 
 Фантазия
 Медная пластина 
 Папирус
 Свойство 
 семейства шрифтов CSS
 В CSS мы используем свойство  font-family  для
укажите шрифт текста.
 Семейство шрифтов  Свойство  должно содержать несколько имен шрифтов в качестве «резервной» системы,
для обеспечения максимальной совместимости между браузерами / операционными системами.
No related posts.