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

выбор шрифта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

гарнитура шрифта

Выбор пары

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

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

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

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

выбор пары

Размер

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

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

размер

Иерархия

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

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

Иерархия

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

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

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

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

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

Трекинг

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

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

Трекинг

Цвет

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

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

Цвет

Сетка

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

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

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

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

Сетка

Выделение

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

Шрифты

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

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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Max Luzuriaga

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (45)

  1. евгений

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

  2. pagemakeroff

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

  3. Николай

    Спасибо большое! Советы очень нужные!

  4. Ruslan

    Спасибо за перевод. Возможно пригодится

  5. Нина

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

    • myr4ik07

      Абсолютно с вами согласен!

    • Виктор Рог

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

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

  6. Игорь

    Ну, так. Познавательно! :)

  7. Дмитрий

    Спасибо.
    Может кому-то пригодится ссылка на онлайновый генератор рыбных текстов blindtextgenerator.com/ru (русскоязычных), а не латиница Lorem ipsum…(бла…бла…бла…).

  8. Роман

    Очень интересный материал! Надо взять на вооружение и активно использовать!

  9. Вера

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

  10. Lika

    Я не давно в этой сфере.

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

    • Andrey Bernacki

      Lika, разное отображение шрифтов происходит не из-за разных компьютеров, а из-за разных браузеров и может быть даже из-за разных версий одного и того же браузера. Тут парочка решений есть, но опять-таки для разных шрифтов они ведут себя по-разному, а в некоторых случаях непредсказуемо.
      Даже если вы подключаете шрифт, используя @font-face — то 100% одинакового отображения вы не увидите (во всяком случае я сколько не использовал, пока не видел).
      И по поводу «шрифт на странице смотриться не так как задумывалось» — часто дизайнеры в макетах PSD для шрифтов используют сглаживание. Сглаживание для шрифта в CSS указать невозможно — нет такого свойства. В некаторых случаях удается добиться чего-то подобного на сглаживание указанием font-weight:bold;
      Так что одинаковость шрифта — это проблема браузеров, и на данный момент однозначного решения нет.

  11. Татьяна Нефедьева

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

  12. Эдуард

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

  13. Анатолий

    Статья полезная и как познавательная и как
    напоминание. Спасибо.

  14. Александр

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

  15. Лариса

    Здравствуйте!
    Статья очень полезная!
    Но как все это настроить на сайте, ПОМОГИТЕ
    «чайникам», которые месяц назад создали свой сайт самым простым способом.
    Буду Вам благодарна за помощь.

    • Andrey Bernacki

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

      • Александр

        Можно мне тоже совет-аудит по шрифтам.

        Многие в сети жалуются на шрифты: и на размеры, и на стиль, и на тень(
        Посмотрите и Вы своим взглядом.

        vagenleyter.ru

        СПАСИБО!

        • Andrey Bernacki

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

          • Александр

            Согласен, вы фактически поставили окончательную точку в этом вопросе.
            Спасибо!

            P.S. дописываю ТЗ разработчикам (будет редизайн сайта)

        • Андрей Кудлай

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

          • Александр

            Спасибо, а что можете сказать по типам и размерам шрифтов?
            Ну и вообще в целом по сайту?

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

          • Андрей Кудлай

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

          • Александр

            СПАСИБО!!! ;)

          • Андрей Кудлай

            Пожалуйста :)

          • Александр

            обновил блог по дизайну и шрифтам vagenleyter.ru

            пойдет?

          • Андрей Кудлай

            Ничего так — мне нравится ;)

  16. Любовь Литвинова

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

  17. Рустем

    Спасибо! Думаю насчет эмоционального веб-дизайна)

  18. evgenij

    Спасибо за информацию.Я сайт пока ни сделал,но информация очень полезная.Спасибо!

  19. Андрей

    Спасибо за перевод, но существует проблема: очень мало кириллических шрифтов и тут не до жиру

  20. Юлия

    Большое спасибо за просветительскую деятельность! Это — миссия. Бог Вам в помощь!

  21. Галина

    Спасибо за информацию. Мне как новичку это интересно! Попробую применить у себя на сайте.

  22. Сергей

    Очень полезный материал! Я как раз недавно написал про очень интересный онлайн сервис интернет, который случайно нашел в сети. Называется TEXTER — его описание и функционал можно почитать у меня на сайте — webtous.ru/raznoe/pomoshhnik-v-vybore-shrifta-i-ego-oformlenii.html.
    Поработав немного с этим сервисом, я уже с трудом представляю как обходился без него раньше :-)

  23. Нильс

    Главное- идея сайта! от неё плясать! Решать технические моменты, исходя из послания, это написано в этой хорошей статье! БЛАГОДАРЮ!

  24. Анна-Мария

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

  25. Юрий

    Если Вам интересен мой комментарий, то я скажу как специалист — техник технолог высокой печати.
    Урок очень нужный и своевременный. Для некоторых поясню: — шрифт на сайте — это как реклама любой организации, как макияж для женщины. Чем изящнее и многообразнее применены шрифты, тем привлекательнее сайт. Спросите себя, какое обращение (одинаковое по смыслу) оставит свой след в головах читателей: написанное каракулями или изящным «Почерком»? В старину «писарчуков» ценили на «вес золота». Да, что объяснять …….?

  26. Наталия

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

  27. mr font

    Весело читать о правильном выборе шрифта вашим мелким шрифтом лол

    • Андрей Кудлай

      Verdana 13px — один из общепринятых стандартов для веба. К чему Ваш комментарий?

  28. Ekaterina

    Спасибо!Вы,всегда во время подсказываете!!!

  29. shemel

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree