Лотеринг шрифт: Возращение в Лотеринг

Пять шрифтов с великой миссией: rentafont — LiveJournal

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

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

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

1. Шрифт для лучшего запоминания

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

При этом повышается эффективность запоминания прочитанного текста. Шрифт Sans Forgetica помогает быстро запоминать небольшие объемы информации, например, для изучения иностранного языка, сдачи экзамена, публичного выступления. Кроме того, дополнительная нагрузка на мозг при чтении является хорошей профилактикой старческой деменции.

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

Это решение не случайно. Авторы экспериментировали с разными наклонами и вырезами, в результате, именно такое искажение позволило тестовой группе запомнить на 14% больше информации по сравнению с текстом, набранным шрифтов Arial.

→ Скачать шрифт Sans Forgetica от RMIT бесплатно

2. Шрифт для слепых и слабовидящих

Украинско-польская дизайнерка Виктория Грабовская разработала новый шрифт, который объединяет зрительный и тактильный опыт восприятия. Его буквы состоят из рельефных точек, как в системе Брайля, но по форме это обычные прописные буквы. Новый цифровой шрифт Мария Терезия основан на системе австрийского тифлопедагога Иоганна Клейна и на опыте современных школ для незрячих и слабовидящих.

В презентации на Typo Berlin 2017 Виктория поясняет, что ее шрифт создан не для замены Брайля, а для того, чтобы помочь незрячим изучить формы букв, для упрощения коммуникации между незрячими и зрячими, а также для применения в повседневной жизни. Буквы используются не только для чтения и письма, они – часть общей культуры. Они также помогают в устных описаниях вещей и в opиeнтации в пространстве. Кроме того, тактильный шрифт поможет сохранить память о буквах у ослепших во взрослом возрасте людей, которые со временем забывают их форму.

→ Твиттер авторки шрифта Виктории Грабовской

3. Шрифт для людей с дислексией

Около 10% людей страдают от дислексии, то-есть испытывают серьезные трудности при чтении.

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

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

→ Купить шрифт Dyslexie Font от Кристиана Боера

→ Скачать шрифт OpenDyslexic от Абелардо Гонзалеса бесплатно

4. Шрифт-флаг LGBTQ активистов

Активисты из NewFest и NYC Pride вместе с Ogilvy & Mather и создателями шрифтовых инструментов Fontself создали бесплатный шрифт по мотивам Радужного Флага. Этот шрифт был назван «Gilbert» в честь Гилберта Бейкера – создателя знаменитого символа LGBTQ. Он был активистом, художником, и был известен тем, что помогал друзьям создавать баннеры для протестов и маршей. Демо-версия Gilbert доступна на сайте typewithpride.com в двух вариантах, в виде стандартного векторного OpenType шрифта и цветного шрифта OpenType-SVG, который можно использовать в Photoshop CC 2017.

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

→ Скачать шрифт Gilbert бесплатно

5. Эко-френдли шрифты для экономии чернил

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

Специальные эко-шрифты, экономящие чернила принтеров дома и в офисе – отличный пример социально ответственного дизайна и нестандартного подхода. Это текстовые шрифты с небольшими пустотами внутри штрихов в виде точек или линий. Такие малозаметные изменения позволяют экономить от 15% до 50% чернил, сохраняя четкость краев символов. В текстовых размерах вроде 10 или 12 кегля краска сама заполняет пробелы за счет растекания или впитывания.

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

Второй эко-френдли шрифт от британской компании Ryman оказался еще более выгодным. Его просветы в виде продольных канавок позволяют экономить до 39% чернил. Этот бесплатный шрифт с засечками выглядит очень эстетично в крупном размере на промо-постерах. При этом он остается практичным текстовым шрифтом!

→ Статья о первом экологичном шрифте Ecofont от Spranq

→ Купить программу Ecofont для экономии чернил при печати

→ Анализ эффективности Эко-шрифта для струйных принтеров

→ Скачать шрифт Eco от Ryman бесплатно

Интересно было узнать, как шрифты делают мир лучше? Тогда вам пригодится Руководство по 10 качествам шрифтов и их применению в дизайне, чтобы манипулировать сознанием вашей целевой аудитории как профи! 😉

Типография TNL — Национальная лотерея

Миллионы игроков. Миллионы победителей. Тысячи хороших дел. Один бренд делает выдающиеся события для всех.

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

TNL Effra

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

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

Веса

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

TNL Effra

Heavy

Отлично подходит для привлекающих внимание заголовков и больших чисел.

TNL Effra

Обычный

Отлично подходит для основного текста и изображений.

83333rem;»> TNL Effra
Light

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

Высота строки (интерлиньяж)

На 15% меньше размера шрифта.

Межбуквенный интервал
(отслеживание в Adobe)

-2,5% размера шрифта.

Kerning

Оптический

Верхи
Пример
01

. ПРИМЕР 02 

ПРИМЕР 02 

Размер шрифта:

Высота строки:

Межбуквенный интервал:

11111rem; line-height: 1.27778rem;»> Трекинг:

ЗАГЛАВНЫЕ ПРИМЕРЫ 03

Размер шрифта:

Высота строки:

Межбуквенный интервал:

Трекинг:

Высота строки (интерлиньяж)

На 5% меньше размера шрифта.

Межбуквенный интервал

(отслеживание в Adobe)

0,5% от размера шрифта.

Кернинг

Оптическая

Нижний регистр

Пример
01

Размер шрифта:

11111rem; line-height: 1.27778rem;»> Высота линии:

.

Межбуквенный интервал:

Трекинг:

Нижний регистр 
пример 03

Размер шрифта:

Высота строки:

Межбуквенный интервал:

Трекинг:

Сочетания шрифтов

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

ПРИМЕР 01

ВТОРИЧНАЯ ЛИНИЯ

Пример 02

ВТОРИЧНАЯ ЛИНИЯ

Выравнивание

Цвета шрифта

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

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

Шрифт и изображения

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

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

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

Экструдированный тип

Экструдированный тип

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

Живой текст против статического

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

Использование экструзии для живого текста на собственных каналах в настоящее время находится на стадии тестирования.

Живой текст

Статический текст

Углы

Создается путем выдавливания текста под углом 45° к правому нижнему краю холста.

Неправильное использование типографики

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

Не сочетать с фотографией

Не делать выдавливание вторичным сообщением

Не обрезать выдавливания

Не использовать несколько начертаний шрифта

Система в действии

Другие примеры того, как активы оживают, см. в разделе «Система в действии».

Дополнительные примеры того, как активы
воплощаются в жизнь, см. на странице
«Система в действии».

Предыдущий раздел

888889rem; line-height: 1.22222rem;»> Следующий раздел

ToolKit :: Лотерея Огайо

Нажмите на вкладку с номером слева, чтобы увидеть характеристики конкретного актива

1

2

3

Заголовок: h4

4

Заголовок: h5

5

Рубрика: H5

6

Рубрика: H6

7

Текст абзаца: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine.

8

• Текст элемента списка.
• Корускант ки-гонн.
• Dalonbian firrerreo cognus jamillia.

9

1. Текст элемента упорядоченного списка
2. Библия.
3. Амедда мириалан коль босс.

10

Текст, выделенный жирным шрифтом

Текст, выделенный курсивом

Текст, выделенный жирным курсивом

Текстовая ссылка

11

Панель содержания инструкций

Текст инструкции: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine. Himoran wyl t’landa arcona zabrak. Марек Джан Триклопс Бардан Дак Долдур Худжиб Оззел. Мофф хук антиллес хазрах трандошан ади ансион.

Текст выноски внизу

12

Обработка изображений и надписей во всю ширину модуля.

13

Обработка изображения и заголовка с выравниванием по левому краю.

Текст абзаца: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine.

• Текст элемента списка.
• Корускант ки-гонн.
• Dalonbian firrerreo cognus jamillia.

Solo sulorine mirta owen crynyd cassio cato coruscant vebb. Haako er’kit пиропатрон x’ting. Кушибанский мимбанит Акбар из калитки Скайуокер Терс. Сидиус полис аксмис цавонг юужань госсам скайуокер кель-дрома.

14

Текст абзаца: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine.

• Текст элемента списка.
• Корускант ки-гонн.
• Dalonbian firrerreo cognus jamillia.

Solo sulorine mirta owen crynyd cassio cato coruscant vebb. Haako er’kit пиропатрон x’ting. Кушибанский мимбанит Акбар из калитки Скайуокер Терс. Сидиус полис аксмис цавонг юужань госсам скайуокер кель-дрома.

Выровненное по правому краю изображение и заголовок.

1

Заголовок: h2

Рабочий стол

Roboto Slab — обычный
Размер шрифта: 36px
Шестнадцатеричный цвет: #BE0F34
Цвет RGB: R:190 G:15 B:52
Высота строки: 40 пикселей

Мобильный

Roboto Slab — обычный
Размер шрифта: 40 пикселей
Шестнадцатеричный цвет: #BE0F34
Цвет RGB: R:190 G:15 B:52
Высота строки: 43 пикселя

Применение

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

Рекомендуемое количество слов

3-10 слов

Предлагаемое количество символов

До 80 лет

2

Заголовок: h3

Рабочий стол

Roboto Slab — обычный
Размер шрифта: 36px
Шестнадцатеричный цвет: #BE0F34
Цвет RGB: R:190 G:15 B:52
Высота строки: 40 пикселей

Мобильный

Roboto Slab — обычный
Размер шрифта: 40 пикселей
Шестнадцатеричный цвет: #BE0F34
Цвет RGB: R:190 G:15 B:52
Высота строки: 43 пикселя

Применение

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

Рекомендуемое количество слов

3-10 слов

Предлагаемое количество символов

До 80 лет

3

Заголовок: h4

Рабочий стол

Робото — Свет
Размер шрифта: 24 пикселя
Шестнадцатеричный цвет: #BE0F34
Цвет RGB: R:190 G:15 B:52
Высота строки: 28 пикселей

Мобильный

Робото — Свет
Обычный размер шрифта: 33 пикселя
Шестнадцатеричный цвет: #BE0F34
Цвет RGB: R:190 G:15 B:52
Высота строки: 33 пикселя

Применение

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

Рекомендуемое количество слов

3-30 слов

Предлагаемое количество символов

До 175 лет

4

Заголовок: h5

Рабочий стол

Робото – средний
Размер шрифта: 18 пикселей
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 21 пиксель

Мобильный

Робото – Средний
Размер шрифта: 26px
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 30 пикселей

Применение

Используется как для небольших субтитров, так и для выделения некоторых текстовых выносок; то есть: общие коэффициенты шансов под текстовым блоком, объясняющим игру. Также могут быть заголовками таблиц.

Рекомендуемое количество слов

3 – 30 слов

Предлагаемое количество символов

До 175 лет

5

Рубрика: H5

Рабочий стол

Робото – смелый
Размер шрифта: 16 пикселей
Шестнадцатеричный цвет: #5161AC
Цвет RGB: R:81 G:97 B:172
Высота строки: 19 пикселей

Мобильный

Робото – смелый
Размер шрифта: 21px
Шестнадцатеричный цвет: #5161AC
Цвет RGB: R:81 G:97 B:172
Высота строки: 26 пикселей

Применение

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

Рекомендуемое количество слов

3 – 30 слов

Предлагаемое количество символов

До 175 лет

6

Рубрика: H6

Рабочий стол

Робото – смелый
Размер шрифта: 18 пикселей
Шестнадцатеричный цвет: #20262B
Цвет RGB: : R:32 G:38 B:43
Высота строки: 21 пикс.
Интервал между буквами: 6px
Всегда в верхнем регистре

Мобильный

Робото – смелый
Размер шрифта: 21px
Шестнадцатеричный цвет: #20262B
Цвет RGB: : R:32 G:38 B:43
Высота строки: 26 пикселей
Интервал между буквами: 7px
Всегда в верхнем регистре

Применение

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

Рекомендуемое количество слов

1–5 слов

Предлагаемое количество символов

До 40 лет

7

Текст абзаца

Рабочий стол

Робото — Свет
Обычный размер шрифта: 16px
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 24 пикселя
Разделение абзаца: 15 пикселей

Мобильный

Робото — Свет
Обычный размер шрифта: 21px
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 24 пикселя
Разделение абзаца: 15 пикселей

Применение

Это основная копия сайта.

8

Ненумерованный список абзацев

Форма элемента списка: пуля
Поле слева: 25 пикселей
Отступ слева: 25 пикселей
Текст будет текстом абзаца

9

Упорядоченный список абзацев

Элемент списка Форма: Число
Поле слева: 25 пикселей
Отступ слева: 25 пикселей
Текст будет текстом абзаца

10

Итерации текста абзаца

Курсив: Roboto — светлый курсив
Полужирный курсив: Roboto — жирный курсив
Жирный: Робото – Жирный
Цвет ссылки: #5161AC, подчеркнутый

11

Панель с инструкциями

Состав

h4 Титул
Текст абзаца
h5 Нижняя выноска
Цвет фона: #F1EFEE
Цвет фона RGB: R:241 G:239Б: 238
Отступ: 20 пикселей
Ширина: 100% контейнера

Применение

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

12

Полноэкранное изображение

Ширина

864px

Высота

Переменная, но рекомендуется 328px

Подпись

Робото – смелый
Размер шрифта: 14 пикселей
Мобильный Размер: 18px
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 16 пикселей
Мобильная линия Высота: 21 пикс.
Расстояние между изображениями и подписями: 10 пикселей
Нижний край: 20 пикселей
Выравнивание текста: по левому краю

Применение

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

13

Изображение с выравниванием по левому краю

Ширина

От 200 до 432 пикселей, но рекомендуется 338 пикселей.

Высота

Переменная, но рекомендуется 328px

Подпись

Робото – смелый
Размер шрифта: 14 пикселей
Мобильный Размер: 18px
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 16 пикселей
Мобильная линия Высота: 21 пикс.
Расстояние между изображениями и подписями: 10 пикселей
Нижний край: 20 пикселей
Выравнивание текста: по левому краю

Контейнер изображения/подписи

Плавающее левое текстовое содержимое

Применение

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

14

Изображение с выравниванием по правому краю

Ширина

От 200 до 432 пикселей, но рекомендуется 338 пикселей.

Высота

Переменная, но рекомендуется 328px

Подпись

Робото – смелый
Размер шрифта: 14 пикселей
Мобильный Размер: 18px
Шестнадцатеричный цвет: #20262B
Цвет RGB: R:32 G:38 B:43
Высота строки: 16 пикселей
Мобильная линия Высота: 21 пикс.
Расстояние между изображениями и подписями: 10 пикселей
Нижний край: 20 пикселей
Выравнивание текста: по левому краю

Контейнер изображения/подписи

Расплывается вокруг текста

Применение

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