Выбор стандартных шрифтов


Оглавление (нажмите, чтобы открыть):

Изменение или выбор стандартного шрифта в Outlook

Выбор шрифта по умолчанию

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

Выберите Файл > Параметры > Почта > Шрифты и бланки.

Выберите шрифт, который вы хотите изменить.

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

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

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

Выберите параметры для стандартного шрифта, например начертание и размер.

Нажимайте кнопку ОК, чтобы сохранить изменения.

Дополнительные сведения

Выберите Outlook > Параметры > Шрифты

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

Измените размер текста с помощью ползунка.

Шрифты можно изменить, если для создания новых сообщений используется формат HTML.

Выберите Параметры > Просмотреть все параметры Outlook > Создание сообщений и ответ на них.

В разделе «Формат сообщения» выберите настройку Создавать сообщения в формате — HTML.

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

Как часто вы задаётесь вопросом «какой шрифт лучше использовать для сайта?», многие на это не обращают внимания, а зря!

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

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

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

Часто используемые шрифты

Стандартные шрифты для сайта это:

  • Times New Roman;
  • Arial; Georgia;
  • Impact;
  • Trebuchet MS;
  • Verdana и другие.

Они входят в группу безопасных. Рассмотрим их подробней:

Arial. Преимущество этого компактного шрифта в высоте букв.

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

Trebuchet MS. Самый неподходящий для чтения. Даже при нормальном размере 12-14 px надо вглядываться в текст, что ведет к напряжению глаз.

Times New Roman. Самый распространенный и широко-используемый шрифт. Идеально подходит для чтения, но при размере 12 px выглядит мелким.

MS Sans Serif. Считается системным шрифтом Windows. На нем написаны все памятки и оповещения операционной системы.

Georgia. Очень похож на Times. Но в нём более широкие и резкие засечки и концы.

Comic Sans MS. Самый ненавидимый обществом. Отличается плавными округлыми очертаниями, небольшой кривоватостью букв, маленьким меж буквенным расстоянием.

Courier New. Похож на тот, которым раньше отпечатывали на пишущей машинке. Courier New выделяется четкими, хорошо читаемыми буквами, отличающимися небольшим сжатием . —Минус: ненасыщенный цвет.

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

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

Итак, так какой шрифт лучше всего использовать на сайте? По последним опросам среди пользователей интернета, оптимальным вариантом является сделать заголовок с помощью Verdana, а основной текст — Times New Roman. Но не исключен вариант, при котором можно весь текст сделать именно Verdana.

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

Нововведение от Яндекс. Размер имеет значение!

Вслед за мобильным алгоритмом «Владивосток», Яндекс сделал фактором ранжирования размер шрифта. Теперь размер текста на мобильном сайте имеет значение и его стандарт 12 см. PX (или больше). Проверить шрифт на «мобилопригодность» можно в Яндекс.Вебмастере.

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

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

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


Интересно! Разные виды шрифтов обладают неодинаковым размером. Если вы хотите сделать его больше, не обязательно изменять его пиксельный размер. Можно поэкспериментировать с выбором других шрифтов. Например, если поставить размеры Times New Roman и Tahoma — 12 px — выглядеть они будут по-разному. Последний, визуально будет смотреться больше.

Список стандартных шрифтов Windows

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

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

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

Название шрифта Win95 WinNT Win98 Win2000 WinMe WinXP
Abadi MT Condensed Light ° ° + ° ° °
Arial + + + + + +
Arial Alternative Regular ° ° ° ° + °
Arial Alternative Symbol ° ° ° ° + °
Arial Black ° ° + + + +
Arial Bold + + + + + +
Arial Bold Italic + + + + + +
Arial Italic + + + + + +
Book Antiqua ° ° + ° ° °
Calisto MT +
Century Gothic ° ° + ° ° °
Century Gothic Bold ° ° + ° ° °
Century Gothic Bold Italic ° ° + ° ° °
Century Gothic Italic ° ° + ° ° °
Comic Sans MS ° ° + + + °
Comic Sans MS Bold ° ° + + + +
Copperplate Gothic Bold ° ° + ° ° °
Copperplate Gothic Light ° ° + ° ° °
Courier + + + + + +
Courier New + + + + + +
Courier New Bold + + + + + +
Courier New Bold Italic + + + + + +
Courier New Italic + + + + + +
Estrangelo Edessa ° ° ° ° ° +
Franklin Gothic Medium ° ° ° ° ° +
Franklin Gothic Medium Italic ° ° ° ° + °
Gautami ° ° ° ° ° +
Georgia ° ° ° + ° +
Georgia Bold ° ° ° + ° +
Georgia Bold Italic ° ° ° + ° +
Georgia Italic ° ° ° + ° +
Georgia Italic Impact ° ° ° ° ° +
Impact ° ° + + + °
Latha ° ° ° ° ° +
Lucida Console ° + + + + +
Lucida Handwriting Italic ° ° + ° ° °
Lucida Sans Italic ° ° + ° ° °
Lucida Sans Unicode ° ° + + ° +
Marlett ° ° + ° + °
Matisse ITC ° ° + ° ° °
Modern + + + + ° °
Modern MS Sans Serif ° ° ° ° ° +
MS Sans Serif + + + + + +
MS Serif + + + + + °
Mv Boli ° ° ° ° ° +
News Gothic MT ° ° + ° ° °
News Gothic MT Bold ° ° + ° ° °
News Gothic MT Italic ° ° + ° ° °
OCR A E+tended ° ° + ° ° °
Palatino Linotype ° ° ° + ° +
Palatino Linotype Bold ° ° ° + ° +
Palatino Linotype Bold Italic ° ° + ° + °
Palatino Linotype Italic ° ° ° + ° +
Roman ° + ° + ° +
Script ° + ° + ° +
Small Fonts ° + ° + ° +
Smallfonts + ° + ° + °
Symbol + + + + + +
Tahoma ° ° + + + +
Tahoma Bold ° ° + + + +
Tempus Sans ITC ° ° + + ° °
Times New Roman + + + + + +
Times New Roman Bold + + + + + +
Times New Roman Bold Italic + + + + + +
Times New Roman Italic + + + + + +
Trebuchet ° ° ° ° + °
Trebuchet Bold ° ° ° ° + °
Trebuchet Bold Italic ° ° ° ° + °
Trebuchet Italic ° ° ° ° + °
Trebuchet MS ° ° ° + ° +
Trebuchet MS Bold ° ° ° + ° +
Trebuchet MS Bold Italic ° ° ° + ° +
Trebuchet MS Italic ° ° ° + ° +
Tunga ° ° ° ° ° +
Verdana ° ° + + + +
Verdana Bold ° ° + + + +
Verdana Bold Italic ° ° + + + +
Verdana Italic ° ° + + + +
Webdings ° ° + + + +
Westminster ° ° + ° + +
Wingdings + + ° + ° +
WST_Czech ° ° ° ° ° +
WST_Engl ° ° ° ° ° +
WST_Fren ° ° ° ° ° +
WST_Germ ° ° ° ° ° +
WST_Ital ° ° ° ° ° +
WST_Span ° ° ° ° ° +
WST_Swedм ° ° ° ° ° +

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

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

Безопасные шрифты: Arial, Courier, Courier New, MS Sans Serif, MS Serif, Symbol, Times New Roman.

Существуют шрифты, которые не входят в поставку Windows ранних версий, однако почти обязательно присутствуют в системе (устанавливаются с дополнительным программным обеспечением, например, Microsoft Office). Безопасные шрифты: Arial, Courier, Courier New, MS Sans Serif, MS Serif, Symbol, Times New Roman.

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

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

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

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

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

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

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

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

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

Самые понятные шрифты – те буквы у которых имеют привычную форму и общее характеристики которых наиболее постоянны.

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

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

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

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

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

Мастер Йода рекомендует:  Корректирующие слои

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

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

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

Что такое насыщенность шрифта


Насыщенность шрифта (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть так же дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold).

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

Размер шрифта зависит от количества текста. Если текста очень мало, и он используется, по сути, только для подписей и комментариев, сделайте его крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно. Если текста достаточно много, наoборот, уменьшите до 18px, так он будет легче читаться.

Настройка параметров шрифта для разных типов проекта

Начнем с самого простого: какой у вас тип проекта — это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лэндинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.

Настройка шрифтов для сайта в зависимости от тональности

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

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

1. Полужирный заголовок и нормальный текст

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

Для каких сайтов подойдет: для любых.

Пример: Страница вакансии. В примере используются шрифты: Open Sans (для заголовков) и Roboto (для текста).

2. Жирный заголовок и нормальный текст

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

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

Пример: Сайт коворкинга. В примере используются шрифты: Ubuntu (для заголовков) и PT Sans (для текста).

3. Жирный заголовок и тонкий текст

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

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

Пример: Страница дизайн-студии. В примере используются шрифты: Noto Sans (для заголовков) и Open Sans (для текста).

4. Тонкий заголовок и тонкий текст

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

Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

Пример: Лэндинг мобильного приложения для обработки фотографий.

Примеры сочетаний разных шрифтов

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

Подбираем шрифты для статьи

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

Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет, и текст — это, в основном, подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.

Пример: Страница поста в блоге о моде.

Пример: Корпоративный блог.

Пример: Статья о контент-маркетинге.

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

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

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

Список хороших шрифтов, в которых есть кириллица

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

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

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

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

Пример 1: Текст читается не очень

Пример 2: Текст читается хорошо

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


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

Подбираем шрифты для верстки корпоративной полиграфии.

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

Подбор шрифтов

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

  • Century Schoolbook
  • Century Expanded.
  • Georgia
  • Palatino

Times New Roman распространен, но для настольной издательской системы не подходит. Дело в том, что программа верстки зачастую подставляет “фальшивку” для жирного или курсивного начертания (нормальный шрифт, преобразованный путем обработки текста программой настольной издательской системы), и тот же Times New Roman становится трудным для прочтения, особенно в основном тексте.

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

Помните о “семейности” шрифтов

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

  • Helvetica
  • Наклонный Helvetica
  • Жирный Helvetica
  • Helvetica, жирный наклонный

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

Правила, которым неплохо следовать при выборе шрифта

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

Основной текст

  • Принимаем кегль основного текста: 12 пунктов.
  • интерлиньяж основного текста никогда не должна быть меньше, чем размер шрифта, или больше, чем 2 x размер шрифта, измеренный в цицеро (диапазон 12 – 24 цицеро составляет 2 – 4 дюйма),
  • следите за тем, чтобы межстрочный интервал, составлял примерно 120-130% размера кегля шрифта; то есть кегль 12 pt должен иметь интерлиньяж 14 – 15 pts.

Текст подзазаголовка

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

Текст заголовка

  • заголовки набора можно оформить в шрифте, отличном от основного
  • заголовки – наиболее бросающиеся в глаза части каталога; они должны быть удобочитаемыми

Общие принципы подбора шрифтов

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

Вещи, которые не следует делать при отборе шрифта для верстки каталога или буклета

  • не используйте больше чем три шрифта в своей брошюре
  • избегайте круглых шрифтов с чрезмерно большими x-высотами (размер шрифта от основания до вершины строчных букв x); эти шрифты создают грязные торчащие во все стороны надстрочные и подстрочные элементы и заставляют Ваш текст “плясать” (примеры: ITC Garamond Light, ITC Avant Garde, or Century Gothic)
  • используйте serif-шрифт, но не конденсный; сжатость заставляет шрифт выглядеть слипшимся и верстка каталога или буклета выглядит неразборчивой
  • избегайте чрезмерно тонких “небрежных” шрифтов в особенности: Goudy Old Style, New Baskerville, New Caledonia, Monotype Baskerville, Centaur, Adobe Garamond
  • избегите высоких контрастных типов как Bodoni или Didot; они требуют тонкой настроки межстрочных интервалов чтобы верстка не выглядела загроможденной и грязной
  • даже учитывая распространенность, не используйте Helvetica или Arial для верстки каталога или буклета – при небольших размерах кегля, эти шрифты становятся неуклюжими и слипающимися

Хорошая верстка начинается с хорошего шрифта

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

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

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

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

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

Мастер Йода рекомендует:  Как работают Web сервисы ASP.NET

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

Во времена молодости сети 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.

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

Какой размер шрифта лучше для сайтов ?

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

На многих сайтах в основном сейчас используется размер 12-13px. Google использует 13px размер шрифта.
Lenta.ru — 15-16px
Vkontakte — 11-13px

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

  • Вопрос задан более трёх лет назад

  • 27135 просмотров

Хороший сервис по подбору шрифта из стандартного набора texster.ru

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

Размер опять же какой то шрифт мельче при 14px какой то чуть больше, меньше 13 я бы не использовал так как не у всех зрение хорошее

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

Уточните, о какой линейке шрифтов идёт речь (?)

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

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

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

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

Одни шрифты в 13 кегле мелкие, а та же Verdana будет большой.

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

Пять лет назад базовым размером стандартного шрифта, используемого для вывода текстов для чтения, считалось 12-13px. В то время как шрифт в 10-11px использовался для мелких подписей. За последние несколько лет произошло увеличение этих размеров. Сегодняшние сайты, задающие тренды, используют для вывода тестов для чтения размер шрифта 14-16px. Соответственно для мелких подписей используется уже шрифт не менее 12-13px.

Связано это прежде всего с тем, что за последнее время сильно увеличилось разрешение экранов при сохранении их физических размеров, а то даже и при их уменьшении. А это значит, что увеличивается плотность пикселей, а значит и шрифт одного и того же размера начинает выглядеть мельче. В 2012 году самым популярным стал экран с разрешением 1366px шириной, вытеснив лидера всех прошлых лет с шириной 1024px: habrahabr.ru/post/141948/.

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

Подбирая размер шрифта для чтения текста на вашем сайте, нужно понимать, какова статистика экранных разрешений вашей аудитории. В среднем по рунету мы видим, что пользователей с разрешением 1366px и выше примерно столько же, соколько и всех остальных: www.liveinternet.ru/stat/ru/resolutions.html?perio. Однако для Хабра, например, таких пользователей в 2 раза больше. А значит, для Хабра нужно делать размер шрифта крупнее.

Ну и конечно, не стоит забывать о том, что системные шрифты с засечками (Times New Roman, Georgia) выглядят мельче шрифтов без засечек (Verdana, Tahoma, Arial) при одних и тех же размерах. Чтобы Georgia смотрелась также как Verdana в размере 12px, нужно ставить ей 14px. Точно также отличаются видимым размером и несистемные, подгружаемые шрифты. На Lookatme используют шрифт ProximaNova-Regular размером 16px. Если вы попробуете прямо в браузере удалить этот шрифт из стилей, оставив только системый sans-serif, то увидите как этот системный шрифт увеличится. И чтобы он по размеру выглдяел бы как подгружаемый, нужно будет уменьшить в стилях размер до 15px.

Крутые сочетания шрифтов #2

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

Уверен, вы замечаете многие многие шрифтовые тренды. Каждый год появляется популярный шрифт, который мелькает в проектах на Behance и Dribble. Сначала это был Gotham, затем Proxima и Avenir, а сегодня мы опять вернулись к Futura. Но нет никакого смысла бояться подобной цикличности.

Дизайн в своём развитии похож на петлю, также как и тренды в стилях архитектуры или моды. Появляется новое направление, достигает своего пика, а затем сменяется.

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

Плюс, я буду обращать ваше внимание на некоторые детали, которые нравятся именно мне.

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

STAMPSY

На сайте Stampsy используется PF Bague Sans Pro для заголовков и шрифта интерфейса.

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

На главной странице они используют те же шрифты, но наоборот. Здесь шрифт текста — это Minion Pro Condensed, а текст заголовков — PF Bague Regular. В целом, эта страница смотрится свежо. Приятные цвета, нет избытка текста, перегружающего страницу. Мне нравится подход, в котором суть проекта отображается в пяти больших слайдах. Иногда трудно описать свой проект коротко и быстро, но всегда есть смысл попробовать так сделать.

В миниатюрной версии плеера также используется PF Bague. Он по-прежнему круто смотрится в интерфейсах. А ещё он лаконичен и сохраняет изюминку, цепляющую взгляд посетителя.

Это блок с рекомендованной статьёй. Оба шрифта остаются читаемыми даже в кегле в 14px.

На странице с подборками статей применяется несколько разных кеглей. Заголовок написан с помощью PF Bague в жирном начертании, 60px, а под ним Minion Condensed, 24px, 31px. Обратите внимание, как круто смотрится шрифт на зелёной кнопке.

FUZZCO

Вот ещё один замечательный шрифт — GT Haptik, на сайте Fuzzco он используется везде. У этого шрифта знаки больше, чем у BF Bague. Побродив по сайту, вы увидите, что шрифт одинаково хорошо смотрится и в большом кегле, и в кегле 15px, что очень удобно для UI.

Fuzzco — хороший пример того, как умелое обращение со шрифтами и изображениями делает страницу привлекательной. У GT Haptik сильный характер, и он подойдёт не каждому сайту. Например, у него очень даже претенциозная цифра 0 и прописная R. Хотя шрифт всё равно крут.

Мастер Йода рекомендует:  Блоки try... catch... finally... в JScript 5. Javascript

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

EXPOSURE

Exposure — сайт для людей, которые хотят делать красивые фото-истории. Мне нравится, что эти ребята тоже не боятся экспериментов со шрифтами и зачастую придумывают что-то новенькое. Основной шрифт на этом сайте — Europa с TypeKit. В напарники ему был выбран старый добрый Adobe Garamond Pro.

Заголовки написаны прописным жирным начертанием Europa, 40px, 60px; разрядка — 4px. Под ним используется Garamond в нормальном начертании. Как вы можете видеть на правой стороне скриншота, шрифт Europa отлично смотрится на кнопках и в сплошном тексте. На сайте Exposure правильно расставлены визуальные акценты и грамотно использованы прописные заголовки, текстовые области и кнопки.

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

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

Раздел с фото-историями интересно сочетает в себе и Europa, и Garamond. Шрифты хорошо читаются даже в маленьком кегле.

WONDERLAND

На сайте Wonderland используется известный ITC Avant Garde. Шрифту уже 40 лет, но он всё ещё мило смотрится и остаётся популярным.


Второй шрифт на Wonderland — Neuzeit Grotesk. Если вы зададите для него кегль в 22px и межстрочный интервал в 35px, он становится очень даже читаемым и чистым. Это хорошо видно на этом огромном куске текста.

Ещё мне понравилась страница с контактами, на которой используется Neuzeit Grotesk 20px.

Жирное начертание заголовков с подчёркиванием ITC Avant Garde и тонкий, текстуальный Neuzeit Grotesk хорошо смотрятся вместе. Эта страница контактов, как и в случае с сайтом Fuzzco, содержит только текст. И из-за того, что дизайнер постарался сделать её лёгкой и чистой, она и выглядит понятной.

DOGSTUDIO

Визуальное представление этого сайта хорошо привлекает внимание посетителя. Шрифт заголовков — Playfair, кегль: 55px и высота строки: 55px. Помимо всей шикарности этого шрифта вам также понравится факт его полной бесплатности.

Шрифт текста верхней панели меню и слова «Congress» — жирное начертание Futura, 13px.

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

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

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

Основной текст — светлое начертание Helvetica Neue, 16px, 28px. Он превосходно контрастирует с жирным заголовком, а разреженный межстрочный интервал позволяет легко читать текст.

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

Небольшой, но аккуратный блок можно найти в разделе «Studio». Заголовок — полужирная Futura, 35px, 33px. Ниже идёт основной текст — тонкое начертание Playfair, 16px, 20px.

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

READYMAG

У сайта Readymag дизайн действительно продуман. Они часто экспериментируют со шрифтами и нередко результат получается просто здоровский.

Для заголовка главной страницы было выбрано сверхсветлое начертание Nobel, 84px, 82px. А ниже тоже используется Nobel, но 26px, 26px. Для меню используется уже знакомый Avenir Next, 19px, 19px.

У шрифта Nobel есть характер, и он отлично подходит для повествовательной формы представления контента. Вместе с обезличенной и понятной Helvetica этот шрифт можно применять в «креативных проектах» и показывать их «компетентной аудитории». Плюс, Nobel хорошо сочетается с Avenir Next.

На сайте Readymag с помощью этой пары был создан понятный и минималистичный дизайн. Обратите внимание на отступы и параметры шрифта, заданные в блоке с преимуществами продукта. Заголовок — светлое начертание Nobel, 64px, 80px; название каждого блока — полужирное начертание Avenir Next, 24px 30px; текст описания — нормальное начертание Avenir Next, 18px, 24px. А воздух между блоками придаёт всей композиции свободу и чистоту.

Avenir Next отлично подходит для заголовков и обычного текста. Он отлично вписывается и в UI. UI сайта Readymag — лишь один подобный пример. В огромных заголовках он мне больше напоминает хипстерские шрифты, а в обычном тексте в нём появляется больше геометричности и круглости, как в Proxima Nova.

С помощью Avenir Next вы можете выделять нужные блоки, применив прописное начертание шрифта в заголовке. Здесь разрядка задана в 2px, кегль: 13px, высота строки: 13px. Параметры текста ниже: 13px, 13px.

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

Но у сайта Readymag с этим всё в порядке. Для этого блока сайта они взяли Merriweather, который можно скачать с Google Fonts.

Подсказка: вы можете высчитать размер заголовка при помощи золотого сечения. Задайте фиксированный кегль основного шрифта —

. Например, нашим шрифтом будет Proxima, 19 px. Поскольку ширина вертикали сетки будет равна 18px, интерлиньяж контента будет таким — 18*2=36px.

Теперь нам нужно выбрать размер текста под заголовком. Возьмём золотое сечение 1*1,618 и умножим его на размер контента. 1,618*19=30,74

30px. По такой же формуле высчитаем размер заголовка: (1,618*19)*1,618=49,74

В этом случае получаем следующие размеры: основного текста — 19px, текста под заголовком — 30px, заголовка — 50px.

DRAGONE

На сайте Dragone использована такая же пара шрифтов как и на Dogstudio. Сайты похожи и сами по себе, и мастерским уровнем своего исполнения. У меня даже иногда есть ощущение, что их делала одна студия. Заголовки — Playfair, 40px, 40px., основной текст — FuturaLight 17px, 27px.

Только посмотрите, как хорошо шрифты подходят друг другу! Они созданы друг для друга, хотя кажется, будто они из разных миров. Заголовок — Playfair, 30px, 30px. Выше использовано жирное начертание Futura Bold 11px, 25px, разрядка: 2px. Мне нравится чистота и лёгкость этой пары. Кажется, что здесь нет ничего ненужного — приятная картинка и понятный текст, создающий эмоциональную связь с иллюстрированным продуктом.

Мне очень нравится, как сочно выглядит футер. Кегль, цвет и высота строк отлично продуманы. Заголовок — жирное начертание Futura, 12px, letter-spacing: 2px. Пункты меню — Playfair, 13px, 18px.

На странице «Контакты» в заголовках используется тот же Playfair.

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

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

Если статья вам понравилась, поделитесь ей с друзьями и можете передать мне привет в Twitter. Ещё я завёл блоги в Tumblr и Pinterest, где доступны все скриншоты из этой статьи.

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

Vladimir Kudinov — дизайнер и сооснователь @Designmodo

10 лучших шрифтов 2020 года

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

Playfair Display

Элегантный шрифт, начертание которого напоминает стилистику 18 века. Выполнен в схожей стилистике шрифтов Baskerville и Boydell Shakespeare. Автор шрифта — Клаус Эггерс Соренсен. Это высококонтрастный шрифт с засечками, который обычно используется для заголовков, названий и титров. Желательно использовать в паре с Georgia для основного текста.

Theano Didot

Шрифт создан историком и преподавателем МГУ Алексеем Крюковым в 2007 году. Входит в семейство Theano и изначально создавался только для греческого языка. Но впоследствии была добавлена латынь и кириллица. Шрифт доступен для бесплатного использования. Относится к категории новая антиква, с засечками.


Salome

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

Knile

Это шрифт класса Slab (плоские засечки), часто используется в веб-проектах. Был разработан Атипо и Марией Рамос.

Trajan

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

Didot

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

Fenix

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

Klinic Slab

Это универсальный шрифт с индивидуальными чертами. Был спроектирован Джо Принцем и представляет собой современную форму гибкого Slab Serif (шрифты с плоскими засечками). Поставляется с четырьмя начертаниями и содержит восемь шрифтов в семействе Klinic Slab.

Butler

Бесплатный шрифт с засечками представляет собой смесь семейства Bodoni и Dala Floda. Его создали для повышения оригинальности шрифтов с засечками. Для этого улучшили изгибы стандартных шрифтов с засечками и добавили дополнительные начертания. Широко используется для плакатов, книг и больших форматов. Семейство шрифтов Butler содержит 334 символа, семь трафаретов и семь начертаний. Он также имеет текстовые фигуры, фракции, лигатуры и пр.

Fanwood

Тщательно продуманный шрифт с засечками, который передает стилистику римских шрифтов, не боящихся времени. Fanwood поставляется с курсивом и римским стилем, оба они оптимизированы для экранов. Используется в заголовках и текстах, легок для чтения с экрана. Был разработан Барри Шварцем, распространяется под лицензией SIL Open Font для бесплатного использования.

Finches Serif

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

Migur Serif Font

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

Это была подборка от Graphicpear. А какие шрифты любите вы? Поделитесь в комментариях.

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

Playfair Display

Элегантный шрифт, начертание которого напоминает стилистику 18 века. Выполнен в схожей стилистике шрифтов Baskerville и Boydell Shakespeare. Автор шрифта — Клаус Эггерс Соренсен. Это высококонтрастный шрифт с засечками, который обычно используется для заголовков, названий и титров. Желательно использовать в паре с Georgia для основного текста.

Theano Didot

Шрифт создан историком и преподавателем МГУ Алексеем Крюковым в 2007 году. Входит в семейство Theano и изначально создавался только для греческого языка. Но впоследствии была добавлена латынь и кириллица. Шрифт доступен для бесплатного использования. Относится к категории новая антиква, с засечками.

Salome

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

Knile

Это шрифт класса Slab (плоские засечки), часто используется в веб-проектах. Был разработан Атипо и Марией Рамос.

Trajan

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

Didot

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

Fenix

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

Klinic Slab

Это универсальный шрифт с индивидуальными чертами. Был спроектирован Джо Принцем и представляет собой современную форму гибкого Slab Serif (шрифты с плоскими засечками). Поставляется с четырьмя начертаниями и содержит восемь шрифтов в семействе Klinic Slab.

Butler

Бесплатный шрифт с засечками представляет собой смесь семейства Bodoni и Dala Floda. Его создали для повышения оригинальности шрифтов с засечками. Для этого улучшили изгибы стандартных шрифтов с засечками и добавили дополнительные начертания. Широко используется для плакатов, книг и больших форматов. Семейство шрифтов Butler содержит 334 символа, семь трафаретов и семь начертаний. Он также имеет текстовые фигуры, фракции, лигатуры и пр.

Fanwood

Тщательно продуманный шрифт с засечками, который передает стилистику римских шрифтов, не боящихся времени. Fanwood поставляется с курсивом и римским стилем, оба они оптимизированы для экранов. Используется в заголовках и текстах, легок для чтения с экрана. Был разработан Барри Шварцем, распространяется под лицензией SIL Open Font для бесплатного использования.

Finches Serif

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

Migur Serif Font

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

Это была подборка от Graphicpear. А какие шрифты любите вы? Поделитесь в комментариях.

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