Подбираем шрифт для сайта с помощью онлайн сервисов

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

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

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

Гораздо опрятнее будет использовать стандартную «рыбу» вроде «Lorem ipsum», которая не содержит смысла и не отвлекает. В этом и есть ее прелесть и предназначение. Поэтому многие дизайнеры используют для разработки софт, где есть функция заполнения «болваночным» текстом. Или имеет заготовленный вордовский файл-болвану.

Более изящным вариантом может быть использование сервиса Blind Text Generator, который делает тоже самое, но более интересно и разнообразно:

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

Наверное, кто-то назовет Blind Text Generator сервисом бесполезным, потому что единственная его задача — давать образцы галиматьи и бессмысленности. С другой стороны, как иногда полезно иметь таки образцы под рукой! К тому же он предлагает не только всем надоевший стандартный «Lorem ipsum», но и ряд других вариантов!

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

Гораздо проще выставить в трех колонках те варианты которые вам нравятся (кстати, в качества текста можете использовать «рыбу» с Blind Text Generator) и сравнить их между собой. Причем увидите текст вы сразу во всевозможных написаниях — обычном, полужирном, жирном и так далее:

подбираем шрифт для сайта

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

css для шрифта

Дальше я думаю вы и без меня знаете что с ним делать. Удачных вам экспериментов!

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

А как вы подбираете шрифты для будущего сайта? Сразу при создании макета в фотошопе?

P.S. Постовой. Студия Oznaka — качественная разработка сайта в Киеве.
Советую глянуть курс по заработку на AdSense – и заработать на контекстной рекламы.
Подробная информация про Черновцы и достопримечательности этого города.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 6 для поста Подбираем шрифт для сайта с помощью онлайн сервисов
  1. ]]> Allpa ]]> (Июнь 24, 2010)

    Тод, я читала где-то, что «рыба» латинице и «рыба» кириллицей — две большие разницы. Поэтому-де рекомендуется, если у вас сайт/блог на русском, искать генератор текстов кириллицей.

    Я, например, использую тексты отсюда: vesna.yandex.ru — сервис, сооружающий бессмысленные и жутко смешные «рефераты» на различную тематику :)

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

  2. ]]> Tod ]]> (Июнь 24, 2010)

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

  3. ]]> dbaik ]]> (Январь 21, 2011)

    Наверное хотели сказать, «Подбираем шрифт текст для сайта с помощью онлайн сервисов»

  4. ]]> Tod ]]> (Январь 22, 2011)

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

  5. ]]> Нина ]]> (Апрель 12, 2012)

    хорошие сервисы, но нет простора развернуться. людям же надо, чтобы много и бесплатно. вот тут в статье много бесплатных сервисов, которые помогут подобрать очень крутой и, главное, подходящий шрифт: http://templates.motocms.ru/blog/osnovi-dizaina/11-instrumentov-dlya-raboty-so-shriftami/

  6. ]]> Настя ]]> (Август 13, 2012)

    хорошая и очень полезная подборка! я недавно искала такие сервисы ) Спасибо!

Оставить комментарий
для статьи Подбираем шрифт для сайта с помощью онлайн сервисов