Как выбрать шрифт для сайта: Как и где выбрать шрифт для сайта – База знаний Timeweb Community

Я хочу использовать шрифт ‘Semplicita Pro’ с сайта https://worldofwarcraft.com/en-gb/ для моего собственного проекта веб-сайта, но я не могу найти файл шрифта на веб-сайте. Даже если я смогу…

Я вижу, что сжатый шрифт Driod Sans доступен на android , но из того , что я вижу, атрибут android:typeface может иметь только следующие значения — normal , sans , serif и monospace . Вопрос в том,…

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

Если я добавляю шрифт в свой FTP для моего сайта, когда я добавляю свой шрифт, где я помещаю его в FTP и как я использую шрифт с HTML или CSS ?

Я пытаюсь переопределить шрифт jQuery mobile по умолчанию для всего моего сайта. Я видел, что есть ролик темы jQuery, но я думаю, что это немного слишком, чтобы добавить целую тему только для того,…

Я использую Futura в качестве шрифта по умолчанию для моего веб — приложения: body { font-family:Futura, Verdana, sans-serif; font-weight: 100; } С тех пор как я добавил <meta name = viewport…

У меня есть UITextView с атрибутированным текстом , в котором я хочу выбрать новый шрифт ‘San Francisco’ для определенных частей текста. Однако я не могу найти шрифт из средства выбора шрифтов…

Я хотел бы написать скрипт AutoCad, который печатал бы текст, но я также хочу выбрать определенный шрифт (шрифт: txt). Как я мог это сделать? Спасибо за вашу помощь! Пока у меня есть только это:…

Я использую определенный шрифт, который & я хочу установить шрифт по умолчанию, если загрузка шрифта слишком высока. Поэтому я стараюсь: font-display: fallback; Он выглядит хорошо работающим (не…

Я пытаюсь выбрать собственный моноширинный шрифт на устройстве (iOS, но также и Android), но не могу найти никакой информации в документации CN1 о том, как это сделать. Возможно ли это на самом…

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

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

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

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

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

    -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
    

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

Начертание шрифта

Игнорировать шрифты с менее чем пятью вариантами начертания не всегда верно, но, как правило, шрифты, которые имеют большую вариативность толщины (100 — Thin (Hairline),200 — Extra Light (Ultra Light), 300 – Light, 400 – Normal, 500 — Medium), как правило, создаются с большей осторожностью и вниманием к деталям.

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

Отличный способ ограничить количество вариантов, — это провернуть переключатель до 10+ (для учета курсива):

В Google шрифтах, в частности, это вырезает 85% доступных опций, оставляя вам менее 50 без засечек на выбор.

Шрифты для выделения заголовка

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

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

Популярные шрифты

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

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

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

Например, сейчас активно используются шрифты Circe и Roboto

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

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

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

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

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

Каким должен быть шрифт для сайта?

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

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

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

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

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

Многие шрифты уже по умолчанию установлены на наших компьютерах и ноутбуках. Это такие шрифты, как: Arial, Georgia, Comic Sans MS, Times New Roman, Verdana, Tahoma и другие. Но если вы будете устанавливать нестандартный шрифт на сайт, следует помнить, что у посетителей вашего сайта может не оказаться такого шрифта, и страница будет отображаться не так, как вы задумали.

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

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

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

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

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

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

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

Цвет шрифта

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

Не следует делать яркие, кричащие цвета, а-ля синий фон и красный текст.

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

Сглаживание шрифта

В таких браузерах как InternetExplorer и Safari уже включено сглаживание шрифтов по умолчанию, это касается и маленьких и больших шрифтов. В остальных браузерах Opera, Mozilla, сглаживание начинается с 17-18 px., а мелкий текст остается без сглаживания.

В идеале должно выглядеть вот так:

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

Arial. Компактный шрифт, имеет преимущество благодаря высоте букв.

Tahoma. Подходит больше для технической тематики, имеет средне-широкие буквы.

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

Trebuchet MS. Не совсем подходит для чтения, даже при 12 px. приходится напрягать глаза.

Times New Roman. Шрифт имеет хорошую читаемость, используется во всех редакторах. Но при 12 px выглядит мелко.

MS Sans Serif. Системный шрифт Windows, хорошо читается при разных режимах.

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

Еще статьи по теме:

Как выбрать правильный шрифт? — Research Style

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

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

Такие сайты, как Medium, Signal vs. Noise и Zen Habits, это все равно, что студии йоги в мире контента. То, как на этих сайтах представлена информация, умиротворяет меня во время чтения и позволяет полностью сконцентрироваться на истории, ни на что не отвлекаясь.

Вы только взгляните на разницу между Meduim и Cracked:

Экспонат А) Medium

Экспонат Б) Cracked

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

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

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

Как мы читаем

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

Мы делим предложения на кусочки (саккады) и паузы (периоды фиксации). Вот путь сканирования типичного пользователя.

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

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

Почему правильный шрифт нам приятнее

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

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

Так мне казалось, пока я не не наткнулся на исследованиепсихолога Кевина Ларсона. Ларсон посвятил свою карьеру исследованиям шрифтов и недавно провел в Массачусетском технологическом институте (MIT) важное исследование о том, как шрифт и компоновка влияют на наши эмоции.

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

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

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

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

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

Влияние культуры на предпочтения в шрифтах

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

К примеру, шрифты Courier были созданы по образу и подобию старинных меморандумов, отпечатанных на машинке:

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

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

Настоящий сайт Банка Америки:

Сайт Банка Америки со шрифтом Impact (который ассоциируется с новостными заголовками):

Когда шрифт меняется на Impact, Банк Америки перестает внушать доверие.

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

Как сделать контент лучше

Качество контента — это, без сомнения, самое важное, но и то, как вы представляете этот контент (при помощи шрифтов и компоновки) заслуживает внимания.

Как говорил французский поэт Пол Клодель,

“Секрет шрифта в том, что он говорит.”

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

1) Выберите шрифт-якорь

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

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

Существует четыре основные категории шрифтов:

Шрифты с засечками (Serif fonts) — Буквы с коротенькими линиями, выходящими за края буквы. Считаются более формальными и традиционными. Лучше всего подходят для печати.

Шрифты без засечек (Sans-serif fonts) — Буквы без засечек. Считаются неформальными и игривыми. Лучше подходят для цифрового текста.

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

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

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

Вы же не хотите, чтобы читатель через слово спрашивал себя: “Это буква ‘а’ или ‘е’?”

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

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

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

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

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

У Хиш есть один трюк, который позволяет удостовериться в выборе шрифта. Она советует устраивать выбранным шрифтам Il1-тест:

2) Сделайте размер шрифта более 12 pt

В 1929 году было проведено исследование под названием “Гигиена чтения”. Исследователи пытались определить, какой размер шрифта больше подходит для чтения. Рассматривались следующие размеры шрифта: 6pt, 8pt, 10pt, 12pt и 14pt.

Исследователи пришли к выводу, что размер 10pt — самый эффективный для чтения. Однако, с 1920х годов многое в нашем восприятии изменилось.

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

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

Medium предоставляет одно из самых приятных (по моему личному мнению) пространств для чтения, а они используют шрифт размера 22px. На других моих любимых сайтах тоже используются шрифты размера более 20px:

Medium — 22px

37Signals: Signal vs. Noise — 22px

Zen Habits — 21px

Да, использовать шрифт размером более 30px скорее всего не лучшая идея, но многие блоги до сих пор пишутся шрифтом от 10px до 12px. Попробуйте немного увеличить размер своего тектса! Если у вас сейчас 12px — увеличьте до 16px, а если у вас 18px — попробуйте 22px.

Вы сами почувствуете разницу.

3) Следите за длиной строки

Длина строки — это расстояние, на которое простирается ваше предложение на странице. Идеальная длина строки находится в интервале от 50 до 75 символов.

Вот пример самой длинной строчки с сайта Zen Habits. В ней 78 символов и ее длина — около 6,5 дюймов (около 16,5 см):

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

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

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

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

Вот длина строки на вышеупомянутых сайтах:

Medium — 75 символов

37 Signals: Signal vs. Noise — 76 символов

Zen Habits — 78 символов

4) Следите за интервалами

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

Взгляните на еще один пример от Джессики Хиш: она сравнивает читабельность шрифтов Helvetica и Avenir. Хиш рекомендует Avenir, поскольку в нем интервалы больше:

Читатель чувствует себя лучше, если интервалы настроены правильно. Вот 5 рекомендованных комбинаций шрифтов, предоставленных Google Web Fonts. У этих шрифтов хорошие интервалы, подходящие для чтения больших блоков текста.

Я решил применить эти советы на практике в рассылке Crew. Вот сравнение первоначальной рассылки и рассылки с обновленным дизайном:

С новым шрифт и увеличенным размером содержимое рассылки стало ощутимо приятнее.

Правильно преподнеси контент — очень важно, а понимание, почему мы воспринимаем контент определенным образом, может помочь нам при создании дизайна для следующего проекта. Как пишет Аарон Уолтер, автор книги “Эмоциональный веб-дизайн”, –

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

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

Сначала хорошо напишите. Потом создайте хороший дизайн.

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

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

Некоторые из самых известных шрифтов с засечками включают Times New Roman и Georgia. Шрифт Times New Roman, в частности, подпадает под категорию классических веб-шрифтов . В целом, вы не ошибетесь, выбрав типы шрифтов по умолчанию, такие как этот, поскольку они обычно легко читаются и существуют уже давно, поэтому многие интернет-пользователи привыкли к ним.Тем не менее, если вы предпочитаете более смелый подход, мы рекомендуем попробовать такие шрифты, как Noe Display, Freight Text или Коллекция Portrait. Конечно, всегда есть шрифты с засечками Google, которые вы можете использовать бесплатно, например Playfair Display, Cormorant Garamond или Crimson Text и многие другие.

Шрифты Sans не имеют засечек на буквах (слово «sans» по-французски означает «без»), и они известны своим современным и чистым дизайном по сравнению с их аналогами с засечками.Helvetica, Tahoma, Verdana, Futura и Arial — все это примеры широко используемых шрифтов без засечек. Что касается бесплатных шрифтов, мы предлагаем попробовать следующие для бесплатной библиотеки шрифтов Google Fonts: Roboto, Source Sans Pro, Poppins, Heebo или Montserrat.

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

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

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

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

Лучшие шрифты для веб-сайтов и их выбор

Последний раз эта публикация обновлялась 17 июня 2020 г.

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

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

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

10 лучших шрифтов Google для веб-сайтов

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

Lato

Разработано: Łukasz Dziedzic

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

Forum

Дизайн: Денис Машаров

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

Barlow

Разработано: Джереми Трибби

Шрифт Barlow без засечек чистый и малоконтрастный, что делает его легко читаемым. Дизайн шрифта был вдохновлен номерными знаками Калифорнии и дорожными знаками.

Caudex

Разработано: Nidud

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

Poppins

Разработано: Indian Type Foundry

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

Questrial

Разработано: Joe Prince

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

Rozha One

Разработано: The Indian Type Foundry

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

Libre Baskerville

Разработано: Пабло Импаллари и Родриго Фуэнзалида

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

Montserrat

Разработано: Julieta Ulanovsky

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

Cormorant Garamond

Разработано: Christian Thalmann

Этот шрифт с засечками, основанный на шрифтах 16 века, привносит элегантный традиционный вид в веб-дизайн.

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

Как выбрать лучшие шрифты для вашего веб-сайта

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

01. Убедитесь, что ваши шрифты соответствуют тональности вашего бренда.

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

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

02. Оцените шрифты по важности

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

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

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

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

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

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

03.Изучите основы классификации шрифтов.

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

• Шрифты с засечками: Засечки — это небольшая линия в конце штриха в букве или символе. Шрифты с засечками считаются классическими и элегантными и в основном ассоциируются с печатью.Примеры включают Times New Roman, Georgia и Bodoni.

• Шрифты без засечек: Это шрифты без линий с засечками в конце букв. Гротески чистые, современные и часто нейтральные, что делает их идеальным выбором для веб-дизайна. Примеры включают собственный шрифт Wix Madefor, Helvetica и печально известный Comic Sans.

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

04. Примените текстовые темы

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

Заголовки: 30-70px

Субтитры: 22-30px

Абзац: 16-20px

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

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

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

Блейк Стимак

Менеджер сообщества и социальных сетей

Иден Спивак

Эксперт и писатель по дизайну

Как выбрать шрифты для веб-дизайна

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

Есть рекомендации по использованию бренда? Следуйте за ними.

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

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

Важность последовательности

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

Соответствие шрифтам существующего бренда

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

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

У вас еще нет шрифтов и руководств?

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

Определите индивидуальность вашего бренда

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

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

Выберите шрифты, соответствующие вашему бренду

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

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

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

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

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

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

Какие типы шрифтов подходят для Интернета и почему это важно?

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

Как комбинировать разные шрифты в веб-дизайне

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

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

Вот как это выглядит в действии: сначала определите основной шрифт, который является наиболее заметным и должен использоваться для заголовков. Совет: вы можете сопоставить этот шрифт со стилем вашего логотипа . Как правило, вы хотите, чтобы ваш основной шрифт привлекал внимание. Мне очень нравятся тяжелые шрифты, такие как Rubic Black, или слегка закругленные, такие как Nunito, для заголовков, но выбор шрифтов полностью зависит от вашего бизнеса и бренда.Затем выберите дополнительный шрифт, который будет использоваться для основного текста. Он должен быть легко читаемым при использовании для более длинных текстовых отрывков даже на маленьких экранах, поэтому мы могли бы выбрать шрифт, такой как Noto Sans, в дополнение к нашим основным параметрам шрифта. И, наконец, ваш третий шрифт должен быть акцентным шрифтом. Этот шрифт можно использовать для кнопок, призывов к действию или для выделения определенных частей текста, чтобы привлечь внимание посетителей. Такой шрифт, как Monserrat, будет хорошо работать с нашим основным и второстепенным выбором.

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

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

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

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

Скажи это шрифтом

–

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

Ваш веб-дизайн нуждается в прикосновении эксперта?

Работайте с нашими талантливыми веб-дизайнерами, чтобы создать что-то действительно уникальное.

Красивый Интернет: 10 лучших шрифтов для Интернета

Эрик Гровс

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

10. Арво

Arvo — это очень хорошее семейство плоских шрифтов с засечками, созданное Антоном Коовитом. Он имеет 4 различных варианта: от обычного и нормального курсива до полужирного курсива. Довольно редко можно найти полное семейство веб-шрифтов Slab Serif, и этот шрифт довольно близко удовлетворяет все наши потребности в сильных символах и высокой удобочитаемости.В сочетании с основным шрифтом без засечек Arvo отлично подходит для заголовков и субтитров.

9. Дисплей Playfair

Playfair — уникальный шрифт, созданный Клаусом Эггерсом Соренсеном. Нам он нравится больше всего за нетрадиционные, мягкие засечки и приятный курсив. У него классические контрастные буквы и нежные линии волос. Это один из наших лучших вариантов шрифта с засечками, помимо обычных шрифтов, таких как Georgia и Time New Roman. Обычно мы используем Playfair, чтобы добавить «классический» вид заголовкам и заголовкам сайтов.

8. Желтохвост

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

: Ваше агентство слишком велико?

7. Merriweather

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

6. Titillium Sans and Dosis

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

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

5. Алегрея

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

4. Open Sans

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

3. Альтернативная готика

Нам нравится этот шрифт, и мы используем его всякий раз, когда нам нужно смешать основной текст или добавить чистоту нашему сайту. Альтернативный готический стиль был разработан Моррисом Фуллером Бентоном как аналог Franklin Gothic, и он отлично смотрится, когда его используют в заголовках.Наряду с этим шрифтом нам очень нравится сочетание Alternate Gothic и Proxima Nova, которое используется вместе на сайте Grand Blue Mile.

2. Освальд и Абель

Если вы ищете сокращенный шрифт без засечек, который выглядит как League Gothic, Oswald — самый сильный соперник. Это отличный шрифт, вдохновленный классическими заголовками газет, и был разработан специально для бесплатного использования в Интернете и в редакционных материалах.

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

1. Тиса

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

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

ПОЗНАКОМЬТЕСЬ О ВАШЕМ БРЕНДЕ

Акция Артикул

Как выбрать лучший шрифт для вашего сайта?

• Чем шрифт отличается от шрифта и гарнитуры?
• Как выбрать идеальный шрифт для веб-сайта
• Какие приемы использовать для эффективного комбинирования шрифтов
• И многое другое!

Вот 7 ключевых шагов, которые вы должны сделать!

1. Определите характер вашего бренда
2. Определите цели текстов на вашем сайте
3. Убедитесь, что в шрифте правильные символы!
4. Проверить лицензию на шрифт!
5. Выберите основной и дополнительный
6. Шрифты Умело комбинируйте шрифты и получайте от них еще больше!
7. Внимание к разборчивости

Давайте посмотрим, как реализовать каждую из них на практике.

Вы когда-нибудь слышали, что изображение выражает более тысячи слов?

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

Как это сделать? Во-первых, вам нужно определить природу вашего бренда.

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

• Является ли это технической компанией или поставщиком эстетических товаров и услуг?
• Людям какого возраста и пола адресованы его предложения?
• Предназначены ли услуги или продукты для широкой или узкой аудитории?
• Это «бренд для всех»? Или цель точная, например, образованные женщины в возрасте 25-35 лет из больших городов?
• Каковы ценности данной компании и что она хочет донести до получателей?
• Является ли бренд элегантным или, может быть, юмористическим?

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

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

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

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

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

Итак, познакомьтесь с разделением шрифтов и целями, которые будут для них работать!

Шрифты в основном делятся на:

• Шрифты с засечками
• Шрифты без засечек
• Шрифты с скриптами
• Декоративные (экранные шрифты)

Когда использовать разные типы?

Ответ вы найдете ниже:

Newsreader — лучший пример шрифта с засечками

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

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

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

• заголовков,
• цитат,
• субтитров,
• логотипов , они
• слоган

Не следует использовать для написания основного содержания страницы.

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

Популярные шрифты с засечками: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.

Lato — пример шрифта без засечек

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

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

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

Популярные шрифты без засечек: Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers .

Это шрифты, имитирующие почерк.

Они элегантны и формальны, но также немного юмористичны. Среди них можно найти как очень (ОЧЕНЬ) орнаментальные, так и довольно простые шрифты.

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

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

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

Популярные скриптовые шрифты: Great Vibes, Lobster, Grand Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine .

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

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

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

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

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

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

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

Вы начали задумываться о выборе нескольких шрифтов? Хорошо!

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

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

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

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

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

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

Вы можете решить эту проблему двумя способами:

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

Что еще важнее при выборе шрифта, так это лицензия на утилиту.

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

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

Шрифты Вы любите несколько шрифтов, но не можете принять окончательное решение?

Помните, что вы не можете использовать слишком много из них. Оптимальное количество — 2-3 шрифта на сайте.

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

Большинство профессиональных веб-сайтов включают:

• Основной шрифт
• Дополнительный шрифт
• Акцентный шрифт (необязательно)

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

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

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

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

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

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

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

Вы можете использовать его, например, в кнопках CTA (Call To Action), которые должны привлекать внимание и генерировать клики. Акцентный шрифт также можно использовать для выделения основных частей текста или выделения цитат.

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

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

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

Лучше всего использовать следующие приемы:

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

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

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

Использование шрифтов из одного семейства позволяет быстро достичь указанной выше толщины (например, Open Sans и Open Sans Semibold). Многие шрифты имеют много вариантов — подумайте о том, чтобы объединить два из них на своем веб-сайте. Например, на нашей странице конструктора страниц BOWWE вы найдете различные версии шрифтов Roboto: шрифт Roboto, Roboto Condensed и Roboto Slab.

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

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

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

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

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

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

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

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

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

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

Какой шрифт на моем сайте лучше всего читается? Что влияет на читаемость текста

Взгляните на список ниже

Большинство шрифтов хорошо продуманы в этом аспекте.В качестве основного шрифта следует выбрать универсальный вариант (не — например, -narrow).

Слишком маленький интерлиньяж затруднит чтение. В идеале межстрочный интервал должен составлять не менее 120% регистра букв (150% часто считается оптимальным).

Еще больше удобочитаемости, если интервалы между абзацами немного увеличены.

Слишком много текста в одной строке и маленькие поля могут эффективно препятствовать чтению. Золотое правило говорит о 50-60 персонажах в стихах как об идеале.

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

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

• Заголовки: 30–70,
• Подзаголовки: 22–30,
• Обычный текст: 16–20

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

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

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

1. Определите суть вашего бренда.Шрифт призван выразить индивидуальность вашего бренда и соответствовать стилю вашей аудитории.
2. Определите назначение текстов на вашем сайте.
3. Убедитесь, что в шрифте есть все необходимые символы.
4. Убедитесь, что шрифт лицензирован надлежащим образом.
5. Выберите основной, дополнительный и (при необходимости) акцентный шрифт.
6. Грамотно подбирайте шрифты на своем сайте.
7. Не забывайте о разборчивости.

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

Как выбрать шрифт — пошаговое руководство! — Smashing Magazine

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

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

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

Дополнительная литература по SmashingMag:

Какова ваша цель?

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

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

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

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

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

Советы по повышению четкости:

• Выбирайте гарнитуры с обычными буквами . Буквенные формы, состоящие из уникальных форм, художественных деформаций, чрезмерного орнамента или других новаторских элементов дизайна, заставляют читателя сначала обрабатывать то, что он видит, а не просто воспринимать сообщение.Новизна всегда достигается за счет немедленного понимания.
• Выбирайте гарнитуры с большим интервалом . Точное отслеживание заставляет глаз заполнять визуальные промежутки между различными формами, составляющими разные формы букв, тем самым замедляя время, необходимое как для распознавания форм букв, так и структур слов и предложений. Большое расстояние позволяет глазам двигаться настолько быстро, насколько позволяют когнитивные навыки читателя.
• Выберите гарнитуры с высоким x-height .«Короткая» высота по оси x снижает разборчивость некоторых букв. Отверстия, или отверстия аналогичных строчных букв, таких как «c» и «e», выделяются с большей легкостью, если высота x велика. Обратите внимание на : высота по оси x не должна быть «высокой». Размер, толщину и ширину шрифта следует выбирать только в соответствии с высотой шрифта по оси x. Конечно, на первый взгляд один шрифт с большей высотой по оси x может выглядеть более разборчивым, чем другой, но последний просто установлен слишком маленьким (или слишком жирным или слишком сжатым).Кроме того, большая высота по оси x помогает только нескольким буквам, например e, s, a (с двухэтажной формой). Остальные символы (с подстрочными знаками, диакритическими знаками) страдают от большей высоты по оси x. (Спасибо Ральфу Херрманну за разъяснения!)

Читаемость

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

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

Быстрые подсказки для лучшей читаемости:

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

Убрав два наиболее субъективных фактора, давайте перейдем к соответствию .

Аспекты соответствия

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

Проектное намерение

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

Эстетика

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

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

Совет по оценке эстетики:

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

Настроение

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

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

Совет для определения настроения:

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

Персональный выбор

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

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

Подсказка о личном выборе

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

Несколько технических соображений

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

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

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

Советы по выбору гарнитуры

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

1. Планируйте свою иерархию

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

2. Подумайте, что уже сделали другие

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

3. Легкий эксперимент

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

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

4. Избегайте анахронизмов

Например, если вы не знаете конкретную историю шрифта, вы можете в конечном итоге использовать его так, чтобы выглядеть немного глупо.Что, если бы вы выбрали Траяна для иллюстрации заголовка статьи о Древней Греции? Это было бы непреднамеренным анахронизмом, поскольку Греция предшествовала Риму, а Траян был римским императором. Шрифт Trajan взят из «Колонны Траяна», которая является памятником военной победы около 100 года нашей эры. Просто нужно ответить «Траяну» на вопрос: «Каким шрифтом вы установили обложку этой книги о Древней Греции? ” заставит вас немного поежиться. Двойная проверка окупается. И иногда стоит быть нейтральным, выбирая что-то безопасное для академической темы, например, Арно.

5. Избегайте банальных корреляций

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

• Не используйте Papyrus только потому, что ваша тема в некотором роде «древняя», особенно если речь идет о Древнем Египте. (А еще лучше вообще не использовать Papyrus)
• Не используйте Comic Sans только потому, что ваша тема юмористическая.(А еще лучше вообще не использовать Comic Sans)
• Не используйте Lithos только потому, что ваша тема посвящена греческим ресторанам.
• Не используйте Futura только потому, что ваша тема касается «будущего».

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

6. Рассмотрим расширенное семейство типов

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

7. Придерживайтесь классических комбинаций

Когда вы застряли, делайте проверенное и верное, особенно если у вас очень сжатые сроки.Если вы выберете нейтральную комбинацию с засечками и без засечек, вы можете немного потерять «преимущество», но как минимум целостность вашего дизайна и сообщения не пострадает . Когда вы в последний раз обращались к Caslon или Univers и сожалели об этом? Признайтесь: вы никогда не добьетесь сотрудничества ITC Avant Garde Gothic и Trebuchet MS. Вместо этого обратитесь к уважаемым ресурсам, связанным с типографикой. Посмотрите, с чем согласны профессиональные дизайнеры. Вероятно, у вас уже есть классика, на которую вы найдете ссылки.Возможно, те же самые шрифты являются законченными и имеют высокое качество, что значительно упрощает их выбор. Вы подведете их, прежде чем они подведут вас.

8. Используйте ограниченную палитру

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

В этом примере мы объединили Bembo с различными шрифтами из Haptic Pro, семейства гарнитур, первоначально разработанного в 2008 году Хеннингом Хартмутом Скиббе.Что-то старое и что-то новое, и вы можете пройти долгий путь со своим собственным стилем:

Последний совет: нарушайте правила

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

Дополнительные ресурсы

Вам могут быть интересны следующие статьи и ресурсы по теме:

Как выбрать лучший шрифт для своего сайта | Domain.com

Создание сайта — увлекательная задача.

Когда вы садитесь создавать веб-сайт, вы сталкиваетесь с миром возможностей.

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

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

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

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

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

Что такое шрифт?

Шрифты — это «графическое представление текста, которое может включать другой шрифт, размер шрифта, толщину, цвет или дизайн.”

Вы слышали о Times New Roman или Arial? Как насчет Calibri и Comic Sans MS? Даже если вы не знали их по имени, держим пари, что вы узнаете их в лицо. Все это примеры разных шрифтов.

Почему типы шрифтов имеют значение?

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

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

Хотя Стив Джобс не изобретал гарнитуры (это был скорее Иоганнес Гутенберг и его старый добрый печатный станок), он произвел революцию в мире цифровой типографики, предоставив нам множество шрифтов, которые позволили нам визуально выразить себя.До его появления одним из наиболее распространенных шрифтов был Digi Grotesk. Вот пример того, как это выглядит, от фаната Fonts.

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

Типы шрифтов

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

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

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

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

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

Популярные шрифты, такие как Georgia, Century и Times New Roman, — это Serif. Это два очень известных шрифта, и вы не ошибетесь, используя их. Они безопасны для Интернета и легко читаются.

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

Шрифты без шрифта

Sans отличаются от шрифтов с засечками тем, что буквы не имеют засечек или декоративных штрихов. Знаете ли вы, что «без» по-французски означает «без»?

Эти буквы без украшений, поэтому они четкие, современные и чистые.Скорее всего, вы узнаете такие шрифты, как Helvetica, Verdana или Lucida Sans.

Если ваш сайт должен быть современным и понятным, попробуйте использовать шрифт Sans вместо Serif.

Выбор шрифтов для вашего сайта.

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

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