Как разобрать шрифты

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

Похожие статьи:

Экспрессивная и нейтральная типографикаВерстка журнального разворота. Часть 2Креативная типографика в видео

3 способа определить шрифт на картинке, с помощью сервиса WhatTheFont.

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

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

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

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

И заключительный вариант — воспользоваться приложением для айфонов, айпадов и айподов, тогда даже без доступа к компьютеру, ваш смартфон выручит вас. К примеру, в каком-то печатном журнале, газете или на рекламном щите вам приглянулся шрифт, остается его только сфотографировать. Найти приложение можно в библиотеке приложений  iTunes, введите в поиск «WhatTheFont». Для использования программы, нужен доступ к интернету с телефона.

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

Алексей Повловский

Нечеткие шрифты в браузерах Chrome, Firefox и Opera

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

Устранение нечетких шрифтов в Chrome:

  • в адресную строку ввести: chrome://flags/
  • найти

    Отключить DirectWrite

    Windows

  • изменить значение и перезагрузить браузер

Устранение нечетких шрифтов в Firefox:

  • в настройках открыть «Дополнительно», затем «Общие» и снять флажок «По возможности использовать аппаратное ускорение»
  • в адресную строку ввести: about:config
  • найти

    параметр gfx.content.azure (добавить в строку поиска)

  • изменить значение с True на False (кликнуть 2 раза и поменять), после чего перезагрузить браузер.
  • если не поможет, удалите обновление Windows под номером KB2670838

Устранение нечетких шрифтов в Opera:

  • в адресную строку ввести: opera://flags/
  • найти

    параметр Disable DirectWrite (проще поиском по CTRL + F)

  • изменить значение, после чего перезагрузить браузер.

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

Однако работать стало вполне возможно, особенно в моих основных программах: Рабочий стол Windows, Firefox, Opera, TheBat и т.п.

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

Полезный совет: Как можно быстро добавить полезную статью в закладки своего браузера: просто нажмите на клавиатуре «CTRL + D» и кнопку «Готово», это работает в большинстве браузеров, проверьте сейчас!

Рекомендую прочесть:

FTP клиенты

  • 19890
  • 16 августа 2014

Как зайти на сайт через FTP-клиент?Для полноценной работы над веб-проектами, будь то личный блог, интернет-магазин или сайт клиента по SEO необходим такой инструмент как FTP-клиент. Сейчас разберемся как им проще всего воспользоваться. …

  • 16 августа 2014
  • Рабочее место

Как сделать скриншот экрана компьютера

  • 6050
  • 1 марта 2015

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

  • 1 марта 2015
  • Рабочее место

  • 5273
  • 30 июня 2016

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

  • 30 июня 2016
  • Рабочее место

как обойти заблокированный сайт

  • 106
  • 4 декабря 2018

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

  • 4 декабря 2018
  • Оптимизация бизнеса

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

Сначала поговорим о выборе шрифтов в общих чертах.

По контенту

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

Будет ли это заголовок? Будет ли он дополнением к шрифту? Некоторые шрифты нельзя использовать для текстовых блоков, например:

По характеру

Некоторые шрифты, как Helvetica, довольно непримечательны — своим дизайном они ничего не передают: ни сообщение, ни историю. С другой стороны, есть шрифты с большим характером, например, Kaushan Script. Не забудьте устроить шрифту тест-драйв и подумайте, как его характер соотносится с вашим брендом и аудиторией. Если вы продаёте свадебные платья, моноширинный шрифт не будет хорошей идеей. Если ваш бизнес не ремонтирует старые печатные машинки, такой шрифт не подойдёт.

Брать ли платный шрифт?

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

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

Проверьте глифы

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

Я только что понял, что купил шрифт без «Č» #JUSTSLOVENEPROBLEMS

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

По «обстановке»

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

Советы по сочетанию шрифтов

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

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

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

1. Контраст

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

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

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

2. Словолитни

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

выглядеть неуместно.

Или вы можете взять семейство шрифтов и выбрать в нём два разных шрифта. Как эти два — Roboto Black and Light:

3. X-height

И ещё один совет для успешного сочетания шрифтов — сравнивать их по высоте строчных знаков. Это высота буквы «x» — она отличается от шрифта к шрифту, и часто шрифты с одинаковой x-высотой отлично подойдут друг другу.

Заключение

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

Что подразумевается под “слишком мелким”?

На большинстве сайтов размер текста все еще находится в пределах 15-18px. Можно заметить, что некоторые сайты уже используют размер около 20px (и даже крупнее) даже на небольших экранах, но, по-моему, этого недостаточно*.

* В этой статье я привожу размеры шрифтов в px (пикселях), а не в pt (пунктах), чтобы было проще соотнести размер шрифта с веб-фреймворком в цифровом пространстве.

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

Немного истории

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

Такое понятие как “пункт” появилось в 1600-х годах и относилось к высоте металлического корпуса, на котором были отлиты символы. Однако, в современном цифровом пространстве сложно определить точный размер пункта.В 1990-х годах цифровые платформы предложили систему перевода пунктов в пиксели, но, конечно же, в те времена мы имели дело с 14-дюймовыми экранами с низким разрешением. В операционной системе Apple Mac 12pt равнялись 12px при плотности пикселей 72 ppi. А вот Microsoft решили, что 12pt — это 16px при плотности пикселей 96 ppi: именно поэтому в IE был установлен дефолтный базовый размер 16px.

На протяжении конца 1990-х и начала 2000-х, основной текст на сайтах существовал в пределах 9-14px. Какое-то время дизайнеры были уверены, что 16px — это слишком крупный размер, потому что привыкли 12pt (12px), которых стоял по умолчанию на их Маках.

Перенесемся в 2007 год, и — хотите верьте, хотите нет — 16px все еще считается слишком огромным для основного текста. Но в 2011 году, когда в моду вошел отзывчивый дизайн, и начали появляться дисплеи с высоким разрешением, дизайнеры приняли 16px за минимальный размер. С тех самых пор мы усиленно пытаемся подстроиться под это значение.

Почему основной текст не делают крупнее?

Чтобы оценить все преимущества более крупного основного текста, нужно разобрать причины, по которым дизайнеры (и разработчики) предпочитают мелкий. Чаще всего главной причиной выступает привычка: мы привыкли к мелкому тексту, так делают все — значит, наверное, и нам стоит.

Мы проектируем под мобильные (стратегия mobile-first)

Следуя стратегии mobile-first, мы с самого начала оптимизируем дизайн (и, соответственно, основной текст) под мобильные устройства. Это подразумевает размер 15-18px. Но при проектировании своего отзывчивого сайта мы часто забываем, что люди будут читать контент не только с мобильных устройств, но и с больших экранов: ноутбуков, настольных компьютеров и да — смарт-телевизоров.В итоге, увлекшись идеей создания универсального сайта, мы больше заботимся о маленьких экранах и не думаем, как контент будет масштабироваться на больших.

Мы считаем крупное “громоздким”

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

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

Есть возможность увеличить текст

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

Разборчивость путают с читабельностью

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

Мы хотим избежать скроллинга

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

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

Так настроен фреймворк

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

Одним из самых популярных фреймворков для создания отзывчивых веб-проектов является Bootstrap. Хотите — верьте, хотите — нет, но в самой стабильной третьей версии фреймворка для основного текста по умолчанию установлен единый размер 14px, а в ранних релизах четверной версии он увеличен до 16px. Да, Bootstrap заточен под стратегию mobile-first, но дизайнеры и разработчики могут адаптировать некоторые настройки под разные случаи использования сайта. Если оставить все размеры шрифтов по умолчанию, то мы будет использовать мобильные версии даже на больших экранах.

Зачем делать основной текст крупнее

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

1. Крупный шрифт лучше работает на расстоянии

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

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

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

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

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

2. Крупный шрифт повышает читабельность

В среднем пользователи читают лишь около 28% слов на странице — даже скорее сканируют, чем читают, потому что в интернете очень много информации, а время пользователя ограничено. Люди очень редко читают “интенсивно” — для этого требуется гораздо больше концентрации.

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

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

Улучшая читабельность текста (а не просто разборчивость), мы увеличиваем вероятность того, что пользователь прочитает (или просканирует) наш контент. Чтобы читать крупный текст, требуется меньше концентрации.

3. Крупный шрифт улучшает юзабилити

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

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

4. Крупный шрифт повышает визуальную значимость

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

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

Кто переходит на крупный шрифт?

Ниже приведен список сайтов, которые используют крупный шрифт даже на небольших экранах (например, с разрешением  1440х900). Они перешли на шрифты от 20px и вплоть до 58px!

The Washington Post — 20px

Fortune Magazine — 20px

Zeit Online — 20px

CSS-Tricks — 20px

Edenspiekermann — 20px

The Great Discontent — 20px

Medium — 21px

Forbes — 21px

Ways We Work — 21px

Jeffrey Zeldman — 24px

Alessandro Scarpellini — 24px

Misplaced — 24px

Trent Walton — 25px

Commando Group — 26px

Ediciones Daga — 34px

Eli Rousso — 36px

Sang Han — 48px

Van Schneider — 58px

В заключение

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

Подписывайтесь на меня в Твиттере

Статья также опубликована здесь

Шрифты для обложек глянцевых журналов

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

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

Paris Typeface в журнале Vogue

Логотип Vogue Magazine продвинулся в последние годы, но его внешний вид всегда остается в стиле шрифтов Didot. Начиная с 2015 года семейство Sans-Serif используется для обложки и контента журнала Vogue.

Paris Typeface используется в специальных выпусках журнала Vogue с участием всех самых успешных девушек, таких как Gigi Hadid, Selena Gomez, Kendall Jenner, Selena Gomez, Lupita, Cara Delevingne, Rihanna и многих других.

Paris Typeface — один из самых интересных шрифтов, когда-либо созданных для журналов моды.

Didot в журнале Elle

Шрифт для журнала Elle — оригинальный Didot, который дополняется небольшой размашистостью. Брендинг журнала является синонимом логотипа. На обложке с Эммой Уотсон, название журнала отходит на второй план, подчеркивая значимость знаменитости. Но даже частично скрытая, сила бренда остается непоколебимой.

В журнале Elle Magazine имя состоит из строгого, органичного шрифта стиля Sans-Serif. На обложке есть контрастные типографские отношения для максимального визуального контраста. Главные заголовки на обложке с Эммой Уотсон выполнены в стиле Serif, а остальные шрифты подзаголовков в Sans-serif. Он создает визуальную иерархию, текст Serif является самым важным.

Попробуйте Linotype Didot Headline Roman для названия вашего журнала и Theano Didot в качестве бесплатной альтернативы.

Porter

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

Lingerie Typeface в журнале Vogue

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

Didot в журнале Harper’s Bazaar

Harper’s Bazaar — пример типографского логотипа, который получился настолько крутым, что мгновенно стал синонимом брендинга. Созданный в 1934 году Алексеем Бродовичем знаковый логотип, базой которого послужил шрифт Didot. Он отвечал за внешний вид и оформление журнала, и логотип символизирует его элегантность и стиль.

Heroine Pro в журнале Marie Claire

Название Marie Claire тесно связано со шрифтом Heroine Pro. Содержание журнала — со шрифтом Mercury. Это сочетание шрифтов говорит напрямую с его целевой женской аудиторией. Название расположено на самой высокой точке макета, и, как и в большинстве обложек журналов остается незаметным по сравнению с фокусной фотографией.

Franklin Gothic Heavy в журнале Glamour Magazine

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

В основе названия журнала используется шрифт Franklin Gothic Heavy. Это особый стиль шрифта, созданный специально для журнала Glamour, автор Franklin Gothic.

Esquire Magazine

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

Журнал также любит создавать контрасты на своих обложках с ультрачистыми без засечек, такими как Brandon Text или EmBauhaus. Издание также часто использует Mercury Text на некоторых своих обложках вместе со своим обычным шрифтом Granger для подзаголовков.Typescreen Esquivel — хорошая копия оригинального логотипа Esquire.

GQ Magazine

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

Empire

Заголовок журнала Empire претерпел недавние изменения, но классическая версия названия основана на шрифте Relay Bold. Посмотрите также шрифт EE Kaffeesatz, который ближе по стилю к новому типу заголовка.

Материалы:

  • Perfect Fonts for Magazine Covers
  • Fonts In Use By Fashion Magazines

Доход сайта и привлечение читателей

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

Именно поэтому каждый элемент вашего сайта должен быть направлен на достижение конечной цели. Текстового контента это правило касается в первую очередь. Ведь текст на сайте – это основное средство влияние на читателя.

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

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

4 факта о чтении, которые должен знать веб-дизайнер

1) После двадцати лет качество зрения у людей снижается, в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.

2) У 9% американцев есть проблемы со зрением, а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.

3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.

4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства, это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.

16px текст на 24′ мониторе и 12pt текст в книге

16px текст на 15,4′ мониторе и 12pt текст в книге

Плохие шрифты снижают посещаемость сайта

Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.

Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.

Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?

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

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

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

Не заставляйте пользователя думать!

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

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

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

16 px – это удобно

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

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

Также по теме:
  1. Типографская раскладка и спецсимволы
  2. Четыре ключевых компонента качественного веб-дизайна
  3. Стопроцентно читабельный сайт

1. Изменение шрифтов в Заполнителе

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

Шаг 1. Меняем шрифт в Заполнителе «Образец заголовка» (выделите Заполнитель «Образец заголовка» → лента Главная → группа команд Шрифт → кнопка выпадающего меню на имени шрифта → шрифт Arial Black):Шрифты в презентации

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

Теперь сделаем то же самое для Заполнителя «Образец текста».

Шаг 2. Меняем шрифт в Заполнителе «Образец текста» (выделите Заполнитель «Образец текста» → лента Главная → группа команд Шрифт → кнопка выпадающего меню на имени шрифта → шрифт Arial Narrow):Шрифты в презентации

Шаг 3. Переходим в режим «Обычный» (Режим редактирования слайдов), то есть выходим из режима «Образец слайда» (лента Образец слайда → кнопка Закрыть режим образца):Шрифты в презентации

Или может вы предпочтёте кнопку, которая находится на строке состояния?Шрифты в презентации

Мы вышли в режим «Обычный» и можем начинать делать презентацию. Для начала я предлагаю вставить диаграмму.

Шаг 4. Вставляем диаграмму (щелчок ЛМ по иконке диаграммы в центре Заполнителя «Текст слайда»):  Шрифты в презентации

Можно также воспользоваться лентой Вставка (лента Вставка → группа команд Иллюстрации → команда Диаграмма):Шрифты в презентации

На всякий случай покажу в полноэкранном режиме:Шрифты в презентации

Я уже делилась с вами секретом 6, в чем разница между вставкой объекта через Заполнитель и вставкой объекта через ленту «Вставка» (я назвала такую вставку «ручным» режимом. Правда, там речь шла о таблицах.

В результате наших действий в любом случае появится диалоговое окно «Вставка диаграммы»:Шрифты в презентации

Не будем разбирать прелести этого окна, а нажмём сразу кнопку ОК.

На слайде появилась диаграмма с таблицей, а заодно и две новые ленты для работы с диаграммой – Конструктор и Формат:Шрифты в презентации

Чтобы таблица не мешала восприятию диаграммы, щёлкните ЛМ по крестику в правом верхнем углу таблицы. А заодно обратите внимание на шрифты, которые используются для текстовой информации диаграммы.

Шаг 5. Смотрим шрифты в диаграмме (выделите диаграмму → лента Главная → группа команд Шрифт):Шрифты в презентации

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

Мало того… Если вы пожелаете нарисовать автофигуру средствами PowerPoint и напечатать какой-либо текст в автофигуре, то текст тоже будет Calibri:Шрифты в презентации

Можете проверить таблицу и убедиться, что и там текст будет печататься шрифтом Calibri:Шрифты в презентации

А заодно и посмотреть, какой шрифт у Верхнего колонтитула. Думаю, что вы не удивитесь шрифту Calibri. Всё правильно – мы же не меняли шрифт Заполнителя «Верхний колонтитул».

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

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

2. Изменение набора шрифтов для собственной презентации

Закройте презентацию без сохранения. А затем откройте её вновь. Или скачайте презентацию тут. Так как я сохранила свою презентацию в режиме «Образец слайда», то и откроется она в режиме «Образец слайда».

Шаг 1. Вызываем перечень наборов шрифтов (лента Образец слайдов → группа команд Фон → команда Шрифты):Шрифты в презентации

И в полноэкранном режиме:Шрифты в презентации

Шаг 2. Выбираем новый набор шрифтов (лента Образец слайдов → группа команд Фон → команда Шрифты → окно Office → набор шрифтов Franklin Gothic):Шрифты в презентации

Теперь мы имеем:

  1. Для заголовков ‒ шрифт Franklin Gothic Medium
  2. Для основного текста ‒ Franklin Gothic Book

Вы спросите: а в чём отличие от предыдущего способа? Проверим?

Шаг 3. Переходим в режим «Обычный» (лента Образец слайда → кнопка Закрыть режим образца):Шрифты в презентации

Шаг 4. Вставляем диаграмму (щелчок ЛМ по иконке диаграммы в центре Заполнителя «Текст слайда»):Шрифты в презентации

Шаг 5. Смотрим шрифты в диаграмме (выделите диаграмму → лента Главная → группа команд Шрифт):Шрифты в презентации

Убедились, что надписи в диаграмме созданы шрифтом Franklin Gothic Book (Основной текст)? Можете вставить таблицу, автофигуру с текстом, объект SmartArt – всюду будет шрифт Franklin Gothic Book (Основной текст). Заодно посмотрите шрифт Верхнего колонтитула – тоже Franklin Gothic Book!

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

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

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

А теперь выясним: почему я попросила вас заново открыть презентацию? Вспомните в Секрете 9 я предостерегала вас от ручного выбора цвета. Ведь при смене палитры выбранный вручную цвет не измениться.

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

Поэтому даю совет:

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

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

3. Создание собственного набора шрифтов для презентации

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

Шаг 1. Переходим в режим «Образец слайда» (лента Вид → группа команд Режим образцов → флажок на команде Образец слайдов (1) либо кнопка Образец слайдов на Панели быстрого доступа (2):Шрифты в презентации

Шаг 2. Вызываем команду «Настроить шрифты» (лента Образец слайдов → группа команд Фон → команда Шрифты → команда Настроить шрифты в нижней части перечня наборов шрифтов):Шрифты в презентации

Появляется диалоговое окно «Создание новых шрифтов темы»:Шрифты в презентации

Если вы помните, то мы задавали набор шрифтов для заголовков ‒ шрифт Franklin Gothic Medium и для основного текста ‒ Franklin Gothic Book.

Прежде всего следует задать новое имя вашему набору шрифтов, а то имя «Другая 1» выглядит как-то несолидно.

Шаг 3. Присваиваем имя новому набору шрифтов:Шрифты в презентации

Шаг 4. Выбираем шрифт для заголовка и основного текста (кнопка выпадающего меню → щелчок ЛМ по выбранному шрифту в списке шрифтов):Шрифты в презентации Шрифты в презентации

Кстати, вы можете выбрать свои шрифты, а не ориентироваться на меня.

Шаг 5. Вызываем команду «Настроить шрифты» (лента Образец слайдов → группа команд Фон → команда Шрифты):Шрифты в презентации

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

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

Шаг 6. Изменяем свой набор шрифтов (Лента Образец слайда → группа команд Фон → кнопка Фон → команда Шрифты → Набор шрифтов «Фирменный стиль (или как вы его назвали) → щелчок ПМ):Шрифты в презентации

Из контекстного меню выберите команду «Изменить…» и скорректируйте шрифты.

Обратите внимание, что редактировать встроенные наборы шрифтов невозможно, такой команды в контекстном меню просто нет:Шрифты в презентации

Шаг 7. Переходим в режим «Обычный» (лента Образец слайда → кнопка Закрыть режим образца):Шрифты в презентации

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

Всё в порядке: в нашей новой презентации будут использоваться набор шрифтов «Фирменный стиль» для всех объектов.

Теперь вы сможете:

  1. Поменять шрифты в Заполнителях
  2. Поменять набор шрифтов для всей презентации
  3. Создать новый набор шрифтов для своей презентации и отредактировать его

Понравилась статья? Поделиться с друзьями: