1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Содержание

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

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

Немного матчасти

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

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

Serif – шрифты с засечками. Больше подходят для строгого «типографического» дизайна и версий для печати. Примеры: Times New Roman, Georgia, Droid Serif, Noto Serif, PT Serif.

Sans serif – шрифты без засечек. Подходят в сущности для любых проектов. Обычно используются, как основные шрифты для текстов сайта. Примеры: Verdana, Arial, Roboto, Open Sans, PT Sans.

Cursive – шрифты, стилизованные под рукопись. Подходят в основном для проектов, касающихся искусства. Не рекомендуется использовать где-либо, кроме заголовков. Примеры: Comic Sans, Neucha, Bad Script.

Monospace – моноширинные шрифты. Обычно используются для вывода исходных кодов или стилизации текста под печатную машинку. Примеры: Courier New, Lucida Console, PT Mono.

Fantasy – шрифты с необычным начертанием. Обычно используются в заголовках. Примеры: Copperplate, Impact, Comfortaa, Forum.

Как избежать типичных ошибок со шрифтами?

Большинству дизайнеров свойственны две ошибки при подборе шрифтов.

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

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

При подборе шрифтов для сайта важно придерживаться нескольких простых правил:

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

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

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

О лицензиях

Не секрет, что в сети можно скачать практически какой угодно контент, даже если это незаконно и нарушает авторские права. Шрифты — не исключение. В сущности большая часть шрифтов позиционируется, как свободная для личного пользования. То есть вы можете скачать шрифт с сайта и использовать его на своём компьютере. Но далеко не все шрифты разрешены лицензиями для использования на сайте. Часто дизайнеры игнорируют этот факт. И в результате процесс встраивания шрифта на сайт превращается в целую эпопею. Чтобы не создавать проблем разработчикам, дизайнеру следует придерживаться простого правила: использовать только свободные для использования на сайтах шрифты. Лучший вариант — использовать сервис Google Fonts. Он автоматически встроен на ucraft. На этом сервисе на момент написания статьи размещено 847 бесплатных шрифтов, что предоставляет практически исчерпывающие возможности для подбора шрифтов на сайт.

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

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

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

Основной шрифт — Verdana. Шрифт навигации — Lato. На баннерах — Carter One.

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

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

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

Читать еще:  Что можно приготовить на ужин

Например, обратите внимание на шрифты, органично сочетающие элементы классики с новыми нестандартными решениями. Заголовки — Playfair Display. Основной — Raleway. Навигация — как и в прошлом примере, Lato.

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

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

Представляете свой собственный стиль? Шрифт должен соответствовать.

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

Шрифт заголовков — Amatica SC. Основной шрифт — Roboto.

Шрифт Amatica SC подчёркивает живой творческий характер практически любого вида искусства. Шрифт Roboto – весьма популярное в наше время шрифтовое решение, простое легко читаемое, и идеально совместимое с любыми устройствами.

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

Не затрудняйтесь в выборе шрифтов для бизнес-сайтов. Они не должны отвлекать от получаемой информации. «Всё гениальное — просто». Заголовки и навигация — Lato. Основной шрифт — Raleway.

Шрифты лёгкие и современные. Это позволяет не отвлекать пользователя от как таковой информации.

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

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

Шрифт макета — Lato.

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

Как передать настроение с помощью шрифта?

Весёлый шрифт заголовков с весёлым названием Annie Use Your Telescope придаёт сайту радостный озорной колорит, что помогает создать легкую и радостную атмосферу. Он хорошо сочетается с уже упоминавшимся шрифтом Lato.

Шрифт заголовков — Annie Use Your Telescope. Шрифт текстов — Lato.

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

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

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

1. Заголовки и текст

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

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

Пример: заголовки – Verdana, текст – Arial.

2. С засечками или без?

Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати. На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.

Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста. При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой.

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

Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.

3. Сочетание цветов

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

Естественно, тестируйте сочетаемость цветов не только между собой, но и на сайте, на том фоне, который вы выбрали. Особенно если фон не однотонный.

4. Выделение

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

5. Размер

Размер шрифта должен позволять без труда читать его.

В идеале это 12-14 пунктов; минимально — 10, максимально — 16.

Источники шрифтов

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

Google Fonts

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

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

FontSpace

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

1001 Free Fonts

Еще один сайт с бесплатными шрифтами. Шрифты разделены на категории: например, в категории “ Famous ” (знаменитое) можно найти шрифты из « Парка Юрского периода » или « Черепашек-ниндзя ».

Читать еще:  Как подростку заработать в интернете

FontStruct

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

Font Squirrel

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

DaFont

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

Urban Fonts

Здесь есть платные и бесплатные шрифты — вторые выделены в отдельный раздел “ Free ”.

Abstract Fonts

Еще одна коллекция с постоянно пополняющимися шрифтами.

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

Заключение

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

P.S.

Тем, кто интересуется шрифтами и типографикой, рекомендую посмотреть фильм Helvetica:

4.2. Выбираем шрифт для сайта

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

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 (в ред. автора)

Источники:

http://www.ucraft.ru/blog/kakimi-dolzhny-byt-shrifty-dlya-sajta
http://timeweb.com/ru/community/articles/kak-i-gde-vybrat-shrift-dlya-sayta-1
http://html5book.ru/shrift-dlya-sita

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector
×
×
×
×