Text formats. Форматирование и работа со шрифтами – Setka Editor
Управление шрифтами
Подключение шрифтов из Google Fonts
Подключение шрифтов из Adobe Fonts
Получение Adobe Fonts API Token
Загрузка собственных шрифтов
Удаление шрифтов
Удаление шрифтов в Adobe Fonts
Редактирование текстовых форматов
Добавление текстового формата
Размер шрифта
Толщина (вес)
Высота строки
Порядок текстовых форматов
Кастомные настройки жирного и курсива
Настройки для мобильных устройств
Дополнительные настройки оформления
Ссылки
Подписи к изображениям и эмбедам
Перед редактированием текстовых форматов, потребуется определиться с набором используемых шрифтов. Управление дизайн системой поддерживает шрифты из Google Fonts, Adobe Fonts и ваши собственные шрифты в формате WOFF.
Примечание: использование кастомных шрифтов недоступно для бесплатной версии Setka Editor.
Чтобы добавить новые шрифты, откройте любой текстовый формат из списка слева и нажмите Manage Fonts. Затем выберите необходимое из библиотеки Google Fonts, Adobe Fonts, или загрузите кастомные шрифты. Новый шрифт появится в разделе Font family, внутри текстового формата.
Подключение шрифтов из Google Fonts
Для добавления новых шрифтов:
1. Нажмите Manage Fonts и перейдите во вкладку Google Fonts.
2. Введите название шрифта в строке поиска и выберите его:
3. Выберите требуемые языки из списка и нажмите Save.
4. Шрифты появятся в выпадающем меню Font family, внутри текстового формата.
Подключение шрифтов из Adobe Fonts
Для добавления новых шрифтов:
1. Нажмите Manage Fonts и перейдите во вкладку Adobe Fonts.
2. Введите свой Adobe Fonts API Token.
3. После ввода ключа, Adobe Fonts web projects синхронизируются с Setka Editor. Чтобы обновить список проектов, нажмите Sync projects. Выберите нужный web project. К одному стилю можно подключить только один web project, но в нем может быть сколько угодно шрифтов.
4. Шрифты появятся в выпадающем меню Font family, внутри текстового формата. При использовании одновременно Google Fonts и Adobe Fonts, у вас будет несколько групп шрифтов – чтобы понимать, откуда какой шрифт, если у них одинаковые названия.
Примечание: стили Setka Editor не поддерживают опцию Dynamic subsetting из Adobe Fonts.
Получение Adobe Fonts API Token
Для получения API Token:
1. Войдите в свой аккаунт Adobe Fonts и кликните на аватар в правом верхнем углу. В меню выберите API Tokens:
2. Сгенерируйте новый API Token, нажав кнопку Make me a new API token, или скопируйте уже имеющийся.
Загрузка собственных шрифтов
Чтобы добавить кастомные шрифты, нажмите на кнопку Manage fonts. Загрузите файлы во вкладке Upload fonts (они должны быть в формате WOFF). После этого файлы можно переименовать. Чтобы файлы добавились в выпадающее меню выбора шрифтов, нажмите на кнопку Save в появившемся окне.
Удаление шрифтов
Нажмите Manage fonts. Во вкладках Google Fonts и Upload Fonts вы увидите бейджи загруженных шрифтов, при наведении на них появится крестик. Нажмите на него, чтобы удалить ненужные шрифты.
Каждый бейдж показывает, в скольких форматах текста используется выбранный шрифт, чтобы вы случайно не удалили нужные шрифты.
Удаление шрифтов в Adobe Fonts
Если вы удалите какие-то шрифты из Adobe Fonts web projects, они сразу отключатся на вашем сайте и в превью Setka Editor.
Работа с текстом и шрифтами ведётся в блоке Text formats, в меню слева.
При создании стиля с нуля, в нём будут доступны встроенные текстовые форматы:
- Paragraph — обычный текст. Использует тег <p> в HTML-коде статьи.
- Extra Large Header, Large Header, Medium Header, Small Header — заголовки разных размеров. Используют в HTML-коде статьи теги от
- Small Text — текст подписей. Использует тег <p> в HTML-коде статьи.
Также настраиваются подписи к изображениям — Image captions. Для них выбирается один из уже имеющихся текстовых форматов. По умолчанию подписи используют формат Small Text.
Добавление текстового формата
Чтобы добавить текстовый формат, нажмите кнопку Add text format. Внутри формата настройте следующие параметры:
Размер шрифта
Чтобы изменить размер шрифта, перейдите в Text formats ->[Формат из списка] -> Size. Размер шрифта задаётся в пикселях (px).
Толщина (вес)
Чтобы поменять толщину шрифта, перейдите в Text formats -> [Формат из списка] -> Weight. Значение 400 — нормальная толщина, 700 — жирный текст.
Высота строки
Чтобы изменить высоту строки, перейдите в Text formats -> [Формат из списка] -> Line height. Высота строки задаётся в процентах от высоты шрифта.
Порядок текстовых форматов
Иногда требуется менять порядок текстовых форматов — например, если вы создали собственные форматы и хотите, чтобы они выступали первыми в списке.
Каждый текстовый формат можно перетаскивать вверх или вниз, меняя таким образом порядок. Перетаскиваются все текстовые форматы, кроме Paragraph.
Измененный порядок текстовых отобразится в редакторе, после сохранения стиля:
Кастомные настройки жирного и курсива
Иногда недостаточно просто выделить текст жирным или курсивом. В таких случаях можно использовать особые стили для bold и italic. Это классический прием типографики из книг, журналов и газет.
Стилизованные bold и italic дают больше свободы для создания красивого и хорошо читаемого контента.
Чтобы настроить форматирование для жирного и курсива, перейдите в Text formats -> [Формат из списка] -> Advanced bold & italic. Активируйте пункт Custom appearance for Bold text для жирного, или Custom appearance for Italic text для курсива:
Настройки для мобильных устройств
В Управлении дизайн системой доступен предпросмотр стилей для разных устройств. Переключение между типами устройств происходит с помощью кнопок в верхней части экрана: Desktop / Tablet / Mobile.
Текстовые форматы также поддаются мобильным настройкам. Например, если шрифт выглядит слишком крупным на смартфонах, его можно уменьшить или даже заменить на другой.
Чтобы задать параметры шрифтов для планшета или смартфона:
1. Перейдите в Text formats -> [Формат из списка] -> Screen size -> Tablet / Mobile.
2. Активируйте пункт Custom appearance for tablet screen или Custom appearance for mobile screen, соответственно.
3. По умолчанию, стили для планшетов и смартфонов будут такими же, как в разделе Desktop. Но любые их параметры поддаются тонкой настройке:
Дополнительно можно настроить внешний вид ссылок и подписей к изображениям.
Ссылки
Чтобы настроить внешний вид ссылок, перейдите в Text formats -> Links. Ссылки можно:
- Выделить подчёркиванием (Underline style).
- Писать заглавными буквами (Letter Case).
- Выделить, увеличив межбуквенное расстояние (Letter Spacing).
Подписи к изображениям и эмбедам
Чтобы настроить внешний вид подписей к изображениям и эмбедам, перейдите в
Text formats -> Image captions. Подписи к изображениям оформляются одним из уже заданных текстовых форматов.Fonts CSS HTML шрифты, цвет и размер текста
Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.
Разница между засечками и шрифтами без засечек
Семейства шрифтов CSS
В CSS существует два типа имен семейств шрифтов:
- родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
- семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
Generic family | Font family | Описание |
---|---|---|
Serif | Times New Roman Georgia | Шрифты с засечками имеют небольшие линии на концах на некоторых символах |
Sans-serif | Arial Verdana | «Sans» означает без-эти шрифты не имеют линий на концах символов |
Monospace | Courier New Lucida Console | Все одноместные символы имеют одинаковую ширину |
Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.
Семейство шрифтов
Семейство шрифтов текста задается с помощью свойства font-family
.
Свойство font-family
должно содержать несколько имен шрифтов в качестве «резервной» системы.
Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.
Начните с нужного шрифта и заканчивайте родовым семейством, чтобы позволить обозревателю выбрать аналогичный шрифт в родовом семействе, если другие шрифты недоступны.
Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».
В списке, разделенном запятыми, указано несколько семейств шрифтов:
Пример
p {
font-family: «Times New Roman», Times, serif;
}
Для часто используемых комбинаций шрифтов, посмотрите наши безопасные сочетания шрифтов.
Стиль шрифта
Свойство font-style
в основном используется для указания текста курсивом.
Это свойство имеет три значения:
- normal — Текст отображается нормально
- italic — Текст показан курсивом
- oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)
Пример
p.normal {font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Размер шрифта
Свойство font-size
задает размер текста.
Возможность управлять размером текста важна в веб-дизайне. Однако не следует использовать коррекции размера шрифта, чтобы сделать абзацы похожими на заголовки, или заголовки выглядят как абзацы.
Всегда используйте правильные HTML-теги, например < h2 >-< H6 > для заголовков и < p > для абзацев.
Значение размера шрифта может быть абсолютным или относительным размером.
Абсолютный размер:
- Устанавливает заданный размер текста
- Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо для специальных возможностей)
- Абсолютный размер полезен, когда известен физический размер выходных данных
Относительный размер:
- Устанавливает размер относительно окружающих элементов
- Позволяет пользователю изменять размер текста в обозревателях
Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).
Задать размер шрифта с пикселями
Установка размера текста с пикселями дает полный контроль над размером текста:
Пример
h2 {font-size: 40px;
}
h3 {
font-size: 30px;
}
p {
font-size: 14px;
}
Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.
Установить размер шрифта с em
Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.
Единица измерения размера em рекомендуется консорциумом W3C.
1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.
Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM
Пример
h2 {font-size: 2.5em; /* 40px/16=2.5em */
}
h3 {
font-size: 1. 875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.
К сожалению, есть еще проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделал больше, и меньше, чем он должен, когда сделал меньше.
Используйте комбинацию процентов и EM
Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента <BODY>:
Пример
body {font-size: 100%;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Наш код теперь отлично работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, чтобы увеличить или изменить размер текста!
Вес шрифта
Свойство font-weight
задает вес шрифта:
Пример
p. normal {font-weight: normal;
}
p.thick {
font-weight: bold;
}
Отзывчивый размер шрифта
Размер текста может быть установлен с помощью vw
единицы, что означает «ширина видового экрана».
Таким образом размер текста будет следовать размеру окна браузера:
Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер шрифта.
Пример
<h2>Hello World</h2>
Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.
Шрифт вариант
Свойство font-variant
указывает, должен ли текст отображаться в шрифте с малыми прописными буквами.
В шрифте с малыми прописными буквами все строчные буквы преобразуются в прописные буквы. Однако преобразованные прописные буквы отображаются в меньшем размере шрифта, чем исходные прописные буквы в тексте.
Пример
p. normal {font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Другие примеры
Все свойства шрифта в одном
Декларации
В этом примере демонстрируется использование сокращенного свойства для установки всех
свойства шрифта в одном объявлении.
Все свойства шрифта CSS
Свойство | Описание |
---|---|
font | Задает все свойства шрифта в одном объявлении |
font-family | Задает семейство шрифтов для текста |
font-size | Задает размер шрифта текста |
font-style | Задает стиль шрифта для текста |
font-variant | Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами |
font-weight | Определяет вес шрифта |
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
Почему я вообще этим занялась
Однажды мне нужно было написать инструкцию для джунов о том, как выбрать шрифт. Я написала, что для больших текстов лучше использовать шрифты с засечками, потому что глаза меньше устают от такого шрифта и засечки помогают держать строку.
Потом пришел редактор и откомментил: «Пруфы?»
«Да это же очевидно», — подумала я и открыла «Википедию»:
Согласно общепринятому мнению [источник не указан 1902 дня], засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста. Oни способствуют связи букв в единую линию, облегчая визуальное восприятие и удобочитаемость текста.
В «Википедии» пруфов не было, и я пошла к книжному шкафу.
На мой взгляд, шрифт с засечками меньше утомляет при долгом чтении обычных, «бумажных» изданий, чем гротеск, по двум причинам. Во-первых, засечки подчеркивают окончания штрихов, становясь дополнительными «смыслоразличителями». Во-вторых, буквы с засечками несколько сложнее по форме, поэтому сильнее отличаются друг от друга, чем гротесковые. А наш читательский глаз больше нуждается в балансе индивидуальности и унификации, чем дизайнерский, который радуется зеркальной вылизанности.Юрий Гордон «Книга про буквы от Аа до Яя», Откуда взялись и зачем нужны засечки, стр. 51
Вообще, личный взгляд Юрия Гордона — это довольно веский довод, но все-таки. Я поискала в статьях Яна Чихольда:
Шрифт без засечек только кажется простейшим. Его форму специально упростили для детей, а взрослым его читать труднее, чем антикву, ведь ее засечки служат не только для украшения.Ян Чихольд «Облик книги», О типографике, стр. 21
Ян Чихольд
Ну ладно, старинные мастера опирались на чутье, но, может, кто-то посовременнее объяснит с пруфами?
Сергей Сурганов, арт-директор «Медузы», дизайнер Notion:
Используйте шрифт с засечками для длинных текстов
Когда вы оформляете любой длинный текст (статью, резюме, письмо, инструкцию), стоит использовать шрифт с засечками, то есть антикву. Считается, что длинный текст, набранный таким шрифтом, легче читать. В традиционной книжной верстке тоже используются именно антиквы, поэтому если вы делаете что-то похожее, то выбор ясен.Инструкция арт-директора «Медузы» Сергея Сурганова «Как выбрать шрифт»
Короче, у нас три довода:
«согласно общепринятому мнению»,
«на мой взгляд»,
«считается»,
…
Книги не помогли, и я попробовала разобраться с помощью научных статей, есть ли какие-то доказательства, что шрифт с засечками легче, быстрее или приятнее читать, чем шрифт без засечек. Конечно, это не полноценный научный обзор. Но лучше, чем «согласно общепринятому мнению». Ссылки на статьи есть в конце каждого раздела.
Понятия: разборчивость vs читаемость
Разборчивость (legibility) шрифта зависит от точности начертания его элементов, что обычно означает возможность распознавать отдельные буквы или слова.
Читаемость (readability) напрямую связана с оптимальной компоновкой и планом всего тела текста.
Засечки направляют взгляд по строке
«Википедия» и еще миллион дизайнерских статей говорят, что засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста.
Тут надо знать, что глаза не движутся плавно. Когда мы читаем или ищем какой-нибудь объект в поле зрения, глаза «скачут» от точки к точке, совершая быстрые движения, которые называются саккадами.
Видео про саккады
Более того, глаза совершают саккады, даже когда человек пытается сфокусироваться строго на одной точке.
Джаред Скрюз (Jaret Screws) провел эксперимент: попросил 10 человек прочитать несколько текстов и следил за движением их глаз с помощью специального оборудования.
Вот что получилось:
Измерили продолжительность фиксации взгляда, среднее количество слов между ними, амплитуду саккад и число раз, когда человек задерживался на одном и том же слове.
Все различия оказались незначительными. Ой.
Кажется, гипотеза о том, что взгляд движется легче по тексту, набранному шрифтом с засечками, не подтвердилась.
Шрифты с засечками и без засечек одинаково «держат» строку
Хотя тут есть подвох. В тесте использовался шрифт 128 pt. Это в десять раз больше, чем в обычной книге, и, возможно, исследование не очень корректно применять к обычному процессу чтения.
Quantitative Analysis of Font Type’s Effect on Reading Comprehension Jaret Screws Clemson University Clemson, United States
Детям, в отличие от взрослых, легче читать шрифт без засечек
Даже если это и не так, в это точно верят производители азбук. Попробуйте найти хоть одну азбуку с антиквой.
Детские азбуки с первой страницы Гугла
Ученые взяли 80 детей 10 лет и 80 детей на два года старше, попросили их найти в тексте нужное слово (скрининг-тест) и измерили, как быстро у детей получилось это сделать.
Контрольной группе оба раза давали одинаковый шрифт, а экспериментальной — сначала шрифт с засечками, а потом без
Различия получились статистически незначимые, и авторы говорят, что, кажется, нет никакой особенной разницы в разборчивости для детей шрифтов с засечками и без засечек.
Performance differences between Times and Helvetica in a reading task Rudi W. De Lange, Henry L. Esterhuizen and Derek Beatty
А что насчет ребят с плохим зрением?
Исследований про слабовидящих людей и шрифт довольно много.
В Journal of Visual Impairment and Blindness было опубликован обзор 18 исследований, в которых общее количество испытуемых было более 1500 человек.
Вывод исследователей: для людей с плохим зрением шрифты без засечек, такие как Arial, Helvetica, Verdana или Adsans, более читаемые, чем шрифты с засечками.
The Legibility of Typefaces for Readers with Low Vision: A Research Review Elizabeth Russell-Minda, Jeffrey W. Jutai, J. Graham Strong, Kent A. Campbell, Deborah Gold, Lisa Pretty, and Lesley Wilmot.
Шрифты и дислексики
Людям с дислексией сложно читать. Может, удастся облегчить им жизнь с помощью каких-то шрифтов?
Страница, которая показывает текст так, как его видят люди с дислексией, на dyslexiarf. com
Ученые с помощью технологии, которая следит за движением глаз, исследовали 97 человек, у половины из которых была дислексия.
Им давали прочитать 12 похожих текстов, набранных разными шрифтами, измеряли скорость, количество и длительность остановок взгляда, понимание текста и с помощью опросников выясняли предпочтения пользователей.
На первое место по читаемости и у обычных людей, и у дислексиков вышел шрифт без засечек Arial (интересно, что схожая с ним до неразличимости Helvetica — на четвертом месте). Зато на втором месте неожиданно оказался моноширинный брусковый Courier.
Предпочтения же людей вообще однозначные: топ-3 шрифтов и у дислексиков, и у недислексиков — без засечек.
The Effect of Font Type on Screen Readability by People with Dyslexia
LUZ RELLO and RICARDO BAEZA-YATES
Эмоции и шрифты
Может, дело не в скорости чтения и разборчивости, а в особом настроении, которое создают шрифты с засечками?
В Лаборатории исследований юзабилити ПО в Wichita State University попробовали разобраться, как люди воспринимают шрифты.
Участники заполняли опросник, где указывали, какими, по их мнению, характеристиками обладают разные шрифты.
Интересно, что шрифты с засечками оказались первыми в рейтинге как формальные, «взрослые», практичные и стабильные. А шрифты без засечек оказались первыми в рейтинге… нигде. То есть у них не оказалось какого-то ярко выраженного эмоционального следа.
Perception of Fonts: Perceived Personality Traits and Uses By A. Dawn Shaikh, Barbara S. Chaparro, & Doug Fox
Для другого исследования взяли два сатирических отрывка из «Нью-Йорк Таймс»: один — о проблемах правительства, другой — о политике в образовании. Их напечатали в шрифтах Times New Roman и Arial одинакового размера и показали в случайном порядке 102 студентам университета, которые оценили их с помощью заранее заданных прилагательных.
Сатирические статьи, напечатанные Times New Roman, воспринимались как более смешные и злые, чем напечатанные Arial.
Emotional and Persuasive perception of fonts Samuel Juni, Julie S. Gross
Скорее всего, это тот же эффект нейтральности шрифтов без засечек, что и в первом исследовании.
Значит ли это, что все шрифты без засечек — безликие? Вообще, нет, но нейтральный шрифт с засечками менее нейтральный, чем нейтральный шрифт без засечек.
Читаемость шрифтов на электронных экранах
Большинство текстов мы читаем с электронных экранов. Электронные устройства и даже разные программы на одном устройстве по-разному обрабатывают шрифты.
Разные типы сглаживания
Ученые попробовали разобраться, как влияет сглаживание на читаемость.
Сравнивали четыре шрифта, напечатанные на бумаге, на экране со сглаживанием и без сглаживания
Интересно, что самым читаемым оказался экранный шрифт со сглаживанием (а не напечатанный), и это шрифт без засечек — Arial. Второй после него — Verdana, тоже без засечек.
Зато без сглаживания лучше всего читалась Georgia — шрифт с засечками.
A STUDY OF THE READABILITY OF ON-SCREEN TEXT By Eric Michael Weisenmiller
Выводы
Я хотела проверить, действительно ли для больших текстов лучше использовать шрифты с засечками. Выяснилось, что для обычного человека отличий почти нет, а для тех, у кого есть проблемы с чтением — стариков, детей, людей с плохим зрением или дислексией , — предпочтительнее шрифт без засечек.
В статье есть обзоры всего нескольких статей. Еще пару дюжин я просмотрела, но не стала включать в статью, чтобы не делать ее бесконечной. На самом деле их еще больше. Но результат во всех примерно один и тот же: или отличия оказываются статистически незначимыми, или гротески немного обгоняют антикву.
Если вас заинтересовала эта тема, можете провести собственное исследование: поискать на scholar.google.ru по запросу типа Font readability research. Там можно найти исследования и про оптимальный межстрочный интервал, и про восприятие разных начертаний шрифта, и про различия читаемости в зависимости от размера.
Вряд ли это поможет стать принципиально более хорошим дизайнером, но добавит весомых аргументов.
Психология текста: шрифт, цвет, форматирование
Источник изображения
Письменность есть основное средство хранения и распространения информации — от древних религиозных текстов до описания новогодних приключений нашего френда по Facebook. Письменное слово — чудесный посредник, посланник, хранитель, позволявший человечеству столетиями выражать эмоции, делиться мыслями, рассказывать истории и, конечно, продавать.
К сожалению, текст имеет изначально присущую ему слабость: это статичная среда. Мы часто забываем, что все, что мы когда-либо прочли — это просто различные комбинации конкретных букв алфавита (неважно, 26 их или 33), подчиняющиеся некоторым определенным правилам пунктуации и синтаксиса.
По сравнению с относительно новыми средствами отображения данных (медиа), такими как фотография или видео, возможности текста крайне ограничены. Старая пословица гласит, что «Картина говорит сразу 1000 слов» (это, конечно, зависит от картины и художника!), но, как правило, это утверждение недалеко от истины. Фотография и видеозапись способны захватить, а затем показать зрителю какую-либо ситуацию гораздо лаконичней, чем слова, фигурально выражаясь, «могли когда-либо надеяться».
Устойчивая популярность таких социальных сетей, как Instagram и Pinterest, наглядно свидетельствует о том, что люди находят визуальные медиа более подходящими для распространения своих повседневных впечатлений и ощущений. Даже Twitter начал выдвигать на первый план фотографии и видео, изменяя тем самым своей начальной текстовой сущности.
Однако изображения и видео никогда не смогут по-настоящему заменить текст — просто спросите любого ныне живущего писателя о том, что он думает об экранизациях своих книг. Письменное слово всегда будет нужно для передачи информации — вот как это происходит прямо сейчас, во время написания этого самого поста.
Текст всегда был, есть и будет важнейшим компонентом формирования положительного пользовательского опыта. Но пользователи не хотят сталкиваться со «стеной контента», равно как и мы — маркетологи, копирайтеры, блоггеры — не хотим видеть в комментариях глумливую оценку наших трудов «нипрачел слишкаммногабукав» (в англоязычной сфере существует аналог этому выражению — аббревиатура TL;DR (too long; didn’t read), то есть «слишком длинно; не читается»).
Надпись: «Стена текста. Слишком длинно; не читается»
Мы хотим, чтобы читатели «хватали на лету» смысл нашего оффера, чтобы их пользовательский опыт был только положительным, чтобы они понимали суть предложения с полуслова. Мы также хотим — и можем! — передать через текст некие эмоции, пусть даже «изобразительные возможности» письменного слова скромнее, нежели у фотографии и видео.
Кажущуюся «убогость» текстовой подачи информации в веб-маркетинге вполне можно компенсировать, используя определенные методы, о которых речь пойдет ниже. У вашего читателя вполне может сформироваться положительный пользовательский опыт от прочтения вашего текста, чем бы он ни был: рекламным объявлением, заголовком лендинг пейдж, описанием оффера на продающей целевой странице, постом в социальной сети.
Будьте уверены — читатели заметят вашу информацию, ознакомятся с ней и запомнят ее.
Персонализация шрифта
Псевдонаучная дисциплина графология просуществовала около 200 лет. Ее адепты уверяли, что способны по почерку человека установить основные черты его личности и даже обнаружить неврологические проблемы пишущего.
Тотальное распространение электронного делопроизводства, повсеместное применение принтеров и тому подобные спутники прогресса сделали само понятие «почерка» неактуальным. Однако даже электронные шрифты могут дать ключ к пониманию внутренней сущности человека — нашу личность косвенным образом характеризуют шрифты, используемые нами в электронных письмах, неважно, личных или деловых.
В 2001 году американская корпорация Lexmark, специализирующаяся на разработке и изготовлении устройств для печати и обработки изображений, наняла выдающегося психолога, доктора Арика Сигмана (Aric Sigman) для изучения того, как применяемый шрифт влияет на мнение, составляемое читателем электронного текста о его авторе.
Результатом исследования стала статья «Психология шрифтов» (The Psychology of Fonts), содержавшая предположение Сигмана о том, что некоторые шрифты могут вполне ассоциироваться с конкретными знаменитыми персонами. 🙂
Шрифт Shelley: Кайли Миноуг — «сексуальный котеночек»;
Шрифт Courier: Иэн Бил (персонаж британской «мыльной оперы») — «скряга»;
Шрифт Verdana: Ричард Брэнсон — «профессионал»;
Шрифт Times: Анна Форд (жена Генри Форда 2-го) — «благонадежность».
По словам самого Сигмана, «использование неподходящего шрифта может дать людям ложное представление о вас и может отрицательно повлиять на мнения тех, кто может определить ваше будущее».
Используйте конкретные шрифты в определенных ситуациях — например, устраиваясь на работу в компанию, занимающуюся каким-либо консервативным, «традиционным» бизнесом (банковское дело, страхование), наберите резюме таким же «консервативным» шрифтом с засечками типа Times. Для более современной по роду деятельности бизнес-структуры отлично подойдет шрифт Verdana.
«Консервативные» шрифты с засечками и ассоциации с ними: «надежный», «впечатляющий», «респектабельный», «авторитетный», «традиционный»
Размер шрифта
Размер шрифта также является важным параметром. Очевидное, устоявшееся восприятие текста в зависимости от размеров шрифтов таково: крупный шрифт — важный элемент, например, заголовок; меньшим размером для сохранения пространства страницы набирается основной контент. Это традиция, дошедшая до нас от истоков эры книгопечатания.
Через дифференциацию размеров шрифтов привлекается внимание читателей к наиболее важной для автора (маркетолога, копирайтера) части текста (заголовок, призыв к действию). Взгляните на текстовую карту ниже, чтобы наглядно убедиться в правоте нашего утверждения.
Цвет шрифта
Цвет, очевидно, и есть самый влиятельный психологический инструмент, имеющийся в распоряжении веб-дизайнера и интернет-маркетолога. Всплеск цвета, соответствующего контексту ситуации, мгновенно настраивает читателя на нужный эмоциональный лад.
Приблизительный список ассоциаций между цветом и эмоциями для человека, принадлежащего к западной цивилизации, можно посмотреть в этом посте:
Цветовой акцент
В отношении текста цвет применяется для выделения различных элементов, требующих привлечения внимания пользователя. Исторически сложилось так, что в распоряжении авторов имелось 2 инструмента акцентуации: курсив и жирный шрифт. До наступления цифровой эпохи цвет в типографском деле находился в большом дефиците — он был предназначен только для обложек и, в крайне редких случаях, для цветных иллюстраций, никак не соприкасаясь с текстом как таковым. Для обозначения смены контекста автор мог использовать курсив, для выделения ключевых слов — жирный шрифт.
Понятно, что теперь, когда в распоряжении любого веб-дизайнера имеются 16 777 216 цветов, отображаемых на средней руки мониторе, мы можем раскрасить наш текст в любую, самую фантастическую гамму. Однако делать этого мы не будем — первое правило электронной верстки текста гласит: «читать, не страдая». С выполнением этого правила и связано повсеместное употребление доминирующей классической черно-белой схемы, «как в типографии на бумаге».
К стандартному черно-белому корпусу текста мы можем добавить всевозможные цвета, чтобы управлять вниманием читателя. Особый акцент на использовании этого принципа сделан в так называемом плоском дизайне, где цвет используется для дифференциации элементов web-страницы/пользовательского интерфейса.
Захват внимания
На целевой странице цветом выделяются важнейшие элементы, на которые посетитель должен обратить внимание: заголовки, призывы к действию, теги, ключевые слова и фразы. На товарной целевой странице выделение цветом отлично сработает для переключения внимания посетителя из режима сканера в режим читателя.
Эмоциональное воздействие цвета
Цвета также несут мощные культурные ассоциации. В культурной парадигме западной цивилизации мы в самом общем приближении связываем зеленый цвет с удачей, красный — с неудачей. С отдельными цветами связаны устойчивые подсознательные реакции, что в целом может придать дополнительный смысл текстовому сообщению. Например, красный текст сообщения о неверно заполненном поле лид-формы непременно привлечет внимание пользователя к совершенной ошибке, а зеленая галочка успокоит его: «все правильно сделал».
Читабельность текста
Помимо привлечения внимания, цвет может послужить еще одним отличным способом облегчить взаимодействие между писателем и читателем. Ниже приведен пример оригинального решения, по утверждению его авторов, увеличивающего скорость чтения электронного текста на 30%. За счет чего? — спросите вы.
Ключами к хорошей типографике являются 2 понятия:
- разборчивость — насколько хорошо различаются при чтении буквы, фразы и слова, и
- читаемость — насколько мозгу легко преобразовать их в единое сообщение.
Когда наши глаза сканируют страницу, они легко могут сбиться с нужной траектории. Случалось ли вам когда-либо читать одну и ту же строку дважды? А ведь мы регулярно тренируем наши глаза для плавания в морях текста, но его монотонность по-прежнему заставляет нас уставать и ошибаться.
Так вот, добавление цветового градиента — как на скриншоте ниже, — сделало переход от одной строки к другой легче для глаз: они безошибочно следуют по заданной траектории, что в результате ведет к возрастанию скорости чтения.
Форматирование текста
Ну и наконец — форматирование текста имеет огромное влияние на его читаемость (читабельность). Вспомним традиционные бумажные газеты с их многочисленными узкими колонками. Подобная верстка есть результат многолетних исследований, испытаний и уточнений. По словам эксперта по промышленному дизайну Боба Бейли (Bob Bailey, Ph. D., Civil Engineering) в статье в журнале UI Design Newsletter:
Одно из лучших исследований по читабельности было проведено Тинкером (Tinker) и Патерсоном (Paterson) в 1929 году. Используя черный шрифт в 10 английских типографских пунктов (3,515 мм), отпечатанный на белой бумаге, исследователи обнаружили, что строка длиной от 3 до 3,5 дюймов (от 75 до 90 мм) дает самую высокую производительность чтения. Абзацы с длиной строки от 7,3 дюйма (185 мм) читались заметно медленней. Авторы предположили, что увеличение длины строки, по-видимому, требует большего количества боковых движений глаз. Большая амплитуда движения взгляда по горизонтали во время чтения способствует тому, что читатель чаще теряет свое место чтения текста.
Все это звучит очень логично. Снимите стресс с глаза читателя — и ваш контент мгновенно станет более читабельным.
При публикации текста на целевой странице и в online в целом — в связи с увеличением расстояния от читателя до монитора, — длина строки может быть не столь компактной как в классической типографике: оптимальной считается длина в 4–5 дюймов (102–127 мм).
Однако важно убедиться в том, что от читателя не потребуется слишком большой горизонтальный «пробег глазами». От себя напомним — для мобильных целевых страниц многоколоночная верстка категорически противопоказана.
Пробелы
Использование пробелов на лендинг пейдж имеет огромное значение для улучшения чтения и понимания общего смысла оффера. В нашем блоге уже были статьи на эту тему:
Вместо заключения
Подведем краткое резюме нашего поста. Для того, чтобы ваш текст конвертировал пользователей в лиды, необходимо придерживаться следующих правил:
- Размер имеет значение. Делайте логический акцент там, где необходимо.
- Используйте шрифты, релевантные тону беседы, каковой вы хотите установить с целевой аудиторией.
- Цвет в тексте может передавать подсознательное сообщение.
- Цвет может быть применен для привлечения внимания к конкретному фрагменту текста.
- Текст бесполезен, если он нечитабелен — помогите читателю логическим форматированием контента.
Разумеется, все эти советы нуждаются в проверке сплит-тестированием.
Высоких вам конверсий!
По материалам usabilla.com
10-01-2014
Введение — Blender 3D — ПРОГРАМИШКА.РФ
Ссылка
Режим: режим Правки (Текст)
Панель: Кривые и поверхности, Шрифт и Символ (контекст Правки)
Меню:
Примеры текста.
Объекты Текст именно такие, какими кажутся: они содержат некоторый текст. Они имеют тот же тип объекта как кривые и поверхности, так как современные шрифты (тексты, заголовки, и т. д.) это векторные, сделанные из кривых (как правило Безье).
Blender использует “шрифт системы” для управления картами шрифтов “код символа –> объект, представляющий их в 3D вид”. Это означает, что не только делает систему шрифтов, а имеет свой встроенный шрифт, но он может использовать внешние шрифты, в том числе шрифты PostScript Type 1, OpenType и TrueType. И последнее, но не наименее важное, он может использовать любые объекты, существующие в текущем .blend файле, как символы…
Тексты в Blender позволяют создавать/рендерить 2D или 3D текст, и затенять, как Вы хотите, с помощью различных вариантов компоновки (как выравнивание и кадры), как мы увидим ниже. По умолчанию, символы просто плоские и заполнены поверхностью, как и любая замкнутая 2D кривая. Но можно конечно выдавить их… И тексты могут следовать за другими кривыми.
Конечно, как только Вам понравится форма вашего текста, вы можете преобразовать его (с Alt-C
, в объектном режиме), либо в кривую, либо напрямую в полисетку, что позволяет использовать все мощные возможности этих типов объектов на нем. ..
(Примеры текста) показывают примеры различных шрифтов в действии, в том числе “синий” шрифт, который был применен к пути кривой.
Примечание
Максимум 50000 символов разрешается в текстовом объекте; однако, будьте предупреждены, что чем больше символов в одном текстовом объекте, тем медленнее объект будет реагировать в интерактивном режиме.
Как вы можете видеть, когда вы переключаетесь между режимами объекта и правки панель шрифт остается прежней. Это означает, что его настройки могут быть применены одинаково в обоих режимах … и это подразумевает, что Вы не можете применить их, как только часть полисетки. Таким образом, шрифт, размер и т. д., являются общими для всех букв в объекте текст. Есть только одно исключение: кнопки управления на панели свойств жирный / курсив, определенные для каждой буквы (это способ использовать до четырех разных шрифтов в тексте).
Для оптимального использования ресурсов, используйте только символы, которые используются занимают память (а не весь набор символов).
Редактирование текста
Ссылка
Режим: Режим правки
Горячие клавиши: смотри ниже
Текст в режиме правки.
Редактирование текста довольно сильно отличается от других типов объектов в Blender, и происходит в основном в двух областях. Во-первых, 3D-вид, конечно, где вы вводите свой текст, и есть несколько сочетаний клавиш, например для применения стилей (см. символ) — заметим, однако, что большинство горячих клавиш Blender, которые Вы знаете в режиме режим правки не работают для текстов! На втором месте — кнопка окно (контекст Правки), специальная панель шрифт.
Меню заголовка окна 3D вида почти не используется, и нет меню специальное… У вас нет ни инструментов преобразования зеркало, и так далее. Однако, вы можете применить к текстам те же модификаторы как для кривых.
Редактирование текста аналогично, использования стандартного текстового редактора, но работает не как полнофункциональная версия и имеет некоторые отличия:
- Выход из режима Правки
Tab
не вставляет символ табуляции в текст, а входит и выходит в/из режима правки, как и для других типов объектов.- Копирование
Чтобы скопировать текст в буфер, используйте
Ctrl-C
или кнопку Копировать на панели инструментов.- Вырезать и копировать
Для того чтобы вырезать и копировать текст в/из буфера обмена, используйте
Ctrl-X
или кнопку вырезать на панели инструментов.- Вставить
Чтобы вставить текст из буфера, используйте
Ctrl-V
или кнопку Вставить на панели инструментов.- Удалить весь текст
Чтобы полностью стереть или удалить текст, используйте
Ctrl-Backspace
.- Home/End
Кнопки
Home
и :kbd:`End`перемещают курсор в начало и конец строки соответственно.- Следующее/Предыдущее слово
Чтобы переместить курсор на границу слова, используйте
Ctrl-Left
илиCtrl-Right
.
Текст буфера не взаимодействует с рабочим столом. Он работает только в Blender. Чтобы вставить текст вне Blender, см. Вставка текста ниже.
Вставка текста
Вы можете вставить текст тремя разными способами: из внутреннего текстовый буфера (редактирование текста), или из текстового файла.
Чтобы загрузить текст из текстового файла, используйте инструмент После этого появится файловый браузер окно для навигации и поиска файла в допустимой кодировке utf-8. Как обычно, будьте осторожны, что файл не имеет слишком много символов, иначе интерактивный ответ замедлится.
Специальные символы
Ссылка
Режим: Режим правки
Меню:
Если вам нужны специальные символы (которых нет на клавиатуре) Вы можете вставить многие из их, используя комбинацию из двух других символов. Для этого введите основной символ, нажмите Alt-Backspace
, а затем нажмите нужную клавишу “модификатор” для вставки специальных символов. Некоторые примеры приведены ниже:
A , Alt-Backspace , ~ | ã | A , Alt-Backspace , ' | á | A , Alt-Backspace , ` | à |
A , Alt-Backspace , O | å | E , Alt-Backspace , " | ë | O , Alt-Backspace , / | ø |
Преобразование текста в текстовый объект
Используя существующий текстовый блок, вы можете преобразовать его в объект из заголовка текстового редактора выберите , Один объект или Один объект на строку в зависимости от ваших потребностей.
Также можно вставить из буфера обмена или из файла меню Правка, при редактировании 3D текста.
3D полисетка
Можно преобразовать текстовый объект в объект 3D-полисетка. Это может быть полезно, так что вы можете редактировать вершины в режим правка, но вы потеряете возможность редактировать сам текст. Для этого идите в режим Режим объекта и выберите текстовый объект. Нажмите Alt-C
и выберите Полисетка из Кривой/Мета/Поверхности/Текста. Теперь вы можете вернуться в режим правка и вручную редактировать вершины. Они обычно немного сумбурно, так что может быть полезно использовать ограниченное растворение удаление или Модификатор объекта Аппроксимация для низкой пороговой очистки полисетки.
слева обычный текст, справа текстовый объект.
Выделение текста
Текст в режиме правки.
В режиме Режим правки, ваш текст имеет белый курсор, и как в любом текстовом редакторе, он определяет где будут вставлены новые символы! Вы можете перемещать курсор с помощью клавиш со стрелками или используя кнопки PageUp
/ PageDown
и Home
/ End
.
Удерживая Shift
, используйте клавиши со стрелками, чтобы выделить часть текста. Вы можете использовать это, чтобы указать различные материалы, нормальный/жирный/курсив стиль, и не более того…
Форматирование текста
Шрифты
Ссылка
Режим: Режим правки
Панельl: Шрифт (контекст Редактирования)
Панель Шрифт имеет несколько опций для изменения внешнего вида символов.
Загрузка и изменение шрифтов
Загрузка 1 файла шрифта.
Blender поставляется со встроенным шрифтом по умолчанию и отображается в каждом из четырех стилей шрифта, к сожалению встроенный шрифт не понимает русский язык. Встроенный шрифт всегда присутствует и показывается в этом списке как Bfont. Первая иконка содержит раскрывающийся список отображающий загруженные шрифты. Выберите один для каждого стиля шрифта.
Чтобы загрузить другой шрифт нажмите одну из кнопок загрузки на панели Шрифт и выберете действительный шрифт. Окно Файлового браузера*покажет все допустимые шрифты иконкой в виде прописной буквы F, как видно из рисунка *Загрузка 1 файла шрифта.
Примечание
Примечание для UNIX систем
Шрифты обычно располагаются в /usr/lib/fonts
, или примерно такого вида каталог /usr/lib/X11/fonts
, но не всегда. Они могут быть и в других местах таких как /usr/share/local
или /usr/local/share
, и возможно с относительными подкаталогами.
Если выбранный шрифт, Blender не может понять, Вы получите сообщение об ошибке Недопустимый шрифт.
Запомните тот же шрифт будет применен ко всем символам с же стилем в тексте, но это все таки надо выбрать отдельный шрифт для каждого стиля. Например, Вам необходимо загрузить шрифт курсив для того чтобы сделать текст курсивом. После того, как шрифт будет загружен, Вы можете применить этот шрифт “стиль” для выделенных символов или всего объекта. Для всего, Вам необходимо загрузить минимум четыре разных вида шрифтов для представления каждого стиля (нормальный, курсив, жирный, полужирный курсив).
Важно понимать, что Blender не волнует, какой шрифт вы загрузили для “нормального”, “жирного” и др., стилей. Это, примерно как Вы могли бы иметь до четырех разных шрифтов в одном тексте — но Вам придется выбирать между разными стилями одного и того же шрифта, или разных шрифтов. Blender имеет ряд типографских элементов управления для изменения стиля и расположения текста, найти можно на панели шрифт.
Размер и сдвиг
- Размер
Регулировка размера всего текста (ни коим образом не контролирует размер каждого символа независимо). Заметим, однако, что символы разных шрифтов (разных стилей, см. ниже) могут иметь разные видимые размеры.
Сдвиг: ‘Blender’ имеет значение сдвига 1, а текст ‘2.59’ имеет значение сдвига 0
- Сдвиг
Контролирует наклон всего текста. Даже если это кажется похожим на стиль курсив, это не одно и тоже !
Объекты, как шрифты
Вы также можете “создать” свой собственный “шрифт” внутри Blender! Это довольно сложный процесс, поэтому давайте поподробнее про это:
Во-первых, вы должны создать свои символы. Каждый символ-это объект любого типа (сетка, кривая, Мета…). Все они должны иметь имя по следующей схеме:
общий префикс
с последующимименем символа
(например,ft.a
ft.b
и др.).Затем, для объекта текст, необходимо включить кнопку Дублирование вершин (контекст объекта панель Дублирование).
Вернитесь в контекст Правки, и на панели шрифт заполните поле Объект шрифт общим префиксом ваших объектов “шрифт”.
Теперь, каждый раз, когда символ в вашем тексте соответствует суффиксу имени объекта “шрифта”, этот объект дублируется на этот символ. Оригинальные символы остаются видимыми. Объекты дублируются так, что их центр позиционируется в нижний правый угол соответствующих символов.
Текст на кривой
С модификатором кривая Вы можете разрешить тексту следовать за кривой.
Текст на кривой
На рисунке (текст на кривой) вы можете увидеть как текст деформируется по кривой (2D круг Безье).
Чтобы применить модификатор кривая к объекту, текст сначала должен быть преобразован в полисетку, используя Alt-C
и нажмите кнопку полисетка.
Примечание
Есть также текст на кривой, но модификатор Кривая предлагает больше вариантов.
Подчеркивание
- Подчеркивание
Кнопка Подчеркивание переключает подчекнутость текста перед вводом. Текст также может быть установлен на подчеркивание, выбрав его, затем нажать кнопку Подчеркивание на панели инструментов.
- Положение
Позволяет Вам смещать по вертикали позицию подчеркнутого.
- Толщина
Контролирует толщину подчеркивания.
проверьте параметр символа, например, тип текста жирный текст
Символ
Жирным текст.
- Жирный
Кнопка переключается жирность перед вводом. Текст также может быть установлен как жирный, выбрав его затем нажать кнопку жирный панели инструментов.
- Курсив
Кнопка переключает курсив перед вводом. Текст также может быть установлен курсив, выбрав его, затем нажать кнопку курсив на панели инструментов.
- Подчеркивание
Включает подчеркнутость и контролируется настройками как описано выше
- Капитель
печатает маленькие заглавные буквы
Кнопки Blender полужирный и курсив не работают так же, как другие приложения, так как они также служат в качестве заполнителей, чтобы загрузить другие шрифты вручную, которые применяются при определении соответствующего стиля; см. Шрифты.
Чтобы применить атрибут текста полужирный/курсив/подчеркнутый к набору символов, Вы либо включите жирный / курсив / подчеркивание перед тем, как вводить символы, или выделите (выберите) первую и затем переключите полужирный/курсив/подчеркнутый.
Установка регистра букв
Вы можете изменять регистр текста, выбрав его затем нажатием кнопки В верхний регистр или В нижний регистр панели инструментов.
Включите Капитель и получите возможность вводить символы как малые прописные.
Размер Капители может быть изменен в настройки масштаба капители. Обратите внимание, что масштаб капители применяется один и тот же для всех отформатированных символов капители.
Абзац
Панель настройки Абзац нужна выравнивания и интервала текста.
вкладка абзац
Выравнивание
- Слева
Выравнивает текст слева от рамки, опорная точка объекта текст используется в качестве отправной точки.
- Центр
Центрирует текст в рамке, опорная точка объекта текст используется в качестве средней точки.
- Справа
Выравнивает текст по правому краю рамки, опорная точка объекта текст используется в качестве конечной точки.
- По ширине
Только сбрасывает линию при удалении по обтеканию текстом (не по
Return
), он использует пробел вместо интервала между символами (кернинг), для заполнения строки.- Вровень
Всегда сбрасывает линию, даже когда еще не вошел; он использует интервал между символами (кернинг), чтобы заполнить линии.
Обе операции По ширине и Вровень работают только в пределах рамки.
Интервалы
- Символ
Коэффициент, который отвечает за промежуток между символами масштабируется в ширину
- Слово
Коэффициент, на котором пробельные символы между словами масштабируется в ширину. Вы также можете контролировать, нажимая
Alt-Left
илиAlt-Right
чтобы уменьшить/увеличить интервал по шагам0.1
.- Линия
Коэффициент, которых влияет на расстояние по вертикали между строками масштабируется.
Смещение
- Смещение по X и смещение по Y
Ну, эти параметры определяют X-и Y-смещение текста относительно его “нормального” позиционирования. Обратите внимание (see текстовые блоки), применяются ко всем рамкам.
Форма
Ссылка
Режим: Режим объекта или Режим правки
Панель: Кривая и Поверхность (в контексте Правки)
Как вы можете видеть на панели Кривая и поверхность, для текстов почти те же параметры, как у кривых.
Разрешение
Разрешение Предпросмотра и Рендера. Смотри разрешение кривой.
параметры формы
- Быстрое редактирование
отключает заполнение кривой в режиме редактирования.
Fill (Заполнение)
Параметры заливки управляют как кривая текста будет заполнена, когда текст Выдавят или Скосят на панели геометрия.
- Шрифт
Заполняет лицевую сторону поверхности.
- Сзади
Заполняет обратную сторону поверхности.
- Заполнять после деформации
Заполняет кривые после применения ключей формы и модификаторов.
Текстуры
Настройки текстуры
- Использует UV карту
Использует UV значения как сгенерированные текстурные координаты.
- Авто Текстурное Пространство
Настройка активного объекта текстуры автоматически при трансформации объекта.
Как выбрать шрифт для сайта
4,443 просмотров всего, 3 просмотров сегодня
Оглавление
- Виды шрифтов
- Что нужно учитывать при выборе шрифта
- Технические параметры
- Выводы
Мы часто говорим о том, что текст должен быть уникальным и полезным для пользователей. Но наряду с содержанием большое внимание уделяется и форме подачи материала. В работе копирайтера под ней понимают структурированность текста, в работе дизайнера — типографику. Пожалуй, основным ее элементом является шрифт. И перед дизайнером встает эта непростая задача — подобрать его для сайта.
В этой статье рассмотрим, какие бывают виды шрифтов и чем руководствоваться при их подборе.
Как будет читаться текст, во многом зависит от того, как выглядят сами буквы. Быть может, вы удивитесь, но шрифт даже способен создавать настроение, влиять на общее впечатление от текста, сайта, а значит и компании в целом. Неслучайно, крупные бренды разрабатывают уникальное написание букв, которое затем становятся их визитной карточкой.
О фирменном стиле и шрифтах как одном из его элементов читайте в нашей статье “Фирменный стиль: правила, исключения, секреты”.
Может показаться, что настроение сайта, его тон задает графика. На самом деле шрифт ничуть ей в этом не уступает. Несмотря на обилие возможностей для работы с изображениями и видео, он не теряет своих позиций. Во многом это связано с современными требованиями к адаптивности сайта. Графика замедляет скорость загрузки страницы, а вот шрифты нет. При грамотном их подборе можно создать самые разные сайты от строгих до креативных. Таким образом, как и любой другой элемент дизайна, то, как выглядят буквы, будет влиять на поведенческие факторы.
Виды шрифтов
Существует два основных семейства, или гарнитуры. Буквы с засечками — антиквы, без засечек — гротески.
Первые изначально использовались в книгоиздательстве. Засечки формируют строку и взгляд не сбивается при переходе с одной на другую. Если раньше с монитора было трудно читать материал, написанный шрифтом с засечками, то благодаря современному разрешению дисплеев, это стало очень даже удобным.
Гротески изначально больше подходят для web-среды. Их можно использовать и в длинных, и в коротких текстах. Эта гарнитура более привычна для глаз пользователей. Также ее применяют для логотипов. Она широко распространена в дизайне благодаря своей лаконичности, динамике, современности.
К этой классификации добавим рукописные и моноширенные шрифты.
Если с рукописными все понятно, то вторая требует пояснений.
Моноширенный шрифт — тот, чьи знаки имеют одинаковую ширину и могут быть вписаны в квадрат.
Рассмотрим семейства и то как начертание букв отражается на восприятии текста.
- Антиквы — классика, элегантность, утонченность.
- Гротески — минимализм, динамика
- Рукописные — оригинальность, декоративность
- Моноширенные — устойчивость, уверенность.
Если антиквы и гротески могут применяться для любых текстов, то рукописные и моноширенные уместны для небольших текстовых блоков. Их использование обусловлено стремлением привлечь внимание к определенной информации или общей концепцией дизайна.
Есть и еще одна очень простая и важная классификация — стандартные и нестандартные варианты.
Стандартные поддерживаются каждой операционной системой, каждым браузером. Используя их, вы можете быть уверены, что пользователь увидит сайт таким, как вы задумали. Наиболее популярными из этой группы являются Times New Roman, Arial, Verdana, Tahoma, Georgia.
Если вы выбираете нестандартные, то они будут дополнительно подгружаться в браузер пользователя, что может незначительно снизить скорость загрузки страницы. С другой стороны, вы получите более выразительный, незаюзанный вариант. Подобрать такие шрифты можно на Google Fonts, MyFonts, Fontsquirrel. За большую часть придется выложить деньги, но при желании можно найти и бесплатные. При покупке или скачивании обратите внимание на его лицензию, где прописаны правила пользования. Так вы облегчите жизнь себе и своему заказчику.
Как и везде, где есть платные материалы, есть и пиратский контент. Пользуясь им, дизайнер и владелец сайта становятся пособниками мошенников, незаконно получивших к ним доступ.
Но как все же его выбрать, тем более, платный? Такая ответственность. Специализированные ресурсы ввели возможности тестирования онлайн. Вы не только можете посмотреть сочетаемость разных шрифтов, но и поэкспериментировать с начертаниями, цветом фона.
Что нужно учитывать при выборе шрифта
- общую цель создания сайта и цель дизайна.
- аудиторию веб-ресурса
- содержание будущих текстов
- читабельность
Как правило, для сайта выбирается 3-4 шрифта. Это помогает показать иерархию подаваемой информации, выделить некоторые блоки. Сначала находится оптимальный вариант для тела сайта, затем для заголовков и после для отдельных смысловых элементов. Для дизайнера здесь все усложняется тем, что необходимо скомбинировать эти шрифты. Причем необязательно, чтобы это были представители одного семейства. Вот уж задача не из простых — найти варинты, которые будут гармонировать друг с другом, но при этом не будут казаться слишком похожими. А еще у каждого есть по несколько начертаний, например, жирное, полужирное, тонкое и т.д. Использование большого количества разных начертаний может дополнительно отразиться на скорости загрузки.
Основной совет при подборе — не злоупотреблять количеством. Некоторые дизайнеры обходятся одним шрифтом, используя разные начертания. Однако, правила существуют для того, чтобы их нарушать. И если концепция сайта подразумевает многообразие — действуйте. Только учитывайте, что такое решение будет постоянно перетягивать внимание пользователя из одной точки в другую.
Если вы начали свой путь в digital с создания логотипа, то там уже, как правило, использовано несколько шрифтов, чаще всего два. Поэтому прикидывая их количество для сайта, не забывайте учитывать уже примененные в лого.
Более подробно о создании логотипа читайте в нашем материале “Как самому создать логотип компании”.
БЛОК ПРО НАШ САЙТ НА ПОДЛОЖКЕ
Для сайта Stebnev Studio мы выбрали два шрифта: антикву PT Serif и гротеск Fira Sans. Сочетаемость достигается за счет идентичности основных форм букв. Наш логотип создан с использованием шрифта с засечками, так что антиква является продолжением фирменной темы, а гротеск разнообразит визуальную составляющую.
Еще один важный эстетический момент — соотношение цвета знаков с фоном, степень контрастности. Классическим сочетанием для человеческого глаза, конечно, является черный текст на белом фоне. Но раньше все было по-другому: из-за разрешения мониторов чаще всего использовался белый текст на черном фоне.
Сегодня, если вы хотите повысить читабельность текста, стоит сделать подложку не белоснежной, а сероватой. И сам шрифт может быть не черным, а темно-серым. Таким образом вы снизите яркость, и пользователи будут меньше уставать при изучении веб-ресурса. Сочетания цветов могут быть самыми разными. Главное, чтобы это не утомляло глаза и не “калечило” психику посетителй сайта.
Технические параметры
Размер — ключевой момент для читабельности. В веб-среде не принято использовать для тела сайта шрифт менее 12 пикселей. Для сносок и подписей применяется 8-10 пикселей. Оптимальным вариантом для тела ресурса будет 14-18 пикселей. Важно соблюдать единообразие. Т.е. каждый структурный элемент, например, заголовок должен быть везде одного размера.
Расстояние между знаками, или кернинг. Как правило, определяется создателем шрифта. Изменить его веб-дизайнер может в заголовке или в цитате, где важно именно визуальное оформление.
Еще два параметра относятся к типографике в целом.
Интерлиньяж — расстояние между строками. По сути текст представляет собой сочетание знаков и “воздуха”. Так вот, чтобы читатель не “задохнулся”, расстояние между линиями букв должно быть больше, чем размер шрифта в 1, 5 раза. Длина строки важна для комфортного перемещения взгляда по тексту. Оптимальным считается — 600 пикселей. Текст должен быть выровнен по левому краю. Если сайт подразумевает более широкие строки, то можно вспомнить газету и разбить текст на несколько колонок.
После того, как дизайн готов, начинается тестирование его элементов. Не стоит обходить своим вниманием шрифт. Часто дизайнеры видят свое творение только через фотошоп, точнее, сквозь призму фотошопа. Но в реальности все может сильно отличаться. Проверьте, как выглядят страницы сайта в разных операционных системах и браузерах. В особенности если мы использовали нестандартные.
Если вы собираете фокус-группу для тестинга дизайна, обязательно включите в задание оценку шрифта, а точнее читабельности текста.
Выводы
Задавшись вопросом, что лучше подойдет для вашего сайта, не упускайте из вида сочетание эстетики и функциональности. Если выбранный шрифт будет красивым, но текст будет трудно прочесть, вряд ли это улучшит юзабилити и поведенческие факторы.
Подбирая шрифт для сайта, руководствуйтесь не только собственными предпочтениями, но и объективными данными. Задача дизайнера — оформить площадку, на которой будет размещена определенная информация. И все должно работать на эту информацию и ни в коем случае не отвлекать внимание от нее.
- Еще раз выделим пункты, которые стоит учитывать при подборе шрифтов
- не больше 3-4 для сайта
- не использовать в основных текстах шрифты, сложные для чтения
- должен контрастировать с фоном
- для основного текста размер не менее 14 пикселей
- длина строки не более 600 пикселей
- интерлиньяж в 1, 5 раза больше высоты букв
Как и с любым другим элементом дизайна, здесь есть масса ограничений, которые затем превращаются в подспорье. Не бойтесь экспериментировать, и ваши сайты обязательно достигнут поставленных целей.
104 бесплатных шрифта для создания логотипа | Дизайн, лого и бизнес
Насколько хорошо выглядит логотип в значительной степени определяется эффективностью выбранного шрифта. Здорово, если он способен качественно обеспечить узнаваемость бренда. Из этого следует, что выбранный стиль надписи обязан быть уникальным, но при этом легко читаться. Правильно подобранный шрифт поможет компании выделиться из общей массы подобных брендов. Одной из его функций будет передача основной идеи организации, поэтому дизайнер должен уделить должное внимание выбору стиля.
Использованный в логотипе шрифт должен отвечать не только требованиям уникальности и логичности, но и актуальности. Правильно подобранная стилистика надписи должна послужить компании долгие годы, а не устареть через пару месяцев.
При выборе шрифта для логотипа могут возникнуть проблемы с лицензионными ограничениями. Чтобы избежать неприятностей с законом, дизайнеры стремятся задействовать общедоступные бесплатные шрифты для разработки брендового знака. Обычно использование данных гарнитур разрешено и в коммерции. Для начинающих компаний бесплатные шрифты являются отличным способом сэкономить средства, так как не приходется тратиться на покупку их платных версий.
Создайте логотип за 5 минут
Нажмите кнопку «Создать» и мы бесплатно создадим варианты логотипа, на основе которых можно разработать фирменный стиль.
Значение шрифта
С помощью особенного шрифта компания на начальном этапе своего развития может заявить о себе на рынке и привлечь потенциальных покупателей. Также правильно подобранный стиль текста логотипа формирует у клиентов приятное впечатление от бренда.
Нет конкретных требований к использованному шрифту — допустим как легкий или массивный, так изящный или деловой. Важно, чтобы шрифт подходил бренду, передавать его суть и основные характеристики реализуемой им продукции. Даже если человек совсем не смыслит в дизайне и рекламе, он все же легко определит, если логотип разработан неудачно и совсем не гармонирует с основной идеей бренда.
Наличие засечек – за и против
Все шрифты можно подразделить на две группы, опираясь на наличие у букв засечек. В каждой из них можно подобрать для себя нужный вариант, однако это делает процесс выбора еще более сложным. Нет строгих правил по поводу того, где можно или нельзя использовать определенный шрифт, но существуют основные рекомендации по их применению в логотипе.
Шрифт с наличием засечек будет выглядеть более серьезно и официально, нежели без них. Шрифтовые стили другой группы более подходят для брендов, позиционирующих себя в качестве современной и динамичной компании. Можно прибегнуть к декоративным шрифтам, однако это не лучший вариант, так как надпись будет сложна для прочтения.
Список лучших бесплатных шрифтов для создания логотипа
BUTLER
Буквы данного шрифта имеет небольшие засечки, а их стиль напоминает Dala Froda и Bodoni. При его разработке дизайнер опирался на идеи и основные черты нестареющей классики. Этот шрифт оптимален для логотипа, который планируется разместить на рекламных носителях большого размера. Также этот стиль можно использовать при печати плакатов, разработке книжных обложек и трендовых вещей. Главная цель данного шрифта – указать на элегантность презентуемого продукта.
Butler имеет по 7 видов трафаретного и регулярного начертания, а также лигатуры, цифры и дроби. Центральная Европа активно его использует, поэтому он свободно поддерживается некоторыми иностранными языками.
ARCIFORM
Буквы данного шрифта округлой формы и не имеют засечек. При этом все их линии одной толщины. Стиль шрифта отражает дух современности, а его внешний вид отлично гармонизирован. Он достаточно незамысловатый, однако хорошо смотрится на логотипе.
Применяются надписи, выполненные шрифтом Arciform, на знаках брендов, специализирующихся на реализации парфюмерии, косметических товаров, продукции для детей и даже на программном обеспечении. Этот шрифт имеет поддержку кириллицы, и его можно использовать в проектах личной и коммерческой направленности.
CINZEL
Указанный шрифт создавался с опорой на классические пропорции, и имеет некоторую схожесть с древними латинскими письменами. Строгие штрихи сохраняют в себе исторические традиции, но одновременно выглядят достаточно современными. Его целесообразно применять в любой надписи, если требуется сделать акцент на элегантности.
Можно использовать в логотипе данный стиль и не бояться, что знак выйдет из моды. Но если в будущем планируется менять направленность деятельности компании, то применение данного шрифта стоит пересмотреть.
Cinzel отлично смотрится на проектах цифрового формата, так как отлично читается с экрана. Шрифт поддерживается большинством языков Европы, но не имеет поддержку кириллицы.
Скачать шрифт CINZEL
BEBAS NEUE
Обладает отличительной изящность и привлекательностью. Буквы имеют вытянутый вид, чем похожи на Bebas, который был создан дизайнером Риочи Тсунекавой. Этот шрифтовой стиль завоевал широкую популярность, из-за чего приравнивается к бесплатной версии Helvetica.
Разработчики студии творчества под названием Fontfabric создали 4 вида начертания шрифта: Thin, Light, Book и Regular. При создании дизайна логотипа можно использовать любую из представленных вариаций. Следует уделять внимание особенностям бренда, останавливая выбор на оптимальном виде для своей компании.
Разработанные новинки начертаний не изменяют основной идее исходного шрифта. Это присутствие чистых линий, элегантности форм и удобство прочтения. Можно сказать, что данный стиль подходит для любого логотипа за счет достаточно универсальных характеристик. Шрифт представлен в открытом доступе и имеет поддержку кириллицы.
Скачать шрифт BEBAS NEUE
TROCCHI
Засечки на буквах отлично подходят для текста логотипа, если требуется использовать шрифт, отличающихся легкостью и изящностью. Создателем является Вернон Адамс, который попытался создать стиль, выступающий в качестве новой версии старинных шрифтов типографа Винсента Фиггинсома. Итоговый результат у дизайнера получился явно не хуже изначальных вариантов.
В стилистике надписей просматриваются отголоски ранних брусковых шрифта, которые были на пике моды в 19 веке. Его оптимально использовать в логотипе, если делается упор на его долговременность. Название шрифта произошло от имени романиста Шотландии Александра Трокки. Поддерживается большинством языков Европы, кириллица отсутствует.
Скачать шрифт TROCCHI
GLOBER
Группа шрифтов состоит из 18 вариаций начертания, в которых 9 – курсивы. Отличительной особенностью данного стиля является отличная читабельность, позволяющая применять его в логотипах, реализуемых в цифровой среде. Именно классические гротескные шрифты положили начало происхождению данного семейства.
Буквы отличаются наличием некой закругленности, благодаря чему выглядят дружелюбно. Надписи, выполненные данным шрифтом, хорошо запоминаются. Является универсальным вариантом для использования в логотипе, так как подходит практически для любого бренда. Применяется также в заголовках и блоках текста. Шрифт доступен бесплатно и имеет кириллицу.
Скачать шрифт GLOBER
CHOPLIN
Пример современного геометрического шрифта, обладающего массивностью штрихов и явными засечками на буквах. Был разработан при опоре на идеи группы шрифтов Camton, которая отличалась нейтральностью, простотой и герметичностью форм. Можно сказать, что Choplin – производный вариант письма от данного шрифтового семейства. Но при этом шрифт выступает в качестве самостоятельной единицы и активно применяется при создании яркого и запоминающегося логотипа.
Может использоваться при разработке дизайна приложений для гаджетов, продукции печатного производства и дизайне корпоративной направленности. Имеет множество вариаций, благодаря чему можно подобрать наиболее подходящий. Шрифт имеет 2 бесплатные версии, но кириллица у них отсутствует.
Скачать шрифт CHOPLIN
WALK-ON
Создавался в качестве корпоративного шрифта, предназначенного для бренда Wang&Lynch. При его создании дизайнеры опирались на стилистики эпох ар-деко и модерна, однако стремились придать символам больше современности. В итоговом шрифте можно проследить отголоски ретро, отражавшиеся в простоте формы и контрастности штрихов.
Шрифт сочетает в себе массивные и супертонкие линии, чем явно отличается, хотя и не в лучшую сторону. Для создания веб-продуктов данный вариант не рекомендуется использовать, так как написанный текст будет сложен для прочтения в маленьком размере. Традиционный брендинг почти не применяет указанный шрифт, потому что он больше приемлем для проектов творческого, культурного или фэшн направления.
FENIX
Буквы шрифта имеют засечки и отличаются неровной закругленность. Основные штрихи представлены в виде стандартных линий без излишней массивности. Надписи, выполненные символами данной стилистики, отлично запоминаются, благодаря чему популяризируют бренд.
Шрифт отличается брутальностью и грубоватостью линий, однако остается при этом классическим, легким и гармоничным. Преимуществом является его хорошая читабельность при любом размере текста. Шрифт представлен в 1 варианте начертания, но кириллицу не имеет.
Скачать шрифт FENIX
RECKONER
Создатель данного шрифта вдохновлялся Alegre Sans и Dharma Gothic, но при этом пытался сделать очертание современнее и традиционнее. Получившийся шрифт имел необычную и вытянутую форму букв без засечек, который отлично подходил для применения в логотипах проектов личного и коммерческого типа. Шрифт имеет буквы только верхнего регистра и цифры. В бесплатном доступе представлен в 2 начертаниях, кириллица отсутствует.
Скачать шрифт RECKONER
BEAVER
Скачать шрифт BEAVER
VAST SHADOW
Скачать шрифт VAST SHADOW
CANARO
Скачать шрифт CANARO
NORWESTER
Скачать шрифт NORWESTER
ALLER
Скачать шрифт ALLER
LORENA
Скачать шрифт LORENA
POIRET
Скачать шрифт POIRET
FACUNDA
Скачать шрифт FACUNDA
ATVICE
Скачать шрифт ATVICE
POLARIS
Скачать шрифт POLARIS
VAGTUR
Скачать шрифт VAGTUR
AILERON
Скачать шрифт AILERON
RBNO2
Скачать шрифт RBNO2
SANSUS
Скачать шрифт SANSUS
GENTONA
Скачать шрифт GENTONA
RAMBLA
Скачать шрифт RAMBLA
HIPSTELVETICA
Скачать шрифт HIPSTELVETICA
AINSLIE
Скачать шрифт AINSLIE
KRAFTSTOFF
Скачать шрифт KRAFTSTOFF
PROSTO
Скачать шрифт PROSTO
SANSATION
Скачать шрифт SANSATION
SIMPLIFICA
Скачать шрифт SIMPLIFICA
GHANDI SANS
Скачать шрифт GHANDI SANS
SCRIBER
Скачать шрифт SCRIBER
GARNATA
Скачать шрифт GARNATA
PLANER
Скачать шрифт PLANER
LEAGUE GOTHIC
Скачать шрифт LEAGUE GOTHIC
HALLO SANS
Скачать шрифт HALLO SANS
ECONOMICA
Скачать шрифт ECONOMICA
KAINE
Скачать шрифт KAINE
FORUM
Скачать шрифт FORUM
GEARUS
Скачать шрифт GEARUS
NOUGATINE
Скачать шрифт NOUGATINE
ODIN ROUNDED
Скачать шрифт ODIN ROUNDED
PROZA
Скачать шрифт PROZA
KILOGRAM
Скачать шрифт KILOGRAM
ELIGIBLE
Скачать шрифт ELIGIBLE
CERTA SANS
Скачать шрифт CERTA SANS
BARIOL
Скачать шрифт BARIOL
METICULOUS ARIEL
Скачать шрифт METICULOUS ARIEL
DALLE
Скачать шрифт DALLE
OSTRICH SANS
Скачать шрифт OSTRICH SANS
INNER CITY
Скачать шрифт INNER CITY
LEDGER REGULAR
Скачать шрифт LEDGER
CORBERT
Скачать шрифт CORBERT
FV ALMELO
Скачать шрифт FV ALMELO
SIGNIKA
Скачать шрифт SIGNIKA
CASSANNET
Скачать шрифт CASSANNET
TIENNE
Скачать шрифт TIENNE
CHUNK FIVE
Скачать шрифт CHUNK FIVE
CORBERT CONDENSED REGULAR
Скачать шрифт CORBERT
MAGNA
Скачать шрифт MAGNA
DIAVLO
Скачать шрифт DIAVLO
AERO MATICS
Скачать шрифт AERO MATICS
AXIS
Скачать шрифт AXIS
HAPNA MONO
Скачать шрифт HAPNA MONO
AARAM
Скачать шрифт AARAM
ALDO OPEN
Скачать шрифт ALDO OPEN
WEBNAR BOLD
Скачать шрифт WEBNAR BOLD
AENEA
Скачать шрифт AENEA
GALACTICASTLE
Скачать шрифт GALACTICASTLE
REN
Скачать шрифт REN
PHANTASM
Скачать шрифт PHANTASM
ANDERS
Скачать шрифт ANDERS
SILENT LIPS
Скачать шрифт SILENT LIPS
DUMA
Скачать шрифт DUMA
BOSUN
Скачать шрифт BOSUN
GAFATA
Скачать шрифт GAFATA
CAMPTON
Скачать шрифт CAMPTON
PENNA
Скачать шрифт PENNA
CANTER
Скачать шрифт CANTER
OVERPASS
Скачать шрифт OVERPASS
FARRAY
Скачать шрифт FARRAY
PORTO
Скачать шрифт PORTO
FERAL
Скачать шрифт FERAL
SIFONN
Скачать шрифт SIFONN
HIDE TIDE
Скачать шрифт HIDE TIDE
PORTICA
Скачать шрифт PORTICA
ATC KREUGER
Скачать шрифт ATC KREUGER
LICHTSPIELE
Скачать шрифт LICHTSPIELE
GENT
Скачать шрифт GENT
BITTER HT
Скачать шрифт BITTER HT
MARTA
Скачать шрифт MARTA
MODUM
Скачать шрифт MODUM
MEDIO
Скачать шрифт MEDIO
KORNEUBURG SLAB
Скачать шрифт KORNEUBURG SLAB
ALEO
Скачать шрифт ALEO
SESHAT
Скачать шрифт SESHAT
STREETWEAR
Скачать шрифт STREETWEAR
BARRIO
Скачать шрифт BARRIO
CHOMP
Скачать шрифт CHOMP
BLENDA
Скачать шрифт BLENDA
ORANIENBAUM
Скачать шрифт ORANIENBAUM
BOOMTOWN
Скачать шрифт BOOMTOWN
Все шрифты архивом (файл на @Mail. ru).
Другие статьи
Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.
Генератор шрифтов и средство смены шрифтов
Капители Шрифт Копировать
Копировать
Валютный шрифт Копировать
Копировать
Шрифт с двойной штриховкой Копировать
Копировать
Шрифт Antrophobia Копировать
Копировать
Пузырьковый шрифт Копировать
Копировать
Невидимый шрифт Копировать
Копировать
Двухцветный шрифт Копировать
Копировать
Fraktur Шрифт Копировать
Копировать
Жирный шрифт Fraktur Копировать
Копировать
Fantasy шрифт Копировать
Копировать
Rusify Шрифт Копировать
Копировать
Шрифт Black Bubble Копировать
Копировать
Жирный шрифт Script Копировать
Копировать
рукописный шрифт Копировать
Копировать
Гладкий шрифт Копировать
Копировать
Шрифт символов Копировать
Копировать
Курсив Копировать
Копировать
Полужирный курсив Копировать
Копировать
Моноширинный шрифт Копировать
Копировать
Шрифт Sorcerer Копировать
Копировать
Шрифт High Above Копировать
Копировать
Интервальный шрифт Копировать
Копировать
So hot шрифт Копировать
Копировать
Квадратный шрифт Копировать
Копировать
Перевернутый шрифт Копировать
Копировать
Размытый шрифт Копировать
Копировать
ШрифтTiny Caps Копировать
Копировать
Черный квадрат шрифт Копировать
Копировать
Необычный стиль 1 Шрифт Копировать
Копировать
Fancy style 2 Шрифт Копировать
Копировать
Необычный стиль 3 Шрифт Копировать
Копировать
Необычный стиль 4 Шрифт Копировать
Копировать
Необычный стиль 5 Шрифт Копировать
Копировать
Необычный стиль 6 Шрифт Копировать
Копировать
Необычный стиль 7 Шрифт Копировать
Копировать
Необычный стиль 8 Шрифт Копировать
Копировать
Необычный стиль 9 Шрифт Копировать
Копировать
Необычный стиль 10 Шрифт Копировать
Копировать
Необычный стиль 11 Шрифт Копировать
Копировать
Необычный стиль 12 Шрифт Копировать
Копировать
Необычный стиль 13 Шрифт Копировать
Копировать
Необычный стиль 14 Шрифт Копировать
Копировать
Необычный стиль 15 Шрифт Копировать
Копировать
Необычный стиль 16 Шрифт Копировать
Копировать
Необычный стиль 17 Шрифт Копировать
Копировать
Необычный стиль 18 Шрифт Копировать
Копировать
Необычный стиль 19 Шрифт Копировать
Копировать
Необычный стиль 20 Шрифт Копировать
Копировать
Необычный стиль 21 Шрифт Копировать
Копировать
Необычный стиль 22 Шрифт Копировать
Копировать
Необычный стиль 23 Шрифт Копировать
Копировать
Необычный стиль 24 шрифта Копировать
Копировать
Fancy style 25 Шрифт Копировать
Копировать
Необычный стиль 26 Шрифт Копировать
Копировать
Необычный стиль 27 Шрифт Копировать
Копировать
Fancy style 28 Шрифт Копировать
Копировать
Необычный стиль 29 Шрифт Копировать
Копировать
Необычный стиль 30 Шрифт Копировать
Копировать
Fancy style 31 Шрифт Копировать
Копировать
Необычный стиль 32 Шрифт Копировать
Копировать
Fancy style 33 Шрифт Копировать
Копировать
Необычный стиль 34 Шрифт Копировать
Копировать
Необычный стиль 35 Шрифт Копировать
Копировать
Необычный стиль 36 Шрифт Копировать
Копировать
Необычный стиль 37 Шрифт Копировать
Копировать
Необычный стиль 38 Шрифт Копировать
Копировать
Необычный стиль 39 Шрифт Копировать
Копировать
Fancy style 40 Шрифт Копировать
Копировать
Необычный стиль 41 Шрифт Копировать
Копировать
Зачеркнутый шрифт Копировать
Копировать
Зачеркнутый шрифт тильды Копировать
Копировать
Двойной шрифт Копировать
Копировать
Lightning Шрифт Копировать
Копировать
Зигзагообразный шрифт Копировать
Копировать
Двойной шрифт Копировать
Копировать
бесконечный шрифт Копировать
Копировать
Ripple Шрифт Копировать
Копировать
Шрифт Double Bud Копировать
Копировать
Проверенный шрифт Копировать
Копировать
Stinky Font (Вонючий шрифт) Копировать
Копировать
Мост над шрифтом Копировать
Копировать
Шрифт Bridge bellow Копировать
Копировать
Мост над нижним шрифтом Копировать
Копировать
Шрифт со звездочкой снизу Копировать
Копировать
Плюс знак ниже Шрифт Копировать
Копировать
x шрифт ниже Копировать
Копировать
Шрифт со стрелкой ниже Копировать
Копировать
Точка над шрифтом Копировать
Копировать
Облачный шрифт Копировать
Копировать
Шрифт Squiggles Копировать
Копировать
Строгий шрифт Копировать
Копировать
Выбор типа текста: факторы, которые необходимо учитывать
Выбор подходящего шрифта или семейства для использования текста является ключевым аспектом дизайн-проекта. Лучшая отправная точка — подтвердить требования вашего клиента и потребности аудитории.
Выделить время на изучение подходящих вариантов шрифтов — будь то несколько минут или большую часть дня — является разумным вложением. Это проложит путь к эффективному дизайнерскому решению и сэкономит время в долгосрочной перспективе.
Вот семь ключевых факторов, которые следует учитывать при поиске подходящего шрифта для текста:
- Демография
Знайте, кто ваша целевая аудитория, включая ее возрастной диапазон и конкретные интересы.Четко сформулируйте цели пьесы. Независимо от того, продаете ли вы продукт или услугу, предоставляете информацию или развлечение, ваша типографская цель — привлечь аудиторию. Например, очень юной аудитории (такой как аудитория детских книг) требуется шрифт с простыми формами букв, которые «начинающий читатель» может легко разглядеть. С другой стороны, дизайн для высокотехнологичной аудитории может гарантировать, что шрифт будет выглядеть чистым и современным, или даже остроумным. - Разборчивость
Чтобы привлечь и удерживать внимание читателя, шрифты, предназначенные для текста, должны быть разборчивыми и легко читаемыми.Сохраните больше декоративных, привлекательных дизайнов для заголовков, заголовков и других более заметных применений. Подробнее о удобочитаемости читайте в статье «О читаемости». - Длина копии
Для книги, журнала или газеты выбранный вами шрифт будет использоваться для установки длинного текста. Для этой цели степень необходимой разборчивости выше, чем если бы шрифт использовался только для нескольких строк или параграфа или двух. Для более короткого текста можно рассмотреть шрифт с немного большей индивидуальностью, потому что внимание читателя будет меньше отвлекаться. - Serif против Sans
Принято считать, что шрифты с засечками легче читать для длинного текста, чем шрифты без засечек, особенно при меньшем размере. Это верно во многих ситуациях, но не абсолютное правило. Другие факторы, которые следует учитывать перед принятием решения, включают среду чтения, то есть, будет ли он в печати или в Интернете, а также характеристики дизайна — особенно читаемость — рассматриваемого шрифта. Для более подробного объяснения прочтите Serif v.Без текста. - Размер семейства
. Изучите типографские требования проекта и заранее определите, какое большое семейство шрифтов необходимо для удовлетворения всех ваших типографских потребностей. В то время как двух начертаний с курсивом может быть достаточно для некоторых работ, для других могут потребоваться дополнительные веса и версии для создания хорошей визуальной иерархии, необходимой для сильной и эффективной работы. - Особенности:
Многие проекты могут извлечь выгоду из использования маленьких заглавных букв, нескольких стилей фигур, дробей, расширенного диапазона лигатур, альтернативных символов и, возможно, даже росчерка — или расширенной поддержки иностранных языков. Многие современные шрифты OpenType обладают некоторыми или всеми этими функциями. Обязательно отметьте те, которые вам нужны, при проведении поиска. - Печать, Интернет или другие СМИ:
Для каких медиа вам нужен шрифт? Знайте обо всех носителях, в которых необходимо использовать шрифт или семейство. Если просто печатать, то поиск шрифтов будет проще. Но если он нужен для Интернета (через веб-шрифты), электронных книг, смартфонов или для других целей, вам понадобится шрифт, который будет доступен и подходит для любого использования и хорошо работает во всех необходимых средах.
Ключ к выбору шрифта для текста — это сначала сделать домашнее задание, чтобы вы могли сузить свой выбор до тех, которые соответствуют потребностям работы и наиболее эффективно передают сообщение вашего клиента.
Скачать Тип выбора для текстовой статьи
Serif v. Sans for Text
Еще несколько лет назад, когда дело дошло до настройки копирования текста, шрифты без засечек были неудачными типографскими инструментами. Некоторые эксперты по-прежнему выступают против использования их меньше 10 баллов.
Критика шрифтов без засечек для текстовых копий делится на две основные области, касающиеся простоты чтения. Во-первых, многие типографы утверждают, что засечки помогают направлять взгляд читателя по странице. Это было бы верно, если бы глаз двигался по странице одним плавным движением. Однако было доказано, что мы перескакиваем с одной серии слов на другую в так называемых саккадических движениях, а засечки не влияют на такой способ чтения.
Во-вторых, некоторые дизайнеры полагают, что монотонный внешний вид многих шрифтов без засечек утомляет глаз длинной текстовой композицией.Хотя окончательных исследований, подтверждающих это предположение, не проводилось, большинство типографов согласны с тем, что большой блок копии, установленный в гарнитуре, такой как Frutiger Serif, с более заметными контрастами в толщине штрихов, более привлекателен, чем копия, установленная в однотонном дизайне, таком как Futura.
Хороший выбор для печатного текста.Хотя некоторые исследования показывают, что шрифты с засечками могут быть более читаемыми, чем без засечек в печатном виде, результаты, касающиеся экранной типографики, свидетельствуют в пользу использования шрифта без засечек — или небольшой группы надежных дизайнов с засечками — для текста.
Хороший выбор для экранного текста.Как и во многих случаях типографики, лучший выбор — это те, которые наиболее подходят для использования и читателя. Если вы устанавливаете большие блоки текста, предназначенные для непрерывного чтения, в печатной форме, шрифт с засечками может быть хорошим первым выбором. Однако если вы разрабатываете список деталей, каталог или другой документ, в котором информация будет просматриваться небольшими блоками в экранной среде, шрифт без засечек может быть вашим лучшим выбором.
Если ваш проект требует большого количества типографских цифр, рисунки без засечек часто являются лучшими вариантами, потому что цифры в шрифтах без засечек обычно очень хорошо читаются.
Цифры без засечек обычно более разборчивы, чем цифры из шрифта с засечками.WebAIM: Гарнитуры и шрифты
Введение
Гарнитуры — это группы разработанных текстовых символов, таких как Arial, Helvetica и Times New Roman. Шрифты — это подмножества гарнитур, которые имеют единообразный внешний вид, например, 14 пунктов и полужирный шрифт в гарнитуре Arial.Типографика — то, как гарнитуры и шрифты представляют текст — очень влияет на чтение, которое является основным компонентом визуальной доступности.
В этой статье основное внимание уделяется гарнитурам и шрифтам. Чтобы узнать больше о других аспектах типографики и макета, см. Текст / Типографский макет.
Читаемость шрифта
При чтении текста большинство людей не читают и не разбирают отдельные символы или даже слова. Вместо этого глаз быстро просматривает текст и анализирует шаблоны и группы символов (обычно 6-9 символов за раз), которые человеческий мозг почти мгновенно преобразует в смысл. Этот подсознательный процесс позволяет нам очень быстро читать и понимать текстовое содержание с высокой степенью понимания, даже если мы даже не видим и не думаем о символах и словах.
Только когда символы или слова незнакомы или создают барьер для этого прямого процесса преобразования образца в значение, мы должны делать паузу, чтобы более внимательно изучить или обработать символы или слова. Для оптимальной читабельности и понятности главное — избегать этих прерываний.
Некоторые принципы, которые следует учитывать:
- Используйте простые, знакомые и легко анализируемые шрифты.
- Избегайте сложности персонажей
- Избегайте двусмысленности символов
- Используйте ограниченное количество гарнитур, шрифтов и вариаций шрифтов.
- Учитывайте расстояние и вес.
- Обеспечьте достаточный, но не слишком большой контраст между текстом и фоном.
- Избегайте мелких шрифтов и других анти-шаблонов.
Используйте простые, знакомые и легко анализируемые шрифты
Простые, знакомые шрифты легче всего анализировать и читать, потому что в уме уже есть или может быстро сгенерироваться модель форм и узоров текста. Незнакомые или сложные шрифты требуют дополнительного времени и ориентации, что приводит к синтаксическому анализу символов или слов (который является медленным и когнитивно интенсивным), а не к синтаксическому анализу шаблонов / блоков (который является быстрым и менее обременительным).
Не существует лучшего шрифта или шрифта . Эксперты не согласны с тем, какие шрифты обеспечивают лучшую читаемость. Некоторые давние убеждения, такие как идея, что шрифты без засечек лучше для просмотра на экране, а шрифты с засечками лучше для печати, устарели из-за преобладания дисплеев с высоким разрешением.Тем не менее, простота шрифтов имеет решающее значение. Шрифт должен быть знакомым или легко анализируемым, чтобы он быстро стал привычным. Этим требованиям удовлетворяют многие распространенные и стандартные шрифты, доступные в современных операционных системах.
Точно так же не существует одного шрифта, который был бы оптимальным для всех пользователей с дислексией.
Гарнитурыследует выбирать в соответствии с тоном, сообщениями и брендом контента. Например, мультяшный шрифт, используемый на веб-сайте банка, скорее всего, подорвет чувство доверия и профессионализма, которого ожидает пользователь.Обратите внимание на различия между этими двумя логотипами с одинаковым текстом, но с разными шрифтами.
Какому из этих банков вы бы больше доверяли свои деньги?
Избегайте сложности персонажей
Более простые формы и образцы типографского текста быстрее и точнее анализируются человеческим разумом. Будьте осторожны со сложными шрифтами, особенно для длинных участков текста.
Избегайте двусмысленности символов
Когда глифы или символы в одном шрифте выглядят похожими на другие, это может привести к неоднозначности, которая должна быть обработана мозгом, что повлияет на скорость чтения и понимание.
Тексты выше иллюстрируют распространенные двусмысленности. Заглавные буквы «C» и «O» и строчные буквы «e» и «o» в гарнитуре Arial очень похожи из-за очень узкого отверстия в буквах. Это контрастирует с более широким открытием и более четкими различиями между буквами «C» и «O» и «e» и «o» в шрифте Open Sans.
Точно так же заглавная «I», строчная «l» и цифра «1» почти идентичны в Gill Sans, но их гораздо легче отличить друг от друга в Verdana.Несмотря на то, что Вердана немного сложнее, эта небольшая сложность помогает в устранении неоднозначности персонажей.
Используйте ограниченное количество гарнитур, шрифтов и вариантов шрифтов
Каждый раз, когда вы сталкиваетесь с новым шрифтом, шрифтом или вариацией шрифта, ваш разум должен построить карту или модель символов и узоров, чтобы затем быстрее анализировать слова и обрабатывать их значение. Это требует когнитивных усилий и времени. Если шрифт уже знаком, накладные расходы сокращаются.
Будьте осторожны при использовании нескольких шрифтов в одном документе или веб-странице.Убедитесь, что гарнитуры / шрифты совпадают с типами содержимого, такими как один шрифт или шрифт для заголовков и другой для основного текста.
Учитывать расстояние и вес
Правильный интервал между буквами и словами может улучшить читаемость, обеспечивая большее разделение и четкость между соседними символами и словами. Когда буквы или слова расположены очень близко друг к другу, может возникнуть путаница.
Кроме того, вес (то есть толщина глифов) также может влиять на восприятие и читаемость.
Расстояние между текстом WCAG
WCAG требует, чтобы не происходило потери содержимого или функциональности, когда конечный пользователь переопределяет стили страниц для интервала между абзацами до 200% размера шрифта, высоты строки текста / интервала до 150% от размера шрифта, интервала между словами до 16% от шрифта. размер и межбуквенный интервал до 12% от размера шрифта. Убедитесь, что текст вашей страницы можно изменить без его исчезновения или перекрытия другого содержимого страницы.
Обеспечьте достаточный, но не слишком большой контраст между текстом и фоном
Текст намного легче читать, когда между текстом и фоном имеется достаточная разница в контрасте или яркости. Рекомендации по обеспечению доступности веб-контента определяют меры для достаточной контрастности текста. Такие инструменты, как Color Contrast Checker от WebAIM, позволяют легко проверять контраст и определять соответствие требованиям WCAG.
Черный текст на белом фоне используется по умолчанию для веб-содержимого, но эта комбинация может показаться резкой и утомительной, особенно для длинных участков текста. Слишком большой контраст может привести к появлению ореолов или эхо текстовых символов, которые могут повлиять на читаемость, особенно для некоторых с дислексией.Хотя WCAG не имеет максимального порога контрастности, вы можете захотеть стилизовать текст с немного меньшей контрастностью. На этой странице, например, используется очень темно-серый цвет основного текста на белом для небольшого уменьшения контрастности.
Избегайте мелких шрифтов и других анти-шаблонов.
В дополнение к интервалу, весу и контрастности текста, размер текста оказывает значительное влияние на удобочитаемость. Хотя WCAG не имеет требований к минимальному размеру шрифта, это все же является важным соображением для удобства использования.
Относительные размеры шрифта (например, проценты или em) обеспечивают большую гибкость при изменении визуального представления по сравнению с абсолютными единицами измерения (такими как пиксели или точки).
Выбранный размер шрифта также влияет на длину строки — количество символов в строке. Длина строки и другие аспекты макета текста рассматриваются в статье WebAIM «Текст / типографский макет».
Будьте осторожны с более длинными частями текста, которые полностью выделены жирным шрифтом, курсивом, заглавными буквами или имеют нетипичный стиль.Эти варианты шрифта могут затруднить чтение текста — и каждый новый вариант требует определенной ориентации со стороны пользователя.
Реальный текст против текста в графике
Реальный текст имеет много преимуществ перед текстом в изображениях. Когда контент представлен в виде реального текста, то есть в виде текстовых символов на веб-странице, его можно легко адаптировать. Пользователь может настроить его для лучшей читаемости, например, отрегулировав расстояние между строками, словами и символами, изменив начертание шрифта, изменив цвета текста, увеличив размер текста без потери точности и переведя на другие языки.Кроме того, настоящий текст можно копировать и вставлять, он адаптируется к экранам различных размеров, более совместим с поисковыми системами, средами с низкой пропускной способностью и т. Д.
Когда текст вместо этого определяется внутри изображения, он теряет большую часть адаптируемости. Рекомендации по обеспечению доступности веб-контента требуют, чтобы, если одно и то же визуальное представление может быть выполнено с использованием только текста, изображение не использовалось для представления этого текста.
Текст в изображениях может стать более пиксельным, блочным и трудным для чтения при увеличении, что может быть необходимо пользователям с некоторыми нарушениями зрения.
Пример
Увеличенное изображение слова «Университет» выше трудно читать, потому что оно стало пиксельным.
Советы по типографике: рекомендации по тексту и шрифту для дизайна этикеток продуктов
Насколько важен текст на этикетках продуктов? Одним словом, очень.
Типографика, используемая на этикетке, не просто предоставляет информацию — она добавляет совершенно новый способ выразить стиль или настроение продукта. Конечно, дизайн должен гарантировать, что текст по-прежнему может передавать четкое сообщение.Вот несколько советов, которые помогут вам создать типографику на этикетках ваших продуктов.
Пригласите нужных гостей в ваше семейство шрифтов
Выбранные вами шрифты играют огромную роль в передаче индивидуальности бренда. Элегантный шрифт с засечками — отличный вариант для стильной винной этикетки, а более современный шрифт без засечек подходит для модных этикеток чайного гриба. Выбор шрифтов зависит от того, какое сообщение вы хотите передать — просто будьте осторожны, чтобы не использовать слишком много разных личностей.
Когда дело доходит до разных шрифтов, хорошего может быть слишком много. Слишком много стилей шрифтов может привести к появлению сообщения о загруженности. Один из способов избежать этого — попробовать использовать несколько шрифтов из одного семейства. Эта практика поможет вам создать более цельный образ без угрозы отвлечения контрастов.
Другой метод заключается в сочетании более простых, менее навязчивых шрифтов с более стильными. Яркий дисплейный шрифт отлично подходит для названий продуктов или других заголовков, в то время как шрифт без засечек четко представляет другую важную информацию.Поэкспериментируйте с тем, что работает, а что нет, чтобы найти комбинацию, которая идеально подходит для вашего продукта, не сбивая с толку ваше сообщение.
Создание визуальной иерархии
Посмотрим правде в глаза — люди не всегда любят читать. Это проблема, когда вам нужна ваша этикетка, чтобы рассказать историю о продукте. К счастью, хорошая визуальная иерархия текста поможет вам установить правильный шаблон просмотра и стильно передать свою историю.
Как и в любой истории, вашей метке потребуется начало, середина и конец.Некоторые слова важнее других, поэтому вы можете изменять вес и расположение определенного текста, чтобы отображать информацию в определенном порядке. Использование одинаковых размеров и шрифтов для всего заставит ваших клиентов работать, чтобы определить, что важно. В бизнесе, где у вас есть считанные секунды, чтобы произвести впечатление, ни у кого нет на это времени.
Вместо этого спланируйте, какая информация заслуживает заголовка, подзаголовка или обычного основного текста. Большие жирные шрифты создают визуальную иерархию того, что для вашей аудитории является первым.Оттуда вы можете варьировать дизайн каждой линии, чтобы нарисовать глаза покупателя в определенном порядке. Этот процесс поможет вам выделить основы вашего продукта — ваш бренд и то, что это за продукт — для людей, которые любят снимать.
Убедитесь, что текст на этикетке разборчиво и читаем
Если люди не могут прочитать ваш текст, значит, что-то пошло не так в процессе разработки. Нечеткий дизайн мешает пользователям различать отдельные символы, в то время как нечитаемый рисунок, в общем, не читается.Любая проблема может быть вызвана несколькими разными факторами.
РазмерВыбор правильного размера текста — это тонкий баланс. Если вы сделаете слишком мало, ваши слова могут быть слишком мелкими для среднего потребителя. Если текст слишком большой, он может перегружать ваш дизайн. В общем, все, что меньше 5 пт. шрифт довольно трудно читается. Также не помогает то, что текст на экране компьютера может быть более разборчивым, чем на бумажном носителе. Чтобы найти правильный баланс, попробуйте распечатать копию своего дизайна в полном размере.Это позволит вам оценить удобочитаемость вашего дизайна на разных расстояниях и при необходимости отрегулировать размер текста.
Бывают также случаи, когда размер шрифта частично вам диктуется. Обязательные элементы, такие как списки ингредиентов и правительственные предупреждения для этикеток пива или других продуктов, подпадающих под федеральный контроль, имеют минимальные требования к размеру, чтобы они были удобочитаемыми для населения. Таким образом, вы должны убедиться, что ваш лейбл соблюдает эти правила, чтобы избежать любых возможных последствий.
РасстояниеКак и размер текста, интервал между словами — это ситуация Златовласки. Слова не должны располагаться слишком близко или слишком далеко друг от друга, а где-то между ними просто справа. Как и в случае с размером, то, что вы видите на экране, может ввести в заблуждение.
То, что может показаться прекрасным в файле дизайна, может иметь недостаточный интервал между символами или интерлиньяж между строками текста. С другой стороны, слишком много места мешает пользователям быстро обработать то, что на вашем этикетке.В общем, более свободный ход — хороший способ улучшить основной текст, но вам стоит проверить пробный отпечаток, чтобы проверить, как он выглядит для среднего прохожего.
Цветовые контрастыНеудивительно, что выбор цвета играет огромную роль в дизайне этикеток, но он также оказывает большое влияние на разборчивость текста. Некоторые цветовые комбинации могут хорошо смотреться вместе, но могут создавать проблемы для потребителей, пытающихся прочитать ваш текст. Комбинации темного с темным или светлого с светлым особенно сложны для практически любого текста — для мелкого шрифта это рецепт катастрофы.
Решение? Старайтесь использовать контрастные цвета для текста и фона. Эта комбинация не только облегчит чтение слов, но и несоответствие между двумя цветами поможет сделать ваши сообщения привлекательными для проходящих мимо потребителей.
Сделайте ваши дизайны этикеток сияющими с правильной компанией по печати этикеток
После того, как вы потратили много времени на разработку этикетки продукта или попросили кого-то сделать это за вас, вам все равно понадобится компания, занимающаяся печатью этикеток, которая поможет вам получить максимальную отдачу от вашего дизайна.
В Blue Label мы проведем вас через процесс печати, чтобы помочь вам инвестировать в правильные материалы и возможности печати, соответствующие вашему дизайну и потребностям в производительности. Мы также будем работать с вами, чтобы убедиться, что ваш дизайн готов, включая проверку того, что ваши типы и шрифты преобразованы в контуры для успешной печати.
Готовы работать с компанией по печати этикеток с непревзойденным качеством и сервисом? Свяжитесь с нами сегодня по поводу вашего следующего проекта лейбла.
Какие инструменты использовать и как их использовать
Мемы — это гибриды социальной информации: частично изображение, частично текст.Иногда у них есть другие части, но почти всегда есть эти две.
Изображения мгновенно узнаваемы, но как насчет стиля текста ? Шрифт и стиль текста играют большую роль в мемах, которые мы знаем и любим. Я дам вам краткое руководство по наиболее распространенным шрифтам для мемов, по их использованию и по самым простым способам сделать текст вашего мема популярным.
Начать сейчас: Откройте редактируемый шаблон мемов или Kapwing’s Meme Maker , чтобы создать любой мем с помощью Impact, Comic Sans, Arial, Montserrat и сотен других шрифтов для мемов.
Оригинал: IMPACT
Шрифт Impact — это «классический» мем-шрифт. Первый всемирно вирусный мем, Happy Cat, был просто * сказал кот * с фразой «Я МОГУ ЧЕЗБУРГЕР?» Вверху фотографии нанесен белый герб, все заглавные буквы Impact. С тех пор шрифт определил основной стиль мемов, от «Y U NO» до подписей к вашему любимому макросу изображения Губки Боба.
Impact — безусловно, самый популярный шрифт, используемый в создателе мемов Kapwing (удивительно, поскольку по умолчанию используется Arial).
Comic Sans MS
Comic Sans — это действительно мем. Он напоминает более простую интернет-культуру начала 2000-х годов, когда непринужденный веселый шрифт когда-то был приемлемым для не-ироничного использования. Теперь это что-то вроде шрифта «Бумер». Но Comic Sans также играет особую роль в культуре мемов.
Семейство мемов Doge Shibe, например, сразу же узнаваемо благодаря использованию яркого плавающего текста Comic Sans. Использовать другой шрифт в меме Doge было бы столь же кощунственно, как и правильно использовать его усиливающие прилагательные и наречия.
Анимированный текст / WordArt
Хотя абстрактные или сюрреалистические мемы также иногда используют Comic Sans, они чаще ассоциируются с анимированным текстом или функциями WordArt в неясных, почти неразборчивых холстах мемов.
То, что когда-то занимало странные, малонаселенные уголки Интернета, теперь приблизилось к мейнстриму, и эти типы абсурдистских мемов становятся все более узнаваемыми.
Курсивные или каллиграфические шрифты
За последние два года выросла популярность двух отдельных семейств мемов с использованием различных «причудливых» шрифтов.Мем «Галактический мозг» иногда использует причудливые шрифты для самых смелых идей, а мем «Необычный Пух» требует курсивных или каллиграфических шрифтов для своих сложных вариантов. Вы используете очень элегантный шрифт? Потребуются ли годы обучения, чтобы писать от руки? Это почти неразборчиво? Чем больше усилий потребуется для его чтения, тем лучше.
Попробуйте такие шрифты, как Dancing Script или Satisfy , чтобы добиться необычного эффекта. Или просто добавьте курсив к Arial или Times New Roman.
Arial
Kermit Window MemeВ случае сомнений используйте Arial. Действительно. Impact может показаться стандартным шрифтом для мемов, но вам следует избегать его, если вы не хотите, чтобы ваш мем выглядел как макрос изображения 2006 года. Другие простые, скромные шрифты также имеют свои недостатки. Раз? Слишком корпоративно. Helvetica? Слишком круто. Курьер? Практически сам по себе незашифрованный мем. Arial — это то, что вам нужно, если вы хотите, чтобы ваше изображение и подпись были в центре внимания вашего мема.
Montserrat
Современные создатели мемов называют Montserrat своим любимым шрифтом.Монсеррат тоньше и квадратнее, чем Arial, что придает вашим мемам более современный вид. Он стал популярным, потому что он очень похож на шрифт Twitter , так что он гармонирует с репостами твитов и мемами скриншотов.
Мем от @dylanjpalladino со шрифтом MontserratСоздание мемов с помощью пользовательских шрифтов
Теперь, когда вы знаете самые важные шрифты мемов и когда их использовать, вам нужно знать, как их использовать. Я рекомендую использовать Kapwing — он был разработан как оптимизированный инструмент для создания мемов и дает вам сотни вариантов шрифтов на выбор!
Чтобы создать свой мем, перейдите по адресу Kapwing.com и начнем со Studio. Вы можете выбрать существующий шаблон мема на странице «Коллекции», затем «Шаблоны мемов». Из этой библиотеки мемов вы можете начать с настраиваемого шаблона популярного мема.
Если вы хотите создать свой мем с нуля, нажмите «Начать редактирование» на домашней странице. Если вы уже вошли в систему, нажмите «Новый проект» и «Начать с Studio».
В Studio вы можете загрузить любое изображение, видео или GIF со своего устройства или из любого веб-сайта. После того, как ваш файл находится в Studio, вы можете щелкнуть одну из опций «Добавить отступы» в правой части окна. окна, в зависимости от типа создаваемого мема.
Чтобы добавить текстовое поле, выберите «Текст» на верхней панели инструментов. Выберите кнопку с надписью «Arial» в правой части окна и либо просмотрите самые популярные шрифты, либо нажмите «Сортировать по алфавиту», чтобы просмотреть полный список шрифтов. Вы даже можете добавить в свой текст собственную анимацию, нажав «Анимировать».
Kapwing Font SelectorПрежде всего, мемы должны демонстрировать ваше творчество! Поэтому, если вы хотите, чтобы у ваших мемов был определенный тон, отношение или характер, игра со шрифтами может быть хорошим способом выделиться.Если вас интересуют другие советы и руководства по созданию замечательных мемов и тенденций в социальных сетях в 2021 году, посетите канал Kapwing на YouTube , где мы публикуем несколько новых видео каждую неделю. И пока вы здесь, ознакомьтесь с некоторыми связанными статьями о создании мемов в Интернете:
• Meme Maker для Facebook
• Кошачьи мемы
• Самые популярные мемы-картинки в 2021 году
• Как редактировать трейлер фильма
Тег | изменить размер, шрифт и цвет текста
Путь // www.yourhtmlsource.com → Текст → ТЕГ <ШРИФТА>
Шрифт Тег
был введен в начале существования HTML, чтобы позволить дизайнерам изменять размер, шрифт и цвет текста. Это принесло больше вреда, чем пользы — по разным причинам — но в основном потому, что это крайне неэффективный способ форматирования текста. Форматирование текста CSS намного лучше, но знание этих старых приемов все еще полезно.
Навигация по страницам:
Размер шрифта
| Шрифт Face
· Ограничения шрифтов
· Общие шрифты
| Цвет шрифта
Эта страница последний раз обновлялась 21.08.2012
Часы будущего:
Начиная с HTML 4.01 вышел в 1998 году, тег устарел. Это означает, что его больше не следует использовать , поскольку в нашем распоряжении значительно превосходящих таблиц стилей для форматирования текста на наших HTML-страницах.
Как это ни печально, с тех пор, много лет назад, не произошло большого снижения использования тегов . С этой целью I настоятельно не рекомендуют вам использовать тег вообще в вашем HTML . Он очень ограничен и может добавить несколько килобайт к размеру каждого из ваших файлов HTML. Более того, в этом просто нет необходимости.
CSS, с другой стороны, дает вам гораздо больше контроля над тем, как выглядит ваш текст, и почти ничего не добавляет к времени загрузки. Если вам еще предстоит заняться таблицами стилей, не бойтесь — с ними действительно не так уж и сложно разобраться. Прочтите введение в таблицы стилей, а затем CSS и текст, и вы никогда не оглянетесь назад.
Дополнительная литература:
Остальная часть этой страницы представляет собой просто описание того, как раньше работал тег .Поскольку вы, конечно, не собираетесь его использовать, вам следует прочитать это исключительно из интереса.
Размер шрифта
У вас есть два варианта установки размера текста: размер абсолютно или относительно . Абсолютные размеры находятся в диапазоне от 1
до 7
и задаются следующим образом:
size = "2"> текст
В большинстве браузеров размер шрифта по умолчанию установлен как 3
. На большинстве сайтов размер текста будет примерно 2
или 3
.
Относительный размер означает, что размер текста будет изменен относительно пользовательского размера по умолчанию . Это лучше, потому что он адаптируется к предпочтениям ваших пользователей — если они специально настроили свои браузеры для отображения текста большего размера, чем обычно, ваш текст будет увеличиваться пропорционально. У вас есть диапазон от +6
до +1
и от -1
до -6
. Плюс 1 и минус 1 вы будете использовать чаще всего.В качестве ярлыков для этих двух размеров используются теги
и
, которые помогают.
Текст на один размер больше, чем используется по умолчанию в браузере.
Держитесь подальше от очень маленького текста, так как его всегда сложно читать. Большой текст может затопить страницу и вызвать чрезмерную прокрутку. В конце концов, ваш выбор размера шрифта будет во многом зависеть от того, сколько текста будет одновременно отображаться на странице.Это также связано с вашим выбором шрифта, который мы перейдем к следующему.
Лицевая сторона шрифта
Во-первых, если вы вообще не вносите изменений, ваш текст, вероятно, будет выглядеть так:
12pt Black Times New Roman
Не самый красивый или подходящий шрифт в мире, потому что он действительно был разработан для чтения с бумаги, а не с экранов компьютеров. Итак, вы захотите изменить его на что-нибудь более читабельное и красивое.
Загляните в папку шрифтов (на ПК это C: \ windows \ fonts ).У вас должно быть несколько десятков разных шрифтов. Некоторые из них подходят для использования в Интернете, а другие вы будете использовать снова и снова. Один из наиболее распространенных шрифтов, используемых в сети, — это Arial (вариант Helvetica для Mac). Чтобы изменить текст на Arial или любой другой шрифт, используйте теги
face = "Arial"> Ваш текст здесь.
Атрибут face
был назван так, потому что дизайн шрифтов более точно известен как шрифтов .
Ограничения шрифтов
Определенное начертание шрифта будет отображаться на экране компьютера читателя только в том случае, если этот шрифт установлен на их компьютере. Итак, если у вас есть вся ваша страница, определенная шрифтом Digital (»скачать) или чем-то еще, многие ваши зрители просто получат страницу со скучным старым Times New Roman. Чтобы обойти это, лучше всего, конечно, использовать обычные шрифты . Есть набор общих шрифтов, которые, как вы можете быть более или менее уверены, появятся во всех системах ваших читателей.Атрибут face
позволяет указать список шрифтов за раз. Рекомендуется указать резервные шрифты на случай, если что-то пойдет не так. Наручные часы:
текст
Смотрите — у вас есть пара шансов найти хороший шрифт, разделенный запятыми. Если первый недоступен, будет использован второй вариант и так далее. Вы можете продолжить длинный список, но на самом деле вам следует остановиться примерно через 3 часа, потому что в противном случае вы зря тратите время.Старайтесь, чтобы шрифты оставались похожими на , и попробуйте закончить его на общем шрифте , чтобы держаться подальше от Times.
Все шрифты принадлежат к определенному семейству шрифтов. Например, Arial относится к типу «без засечек». Если все ваши альтернативы исчерпаны, а совпадения не найдены, последнее средство — указать семейство шрифтов. В этом случае будет использоваться значение по умолчанию для этого семейства. Вы можете узнать все о семействах шрифтов и различиях между ними в веб-типографике.
Даже в этом случае большинство людей не увидят ваш супер-крутой шрифт, поэтому, если вы хотите, чтобы этот шрифт использовался, превратите его в изображение в редакторе изображений и поместите изображение на свою страницу там, где хотите. В правильном веб-дизайне это не одобряется, но если вы только начинаете, это приемлемо, пока вы не научитесь правильно обходить его. Помните, конечно, что если у кого-то отключены изображения, он вообще не сможет прочитать этот текст. Убедитесь, что это не слишком важно, и всегда используйте атрибут alt.
sourcetip: , если у вас есть текстовый процессор, например Word, попробуйте использовать в нем пару шрифтов. Намного быстрее найти то, что вам нужно.
Общие шрифты
Для вашего удобства вот группа наиболее популярных и распространенных списков шрифтов:- Arial, Helvetica, без засечек
- Trebuchet MS, Arial, Helvetica, без засечек
- Verdana, Женева, без засечек
- Times New Roman, Times, с засечками
- Джорджия, Гарамонд, Палатино, с засечками
- Courier New, Courier, моноширинный
Цвет шрифта
Чтобы изменить цвета текста на странице для всей страницы , вы можете определить его в теге
. У меня есть полное руководство по телу.
Чтобы изменить цвета только небольшого блока текста или отдельного слова, вы должны снова использовать старый тег шрифта . Формат
color = "# ff0000"> текст
Цвета в HTML должны быть определены как HEX-коды, которые представляют собой 6-значные коды, представляющие количество красного, зеленого и синего (RGB) в цвете. Чтобы увидеть полную диаграмму этих кодов, чтобы вы могли выбрать те, которые вам нравятся, см. Таблицу цветов HEX.
текст
Новые браузеры позволяют вместо этого дать цвету имя , как указано выше, но ваш выбор более ограничен. Чтобы увидеть диаграмму этих цветов, посмотрите на эту диаграмму.
.