Нестандартные шрифты в макете сайта что делать?
Почему shit happens?
В сети есть множество инструкций для начинающих дизайнеров — о том, чего нельзя делать в макете. Например, посмотрите эту статью на Хабре.
Однако даже при соблюдении всех написанных гайдов, может возникнуть сложная ситуация — например, в случае, когда заказчик настаивает на использовании конкретного нестандартного шрифта.
Под давлением руководитель проекта «пропускает» указанный шрифт, дизайнер применяет его, заказчик утверждает. А веселее всех придется верстальщику.
Сначала немного теории
Небольшая иллюстрация:
Загадка: будут ли шестерни вращаться на конструкции номер 4?
Пусть вот эта эволюция шестеренок показывает то, как создается интернет-проект. А иконки человечков выше — будут специалистами, отвечающими за каждый этап работ.
Значит ли это, что первый работник более свободен в «производстве»? Что, к примеру, он может выточить шестеренку не с восемью зубцами, а с двенадцатью и повернуть ее на угол в 37,5 градусов? Значит ли это, что замыкающий производство работник должен больше всех париться: чтобы его шестеренка подошла по диаметру, положению, углу поворота?
Два раза нет.
Чтобы производство происходило без сбоев и задержек, каждый из работников должен учитывать специфику работы на следующих этапах. Отгружать качественный продукт и не создавать лишней работы ни другим, ни себе в будущем.
Все стараются следовать указанной заповеди, но, как мы уже увидели, это не всегда получается. Иногда по неосторожности дизайнера, иногда по необдуманности решения PM’а, иногда из-за упертости заказчика.
Что делать верстальщику, когда в макете утвержден «небезопасный» шрифт?
Ну, все, кто знаком с версткой, знают про таблицы безопасных шрифтов:
С этими проблем не возникает: верстальщик задает в CSS шрифты в последовательности приоритетов — шрифты отображаются корректно под любыми браузерами.
Но если шрифт «небезопасный»?
Нам не подходит вариант с картинками вместо текста — это вообще ни в какие стандарты качества не лезет.
Вариант 1. Google Web Fonts
Гугл создал свою базу шрифтов, которыми можно свободно пользоваться при создании дизайна и не задумываться о последствиях.
Когда верстальщик получит макет, он просто укажет путь к нужному шрифту на сервере Гугла.
Корпорация Добра подарила миру целую кучу полезных вещей и не останавливается на этом.
Однако вариант с Google Web Fonts не всегда оказывается пригодным. Например, если дизайнер использовал шрифт, которого нет в базе (а там не так уж много кириллических шрифтов). Что делать? Менять на другой нельзя, потому что макет утвержден.
Вариант 2. Значение @face-font для CSS
Для того, чтобы заработал этот способ, нужно произвести чуть больше действий. Вы находите нужный шрифт у себя на винчестере или в любой базе бесплатных шрифтов, загружаете в конвертер (например, в этот), получаете архив с готовым фрагментом кода и вашим шрифтом во всех возможных форматах.
Далее задача верстальщика сводится к прописыванию в CSS полученного кода и — сайт преображается в то, что себе представлял дизайнер.
Причем подо всеми браузерами. К примеру, старый IE 6 «ест» только шрифты в формате EOT, и благодаря @face-font вы получите корректное отображение шрифта на сайте и под IE (он будет ссылаться на файл в формате EOT, другие браузеры будут «тянуть» привычные им форматы TTF, OTF, SVG или даже WOFF).
Начальник, у нас проблемы! А именно, проблема кроется в словах: «или в любой базе бесплатных шрифтов». Наиболее уважаемые конвертеры (с лучшим результатом на выходе) отказываются генерировать платные шрифты, а остальные чаще всего генерируют их некорректно. Получается, что и этот способ не всегда подходит.
Вариант 3. Cufon для JavaScript
Есть такая вещица, как Cufon. Состоит из двух частей: генератора шрифта (внешне работает по принципу конвертера из прошлого примера) и движка для рендеринга. Второй нужно скачать и подключить к вашему документу.
Итак, загружаем шрифт, тот преобразуется в некий промежуточный формат. Верстальщик выбирает элементы для прорисовки (да, именно для прорисовки — здесь шрифты будут «вырастать» на странице сайта в реальном времени путем рендеринга).
Получаем результат, который более-менее адекватно выглядит под разными браузерами.
Но!
У Cufon’а есть свои недостатки. Например:
- Страница будет грузиться дольше, из-за загружаемых сторонних файлов.
- Выделение и копирование такого текста происходит проблематично.
- Пока скрипт не «отработал», пользователь видит текстовую страницу со стандартными шрифтами.
История одного проекта, или «Буква О какая-то советская»
У нас был один заказчик, которому очень понравился шрифт Myriad Pro, коим дизайнер оформил все заголовки. Клиент прямо-таки влюбился в шрифт.
Макет утвердили, всех все устраивало, руководитель проекта с чувством выполненного долга передал дизайн на верстку.
И началось.
Естественно, что в «шрифтах для веба» от Гугла его не нашлось.
Сначала попробовали стандартные способы с заменой на похожие DIN Pro и PT Sans (тогда мы еще не знали о влюбленности клиента).
Ожидаемо, что получили несгибаемый отказ. Аргументация как раз была из разряда: «в этих ваших шрифтах буква О выглядит слишком по-советски».
Попробовали конвертировать c помощью той же «Белки» в шрифт, пригодный для веба. Но Myriad Pro — шрифт коммерческий. Под разными браузерами получалось не айс.
Вот так отображается шрифт под разными браузерами:
А в ТЗ четко написано о том, что сайт должен корректно отображаться подо всеми перечисленными.
Владимир Завертайлов
CEO&Founder
— Еще на заре сайтостроительства был вариант с flash (делать специальную чистую flash-ку, в которую импортировался шрифт). Работало только на заголовках. А вот ситуация, когда утвердили макет с одним шрифтом, а потом технологически его нельзя поменять — крайне неприятная. Даже если есть платный купленный шрифт на руках. Может начаться стандартное нытье «ну вы же профессионалы, должны были предусмотреть заранее, так что теперь делайте, как хотите и неебет». Насколько я знаю, конфликт между дизайнерским решением и техническими возможностями по реализации — это вообще не из веба пришло.
В любой промышленности то же самое. Хоть в автомобильной (дизайнерские финтифлюшки приходится отрывать ради аэродинамики), хоть в производстве iPhone. Обычно заканчивается тем, что ищется альтернативный вариант, который всех устраивает, или даже вариант лучший, чем тот, что предлагали изначально. На это может уйти масса незапланированного времени и свести прибыль студии с проекта к убыткам. Риски — не прогнозируемы. Отчасти поэтому студии тиражируют какое-то обкатанное решение. Пожалуй, одной из менеджерских находок, которой мы научились, работая с нестандартными шрифтами — это сослаться на авторитетный источник, в котором описано, что проблему в общем случае решить не получится. Это действует на адекватных клиентов, позволяет настроить на поиск и выбор из альтернативных вариантов, за что им спасибо.
В результате так и получилось: сменили Myriad Pro на альтернативный шрифт (в верхнем меню это PT Sans Bold):
Как вывод: современные веб-технологии, конечно, стремятся к тому, чтобы избавить разработчиков от разного рода ограничений.
Возможно, когда-то даже самые смелые идеи и дизайнерские решения можно будет с легкостью воплощать в готовом продукте. Но пока на достойную реализацию таких «смелых идей» уходит довольно много времени и сил верстальщиков. Неоправданно много.
Избавьте себя и разработчиков от дополнительных заморочек, используйте безопасные и конвертируемые шрифты.
Как использовать необычные шрифты | Блог Смартпринт.рф
Шрифт — элемент дизайна, не акцентирующий на себе внимание, но влияющий на восприятие рекламного продукта в целом. Необычные шрифты отлично смотрятся в логотипах, названиях, но для текста они не годятся.
Шрифт задает настроение, эмоцию. Например, шрифты без острых углов на уровне подсознания говорят клиенту, что мы всегда рады ему, говорит о дружелюбии.
Шрифт RoundsВыбор шрифта зависит от того, на какую эмоцию вы хотите настроить потребителя.
Факторы, влияющие на восприятие шрифта:
- Цвет шрифта
- Пропорции шрифта
Цвет шрифта.
Экспериментами с цветом текста (основной текст) лучше не увлекаться и выбрать стандартный вариант «черное на белом/белое на черном». В противном случае глаза читающего быстро устанут. Цветовое выделение подходит для акцентирования внимания на заголовках и призывах к действию.
Пропорции шрифта. Есть узкие и широкие шрифты. Этот фактор играет важную роль, когда нужно вместить определенное количество текста, либо текст должен занимать определенное количество площади рекламного носителя по законодательству (создание киноплакатов, упаковка табачной продукции).
Использовать лучше не больше 3-х разных шрифтов.
Длянаружной рекламы подходят жирные крупные шрифты, которые легко читаются и контрастируют с фоном. Если рекламу будут читать с расстояния 10 метров, то буквы должны быть не менее 10 см в высоту.
А для печатных изданий больше подходят шрифты с засечкам, т.к. буквы выглядят более раздельно.
Позаботьтесь об удобстве прочтения. Если берете нетривиальный шрифт, то используйте его только для заголовков, выделения важных мыслей.
Для основного текста используйте шрифты стандартного начертания
| Serif Шрифты с засечками– декоративными элементами, которые служат украшением буквы. Такие шрифты используют для печати основного текста. Считается, что при чтении такого текста глаза меньше устают. | Sans Serif Шрифты без засечек. Используются для вывода основного текста на экран. Цель та же — уменьшить утомляемость глаз при чтении с экрана. | Slab Serif Slab Serif (с горизонтальными засечками) имеет переход едва уловимый переход от более тонкой линии к более толстой. Подходит для длинных текстов, для печати детских книг. |
| Характеристика ёмкий, изящный, мощный, классический, универсальный | Характеристика: современный, лёгкий, простой и корпоративный. | Характеристика: презентабельный, массивный, древний, дружелюбный. |
Script Каллиграфия, такой шрифт создается с помощью плавных линий и переходов. Подходит для названий, логотипов. Не рекомендуется использовать для длинных текстов. | Blackletter Blackletter имеет переходы от толстого к тонкому штриху, засечками и длинными завитушками. Стоит использовать шрифты этого семейства с особой аккуратностью, т. к. их экстравагантность не всегда уместна. | Sign Painter Эмитирует роспись кистью. Используется, как декоративный элемент, для создания длинных текстов также, как и Screipt не подходит. |
| Характеристика: классический, романтичный, приятный, теплый и мягкий. | Характеристика: сильный, жесткий, исторический, драматический и холодный. | Характеристика: винтажный, мягкий, рукописный, художественный и игривый. |
Сервис typewolf позволяет подбирать гармоничные шрифтовые пары и предлагает подборки шрифтов по различным направлениям.Так, например, среди популярных: «10 альтернатив Гельветике», «10 лучших бесплатных шрифтов не из Google Fonts», «10 лучших пар сериф + сан-сериф на Google Fonts», «10 необычных гротесков» и множество других полезных подборок.
Шрифт Metropolis. У шрифта две версии: латиница и кириллица.
Отличная шрифтовая пара только с латиницей.
Рукописный шрифт Menttion.
Цены на полиграфию
Цены на дизайн
Загрузите и установите пользовательские шрифты для использования с Office
.Office 2021 Office 2021 для Mac Office 2019 Office 2019 для Mac Office 2016 Office 2016 для Mac Office 2013 Office 2010 Word 2007 PowerPoint 2007 Дополнительно…Меньше
Большинство приложений (например, Microsoft Word, Excel и PowerPoint) содержат шрифты, которые автоматически устанавливаются при установке программного обеспечения. Например, приложения, созданные специально для проектов по оформлению документов, такие как Microsoft Publisher, часто поставляются с несколькими дополнительными шрифтами, которые можно использовать с любой другой программой на вашем компьютере.
Однако иногда вам может понадобиться установить пользовательские шрифты, которые вы создали, купили или загрузили откуда-то еще.
В этой статье мы поговорим о том, как установить эти шрифты, чтобы вы могли использовать их в Microsoft Office.
Примечание. Чтобы встроить шрифты в документ Microsoft Office Word или презентацию PowerPoint, см. раздел Встраивание шрифтов на сайте PPTools.
Поиск пользовательских шрифтов в Интернете
Помимо приобретения и использования шрифтов, установленных с другими приложениями, вы можете загружать шрифты из Интернета. Некоторые шрифты в Интернете продаются на коммерческой основе, некоторые распространяются как условно-бесплатные, а некоторые бесплатны. Сайт Microsoft Typography содержит ссылки на другие производители шрифтов (компании или отдельные лица, не входящие в Microsoft, которые создают и распространяют шрифты), где можно найти дополнительные шрифты.
После того, как вы найдете шрифт, который хотите использовать с приложением Office, вы можете загрузить его и установить через операционную систему, которая в данный момент используется на вашем компьютере.
Многие сторонние компании, не входящие в Microsoft, упаковывают свои шрифты в файлы .zip, чтобы уменьшить размер файла и ускорить загрузку. Если вы загрузили шрифт, сохраненный в формате .zip, дважды щелкните zip-файл, чтобы открыть его.
Установите пользовательский шрифт, который вы загрузили
После того, как вы загрузили шрифт, который хотите установить, вам необходимо установить его в операционной системе. После правильной установки шрифта в операционной системе Microsoft Office сможет его увидеть и использовать. Для получения подробных инструкций выберите используемую операционную систему в раскрывающемся списке ниже.
Выберите вашу операционную систему
- Выберите свою операционную систему
- Windows 7, 8, 10 или 11
- macOS
Найдите загруженный файл шрифта, помня, что он может содержаться в ZIP-файле. Вероятно, он находится в папке загрузок.
Дважды щелкните файл шрифта, чтобы открыть его в средстве просмотра шрифтов
Если вы удовлетворены тем, что вам нужен именно этот шрифт, нажмите Установить в левом верхнем углу.
Закройте средство предварительного просмотра шрифтов и откройте программу Office. Теперь вы должны увидеть новый шрифт в списке шрифтов.
Найдите файл шрифта, который вы загрузили. Скорее всего, он имеет расширение .ttf или .otf и, вероятно, находится в папке загрузок. Дважды щелкните по нему.
Примечание. Если файл шрифта имеет расширение .zip, вам нужно открыть этот .zip-файл и открыть оттуда файл шрифта.
Закрыть книгу шрифтов . Теперь ваш шрифт должен быть доступен для Microsoft Office.
Нажмите Установить шрифт . Он откроется в Font Book .Примечание. Если вы используете Office 2011 для Mac, вам может потребоваться перетащить шрифт в коллекцию Windows Office Compatible в Font Book , чтобы сделать его доступным для Microsoft Office.
Общий доступ к файлам, содержащим нестандартные шрифты
При установке пользовательского шрифта каждый шрифт будет работать только с тем компьютером, на котором он установлен. Пользовательские шрифты, установленные на вашем компьютере, могут не отображаться на другом компьютере. Текст, отформатированный шрифтом, не установленным на компьютере, будет отображаться шрифтом Times New Roman или шрифтом по умолчанию.
Поэтому, если вы планируете поделиться файлами Microsoft Office Word, PowerPoint или Excel с другими людьми, вам нужно знать, какие шрифты являются родными для версии Office, которую использует получатель. Если он не родной, возможно, вам придется встроить или распространить шрифт вместе с файлом Word, презентацией PowerPoint или электронной таблицей Excel. Дополнительные сведения об этом см. в разделе Шрифты, устанавливаемые вместе с Microsoft Office.
См. также
Типография Майкрософт
Измените или установите шрифт по умолчанию в Microsoft Office
org/ListItem»>Пакет языковых аксессуаров для Office
У вас есть идеи по улучшению Microsoft Office?
См. Как оставить отзыв о Microsoft Office?
Использование пользовательских шрифтов и значков
Применение пользовательских шрифтов
Существует два пути использования пользовательских шрифтов. Они следующие:
- Перейти на новый шрифт Google
- Использовать пользовательский шрифт
Шрифты Google
Вы можете обновить шрифты в config.json ; обязательно следуйте формату Google_FontName_Weight .
Пользовательские шрифты
Пользовательские шрифты можно использовать в любой теме.
Чтобы использовать пользовательский шрифт, загрузите его в папку store /content/ в WebDAV (откроется в новой вкладке).
Папка содержимого WebDAV
Эталонные шрифты в заголовке
соответствующего файла шаблона, чтобы они ссылались на ваши пользовательские шрифты. В этом примере логотипа вы должны отредактировать templates/layout/base.html В раздел файла вставьте следующий код (который ссылается на только что загруженный пользовательский шрифт):Для поддержки всех возможных браузеров используйте следующее:
Обновление CSS
Наконец, обновите соответствующий CSS, чтобы он ссылался на тот же шрифт. В этом примере вы должны отредактировать файл assets/scss/layouts/header/_header.scss , чтобы изменить шрифт заголовка.
Файлы, которые не содержат код CSS, переопределяющий шрифт, будут использовать настройки CSS в 9Файл 0135 config.
json .
Поддержка таблиц стилей Sass для шрифтов тем
Для поддержки Page Builder таблица стилей Sass вашей темы должна вызывать пользовательские функции Sass Stencil для преобразования шрифтов, указанных в файле темы config.json . Вы должны вызывать эти функции для каждого ключа шрифта config.json , значение которого вы хотите сделать доступным для переменных Sass.
Тема Stencil по умолчанию включает вызовы этих функций в следующей таблице стилей
Если ваша тема основана на платформе Sass, отличной от Foundation, соответствующая таблица стилей будет иметь другое имя файла SCSS в пределах {theme-name}/assets/scss/.
Как включить шрифты для компоновщика страниц
Предположим, что файл config.json вашей темы содержит следующее имя ключа и значение (детали обоих произвольны, но имя ключа должно заканчиваться на -font , а значение должно соответствовать определенному формату):
В вашей таблице стилей Sass вы бы назвали stencilFontFamily и stencilFontWeight пользовательские функции Sass для соответствующего имени ключа config., например:
json
Эти функции будут извлекать соответствующие значения config.json как:
Это преобразование позволяет вам использовать переменные $body-font-family и $body-font-weight везде, где это необходимо в вашей теме. Если продавец использует Редактор тем для выбора другого семейства шрифтов и/или веса, переменные распространят изменение на всю вашу тему.
Применение пользовательских значков
Установка Grunt
Некоторые статические ресурсы темы Stencil обрабатываются автоматом JavaScript Grunt, где это необходимо. Это означает, что у вас есть некоторые зависимости как от Grunt, так и от npm. Для начала:
Во-первых, убедитесь, что на вашем компьютере глобально установлен Grunt:
нпм установить -g grunt-cli
Затем из корневого каталога вашей темы запустите:
установка нпм
Вызов значков темы
Значки темы Stencil доставляются с помощью одного спрайта SVG, встроенного в страницу в <имя-темы>templates/layout/base.