Шрифты сайта не совпадают на windows и mac
Почему мой сайт выглядит по-разному на Mac и Windows? Слова на моем сайте при просмотре на Mac более понятны, в то время как на Windows они не очень разборчивы. Шрифт, который я использую, — Georgia sans-serif.
Если это какая-то разница в технике рендеринга, может ли кто-нибудь предложить какой-нибудь шрифт, который выглядит одинаково на обоих.
С уважением
fontsПоделиться Источник vikmalhotra 14 июля 2010 в 05:28
3 ответа
- Большие шрифты не гладкие в firefox на windows
Итак, я делаю небольшой сайт портфолио (http://www.cip.ifi.lmu.de/~fritschd/testDebo/), где у меня есть коробка BIG с шрифтом BIG. На mac все в порядке, на windows, однако, в зависимости от браузера это действительно может быть отстой. Firefox на windows-один из них. Есть ли способ сгладить этот…
- красивые шрифты CSS для Mac и Windows
Я вижу много сайтов, которые показывают отличные шрифты, которые не являются изображениями. Например: сайт Firebug и счастливый винтик . Похоже, существует множество CSS ‘tricks’, бит JavaScript и любых других трюков, используемых различными веб-дизайнерами для выполнения этой работы (я не…
1
Используемый шрифт должен быть доступен на машине, которую вы используете, вы не можете просто использовать любой шрифт. Если вы используете шрифт, которого нет на компьютере, вместо него будет использоваться шрифт по умолчанию.
ссылка на безопасные веб-шрифты: http:/ / web.mit.edu/jmorzins/www / fonts. html
Поделиться Mark Redman 14 июля 2010 в 05:44
1
Какие шрифты вы используете в качестве резервных, если шрифт не находится на клиенте? Какой размер вы их устанавливаете, используя какую единицу измерения (px/em/%, и т. д.)? Разве Джорджия не шрифт с засечками?
Скриншот и примеры CSS было бы полезно знать наверняка, но в их отсутствие одна из возможных причин, которая приходит на ум,-это сглаживание шрифта OS.
Mac OS имеет отличное сглаживание шрифтов, включенное по умолчанию, в то время как пользователи Windows XP должны войти в свои настройки дисплея, чтобы включить его (многие этого не делают из-за недостатка знаний). Даже тогда у пользователей XP есть 2 варианта: обычный «font smoothing» (плохой) или «ClearType» (потрясающий).
Поделиться Chris 14 июля 2010 в 05:46
0
Потому что Mac использует рендеринг шрифта blurry-all-bold.
Серьезно, однако, шрифты отображаются по-разному на разных платформах. Вот список всех шрифтов web-safe-ish со скриншотами того, как они выглядят на Mac/Windows.
- Почему размер шрифта в Safari на Mac OS намного меньше?
У меня есть веб-сайт, который использует CSS для всего своего стиля, а в Windows межстрочный интервал и размеры шрифта все совпадают с Firefox, Opera, IE, Safari, Chrome. Я только что попробовал его под Firefox на Mac (Snow Leopard), и хотя шрифты обычно выглядят немного более жирными, чем на…
- Веб-шрифты на Mac выглядят иначе, чем Windows
Я решил использовать один из многих веб-шрифтов Google в качестве основного шрифта для моего сайта. Веб-сайт отображается как на компьютере Mac, так и на компьютере Windows, но шрифт выглядит несколько иначе с точки зрения их размеров и пространственной конформации на странице. Ссылка на шрифт…
Похожие вопросы:
Рендеринг шрифтов Mac на Windows
Мне нравится, как Mac OS красиво отображает шрифты (а не только браузеры). Мне было интересно, можем ли мы каким-то образом получить такой же рендеринг в браузерах, работающих на Windows? Кто-то…
Шрифты Typekit не работают на некоторых машинах
Мы используем шрифты typekit для некоторых наших стилей. Мы заметили, что на некоторых машинах шрифты не загружаются на наш живой сайт, хотя они загружаются на наш сайт разработчиков. Это происходит…
Печать с swing на Mac и Windows-где поддержка postscript?
Я печатаю сложное приложение swing UI на физический принтер через аэропорт. У меня есть машины Mac & windows, которые печатают на одном принтере. Печать с Mac выглядит великолепно. Печать с…
Большие шрифты не гладкие в firefox на windows
Итак, я делаю небольшой сайт портфолио (http://www.cip.ifi.lmu.de/~fritschd/testDebo/), где у меня есть коробка BIG с шрифтом BIG. На mac все в порядке, на windows, однако, в зависимости от браузера…
красивые шрифты CSS для Mac и Windows
Я вижу много сайтов, которые показывают отличные шрифты, которые не являются изображениями. Например: сайт Firebug и счастливый винтик . Похоже, существует множество CSS ‘tricks’, бит JavaScript и…
Почему размер шрифта в Safari на Mac OS намного меньше?
У меня есть веб-сайт, который использует CSS для всего своего стиля, а в Windows межстрочный интервал и размеры шрифта все совпадают с Firefox, Opera, IE, Safari, Chrome. Я только что попробовал его…
Веб-шрифты на Mac выглядят иначе, чем Windows
Я решил использовать один из многих веб-шрифтов Google в качестве основного шрифта для моего сайта. Веб-сайт отображается как на компьютере Mac, так и на компьютере Windows, но шрифт выглядит…
Google шрифты не очень хорошо отображаются на моем сайте ussing Mac
Получить четкие шрифты на ПК и mac?
У меня есть проблемы со шрифтами на моем сайте, чтобы иметь шрифты skarp как на mac, так и на ПК. Шрифты выглядят четкими на Mac, но на PC шрифты очень тусклые и тонкие. Есть ли что-то конкретное в…
Пользовательский шрифт веб-сайта выглядит странно на устройствах Mac
Я добавил пользовательский шрифт на свой сайт, чтобы лучше соответствовать теме, но при использовании Mac шрифт выглядит странно и почти перевернут. Он отлично смотрится на Windows, есть ли способ…
Слишком большие шрифты в Outlook
Когда я открываю следующий email в Outlook (сохраните его как email.eml
, и он может быть открыт Outlook), размер шрифта слишком велик. Из-за <span>...</span>
, Outlook предлагает открыть email в браузере. Если я это делаю, то используется правильный размер шрифта. Настройка масштабирования в Outlook, конечно, установлена на 100%. как я могу заставить Outlook отображать правильный размер шрифта? Я собираюсь разослать информационный бюллетень и не хочу, чтобы все, кто использует Outlook, видели слишком большой шрифт.
html css email fonts outlookDate: Wed, 6 Apr 2016 19:25:19 +0200 From: [email protected] Message-ID: <[email protected]> X-Mailer: PHPMailer 5.2.14 (https://github.com/PHPMailer/PHPMailer) MIME-Version: 1.0 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: 8bit To: [email protected] Subject: Font size test <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Font size test</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8"></head><body><h2>Heading 1</h2> <p>The font size is too large in Outlook!</p> <span>This is a span with height, to make Outlook suggest opening the email in a browser.</span> </body></html>
Поделиться Источник Magnar Myrtveit 06 апреля 2016 в 17:39
2 ответа
- Qt шрифты имеют разные размеры в разных системах
Используя Qt конструктор для создания пользовательского интерфейса-файлов, произошла следующая ошибка: Открытие одного и того же ui-файла в другой системе Linux приводит к различному отображению размеров шрифта. Таким образом, ui-файлы, созданные в одной системе, могут иметь слишком большие шрифты…
- Ужасные шрифты на WinXP с ClearType off-Chrome только
Существует большая проблема в следующем случае: Пользователь имеет Windows XP, ClearType выключен, Google Chrome и веб-сайт использует веб-шрифты Google. Шрифты выглядят очень jerky в этом случае и только в Chrome. css -webkit-font-smoothing ничего хорошего не даст. Кроме того, я заметил, что…
2
Рендеринг информационного бюллетеня в Outlook или через ваш браузер-это совсем другое.
Если вы хотите правильно отобразить его в своем клиенте email, вы должны
Чтобы исправить ваш <h2>
, вы должны указать стиль больше, чем вы делаете прямо сейчас:
<h2>Heading 1</h2>
например.
Вот несколько статей, которые помогут вам начать работу и ознакомиться с правильным кодированием HTML email:
Поделиться Roy 06 апреля 2016 в 18:36
0
Я определил причину увеличения шрифтов в Outlook: параметр «сделать текст и другие элементы больше или меньше» был установлен на 125%.
Этот параметр не изменяет размер шрифта электронных писем при просмотре их в веб-браузере или даже при использовании встроенного почтового приложения Windows 8. Outlook 2013, однако, масштабирует шрифты email на основе этого параметра.
Поделиться Magnar Myrtveit 07 апреля 2016 в 08:33
Похожие вопросы:
Как я могу определить, открыт ли HTML email в Outlook 2007 или 2010 году?
В настоящее время я пытаюсь написать информационный бюллетень для компании, в которой работаю. Информационный бюллетень корректно отображается во всех основных интернет-браузерах (IE 5.55-9, Chrome,…
Шрифты слишком большие на мобильном телефоне — как ограничить размер или исправить?
Я использую CSS, и некоторые шрифты на моем мобильном телефоне разбивают Divs и не портят rest из html. Есть ли способ ограничить размер шрифта в css стилизованных Дивах? Например, у меня есть…
Как вы можете определить (программно), используются ли большие шрифты на Windows 7 PC
Мне нужно определить, используются ли большие шрифты на Windows 7 из приложения, написанного на C++. Любая помощь будет оценена по достоинству.
Qt шрифты имеют разные размеры в разных системах
Используя Qt конструктор для создания пользовательского интерфейса-файлов, произошла следующая ошибка: Открытие одного и того же ui-файла в другой системе Linux приводит к различному отображению…
Ужасные шрифты на WinXP с ClearType off-Chrome только
Существует большая проблема в следующем случае: Пользователь имеет Windows XP, ClearType выключен, Google Chrome и веб-сайт использует веб-шрифты Google. Шрифты выглядят очень jerky в этом случае и…
Ширина изображения слишком велика в Outlook
Я пытаюсь отправить html электронное письмо с изображениями. Изображения хорошо смотрятся во всех email клиентах, но в outlook они слишком широки. Как исправить максимальную ширину изображения?…
Где хранить большие данные для веб-приложения Outlook?
Я разрабатываю свою первую надстройку для веб-приложения Outlook. Мне не ясно, где я должен хранить большие фрагменты данных, предоставленных Пользователем (например, большие куски текста,…
HTML Email стиль не работает в Outlook
У меня есть свойство css, вставленное встроенно в элемент HTML Email text-transform:lowercase элемента span. когда я посылаю email, это показывает, что шрифты написаны в нижнем регистре, кроме…
Если MS Word может отображать пользовательские шрифты, не должно ли это означать, что Outlook может отображать пользовательские шрифты?
Общеизвестно, что Outlook использует Word для визуализации электронных писем. Также довольно широко известно в сообществе HTML email, что Outlook будет отображать пользовательский шрифт как Times…
Как Google Fonts реагирует на HTML в Outlook 2013 году?
Я пытаюсь создать отзывчивый шаблон email для Outlook 2013 года, все работает хорошо, кроме шрифтов. Я использую шрифты из Google fonts и загружаю их вот так: <link…
Шрифты и работа с ними
Основы вёрстки контентаСтрашным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но, а как же поиграть со шрифтами? CSS предоставляет много правил для стилизации шрифтов. С некоторыми из таких свойств вы уже знакомы — это свойство font-weight
и font-size
.
Помимо насыщенности, CSS позволяет управлять следующими настройками:
- Семейство шрифтов;
- Стиль шрифта;
- Стиль строчных символов;
- Размер шрифта;
- Межстрочный интервал.
Не пугайтесь такому количеству различных свойств, их необязательно использовать все сразу. Некоторые используются достаточно редко.
Семейство шрифтов
CSS позволяет указывать шрифты, которые будут использованы на сайте. Для этого используется свойство font-family
. Оно принимает список шрифтов, которые могут быть загружены на сайте. Это может быть одно семейство шрифтов или сразу несколько. Если указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать. Остальные шрифты будут игнорироваться. Например:
.font {
font-family: Georgia, "Times New Roman";
}
Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:
- У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
- У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.
А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:
- Антиква или шрифты с засечками. Такие шрифты чаще всего используется в книгах и новостных сайтах. В CSS обозначается
serif
. - Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается
sans-serif
. - Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается
monospace
.
При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберёт системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.
.font {
font-family: Georgia, "Times New Roman", serif;
}
Всегда указывайте семейство шрифтов по умолчанию. Это считается хорошей практикой, так как не все шрифты могут присутствовать в системе пользователя.
Установка новых шрифтов
Необязательно полагаться только на системные шрифты. В проекте могут использоваться совершенно разные шрифты и верстальщик должен уметь их подключать. Сам по себе шрифт представляет собой файл. Форматов таких файлов может быть несколько и важно знать, какими браузерами они поддерживаются.
- .woff/.woff2 — шрифт формата Web Open Font Format. Распространённый формат, который поддерживается большинством современных браузеров. В настоящих условиях вы можете использовать только этот формат, если нет альтернатив.
- .ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
- .eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.
Для установки шрифта используется конструкция @font-face
. Она позволяет подключить шрифт в различных расширениях, определить имя и путь к файлу. На примере шрифта Roboto воспользуемся такой конструкцией.
Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.
project/
├── css/
│ └── style.css
├── fonts/
│ │── Roboto-Regular.ttf
│ │── Roboto-Bold.ttf
│ └── Roboto-Light.ttf
Хорошим тоном является указание @font-face
в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face
:
font-family
— Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.src
— Путь к файлу со шрифтом.
После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.
@font-face {
font-family: 'Roboto Regular';
src: url('../fonts/Roboto-Regular.ttf');
}
body {
font-family: 'Roboto Regular', sans-serif;
}
Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:
@font-face {
font-family: 'Roboto Regular';
src: url('../fonts/Roboto-Regular.ttf');
}
@font-face {
font-family: 'Roboto Bold';
src: url('../fonts/Roboto-Bold.ttf');
}
@font-face {
font-family: 'Roboto Light';
src: url('../fonts/Roboto-Light.ttf');
}
body {
font-family: 'Roboto Regular', sans-serif;
}
h2 {
font-family: 'Roboto Bold', sans-serif;
}
h3 {
font-family: 'Roboto Light', sans-serif;
}
Способ хоть и рабочий, но немного сложный. Вместо одного названия шрифта и управления его насыщенностью свойством font-weight
приходится указывать три разных названия для каждого начертания в отдельности.
@font-face
позволяет указывать насыщенность шрифта с помощью font-weight
. Это позволит подключить все начертания с использованием всего одного имени. В остальном запись не будет отличаться от того, что было в прошлом примере.
@font-face {
font-weight: 400; /* Соответствует значению normal */
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.ttf');
}
@font-face {
font-weight: 700; /* Соответствует значению bold */
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.ttf');
}
@font-face {
font-weight: 300;
font-family: 'Roboto';
src: url('../fonts/Roboto-Light.ttf');
}
body {
font-family: 'Roboto', sans-serif;
}
h2 {
font-weight: bold;
}
h3 {
font-weight: 300;
}
Стиль шрифта
Помимо обычного начертания, CSS позволяет задать и другой вариант отображения шрифта — курсивный. Для этого используется свойство font-style
, которое может принимать одно из трёх значений:
normal
— стандартное значение. Соответствует нормальному стилю отображению шрифта. Именно такой стиль вы читаете прямо сейчас.italic
— курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.oblique
— тоже курсивное начертание. Зачастую оно не отличается от значенияitalic
.
Но почему существует два похожих значения для курсива? На самом деле они не очень похожие. Курсив, который задаётся значением italic
, является самостоятельным шрифтом, для которого есть отдельный файл в системе или на сервере. Он относится больше к рукописному тексту, тогда как oblique
искусственно наклоняет символы текущего шрифта.
.italic {
font-style: italic;
}
Строчные символы
С помощью CSS можно задать такой вид строчных символов как «Капитель».
Капитель — вид строчных букв, размер которых совпадает (или приближен) к размеру заглавных букв. Такой приём используется в дизайне в виде стилистического оформления. Посмотрите на этот параграф:
Текст с использованием капители
По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.
Капитель устанавливается с помощью свойства font-variant
. У него возможны два значения:
normal
— стандартная стилистика строчных символов.small-caps
— капитель.
p {
font-variant: small-caps;
}
Межстрочный интервал
Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.
Для указания межстрочного интервала используется свойство line-height
. Оно может принимать значения с различными единицами измерениями. Чаще всего используют число, указывающее, во сколько раз интервал больше размера шрифта.
p {
font-size: 16px;
line-height: 1.5;
}
Обобщённое правило
Теперь, для работы со шрифтами, вы знаете все основные правила. Это:
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font
. Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size
и font-family
. Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font
:
p {
font: italic small-caps bold 16px/24px Roboto, sans-serif;
}
Важно обратить внимание на запись 16px/24px. Внутри правила font
так обозначаются свойства font-size
и line-height
.
Использование одного правила или нескольких
Этот раздел относится не только к правилу font
, но и ко всем обобщённым правилам, которые вы изучите в процессе прохождения курсов. С одной стороны кажется, что использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:
- Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило.
- Обобщённые свойства перебивают отдельные. Если в коде вы указали
font-variant: small-caps;
, а потом для этого же элемента применилиfont: 16px/24px sans-serif;
, то капитель будет сброшена в значение по умолчанию.
Используйте обобщённые свойства только один раз при задании стандартных стилей. Например, свойство font
отлично подойдёт для селектора body
, а модификации текста будут производиться одиночными свойствами.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Какие шрифты лучше использовать для оформления сложных данных — Дизайн на vc.ru
Перевод материала типографа Джонатана Хофлера о том, как делать презентации, аннотации, отчёты и другие официальные документы понятными и приятными для чтения.
{«id»:37767,»url»:»https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh»,»title»:»\u041a\u0430\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh&title=\u041a\u0430\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh&text=\u041a\u0430\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh&text=\u041a\u0430\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041a\u0430\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445&body=https:\/\/vc.ru\/design\/37767-kakie-shrifty-luchshe-ispolzovat-dlya-oformleniya-slozhnyh-dannyh»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}
32 388 просмотров
Товарная выкладка, упаковки, финансовые отчёты и приложения представляют читателям огромное множество данных. Ниже несколько способов быстро разделаться с длинными списками, крошечными примечаниями и множеством колонок с числами.
Дизайнеры по шрифту работают с очень разной клиентской базой, однако в наших разговорах всегда возникают общие темы. Похоже, в мире возник тренд на сложную типографику, и дизайнеры повсеместно сталкиваются со трудностями, особенно если их задача — представить читателю разнообразные, но одинаково конкурирующие за его внимание данные.
Мы работаем с агентством, которое разрабатывает образ для быстро развивающегося бренда потребительских товаров. А ещё со штатным художественным отделом, создающим сайт с отзывчивым дизайном для представления на нём сложной финансовой отчётности. И с графическим дизайнером-фрилансером, работающим над образом для местной кофейни и открывающим для себя плюсы и минусы цифрового меню.
И неверно подобранный шрифт может загнать любого дизайнера в тупик, а правильный, наоборот, может сильно помочь. Ниже мы расскажем о некоторых вещах, которые приходится учитывать нашим клиентам, когда они сталкиваются со сложной типографикой, и о некоторых типографических стратегиях, которые быстрее всего приведут к успеху.
Стратегии для маленьких шрифтов
Часто информация может быть представлена в виде данных и примечаний. Веб-форма должна быть представлена так, чтобы поле ввода отличалось от подписи для поля ввода, в графике должны быть не только метки для осей X и Y, но и, что более важно, верифицируемая ссылка на источник данных.
Наиболее простой и очевидный способ установить такую иерархию — через размер шрифта, используя ощутимо более мелкий шрифт, чтобы отделить содержание текста от примечаний.
Но если размер шрифта сделать меньше, чем у основного текста, то даже самый разборчивый шрифт будет сложно читать, расстояние между буквами будет слишком маленьким, внутрибуквенный просвет — слишком узким, а высота строчных литер — ничтожной. Сравните маленькие шрифты в этих двух примерах.
К счастью, шрифты были специально адаптированны под веб-страницы и хорошо показывают себя на любом устройстве. Семейство шрифтов ScreenSmart создано для того, чтобы восполнить недостатки небольшого размера.
Выше представлены два типа верстки, где используется семейство шрифтов Whitney, и справа для примечания мелким шрифтом под графиком использован Whitney ScreenSmart. Шрифты ScreenSmart всегда дают большую чёткость, их комфортнее читать, а значит, они отлично подойдут для мелкого написания.
Работаем со списками
Мелкий шрифт — проклятие типографики, и дело не только в его размере, но и в большом объёме информации. Пояснения, заявления об ограничении ответственности и списки ингредиентов чаще всего игнорируются читателями, однако их можно отнести к наиболее строго регламентируемым частям любого типографического объекта, а следовательно, это контент, который тщательно просматривается.
Поднимите руки те, кто когда-нибудь получал запрос от юридического отдела внести ещё несколько предложений в текст после того, как дизайн уже был одобрен. Поднимите руки, если это была не просьба.
Первое, что приходит в голову не-дизайнеру — взять шрифт, суженный по принципу: чем уже буквы, тем меньше пространства они займут. Однако почти всегда лучше пойти против интуиции и выбрать более широкий тип шрифта, а затем установить меньший для него размер с более близким расположением букв друг к другу.
У более широких букв более комфортные пропорции, они расположены с большим интервалом друг от друга и с достаточными внутрибуквенными просветами, и всё это делает их удобочитаемым вариантом.
Выше представлены два списка ингредиентов в шрифте Gotham: слева допустимый Gotham Condensed, а справа гораздо более привлекательный Gotham Narrow. Совет: для максимальной разборчивости шрифта следует использовать широкий шрифт не только в основном тексте, но и в дополнительном шрифте ScreenSmart.
Работа с комплектом знаков
Незаметные примечания — это шанс для дизайнера проявить свою креативность, а также повод попробовать более яркие символы из комплекта знаков. Указатели сносок, начиная со звёздочки и крестика, иногда становятся приятным дополнением к сухому содержанию самой сноски. Но если в документе более трёх сносок, лучше их не использовать.
С такими символами, как *, † и ‡ пользователи еще разберутся, а вот с их повторением вроде **, †† и ‡‡ — или §, || и # в зависимости от того, к чему вы привыкли в своей компании, будет уже сложнее. Если в тексте больше трёх сносок, лучше придерживайтесь всем понятного нумерованного списка в верхнем индексе.
Супериндексы включены в каждый шрифт H&Co, у которого есть версия Pro, а также они есть в Gotham, Ringside и Inkwell. Совет: в тексте отмечайте сноски с помощью супериндексов, которые возвышаются над прописными буквами. Но в самих сносках лучше пользоваться числителем, потому что он расположен ниже. Так связь нумерации с текстом сноски лучше видна, и пункты сносок чётче визуально отделены друг от друга.
Цифры, цифры, цифры
В тех же наборах Pro кроме супериндексов и числителей есть табличные или моноширинные цифры, это самая важная цифровая часть любого шрифта. В отличие от традиционно пропорциональных символов любого шрифта, чья ширина варьируется в зависимости от естественной формы каждого числа — 1 — всегда узкая, а 0 — довольно широкий — табличные цифры имеют одинаковую ширину, так что ширина колонок, в которых они находятся, всегда совпадает.
У табличных цифр есть и вторая важная характеристика: их ширина не изменяется в зависимости от насыщенности шрифта. В обычном шрифте всё устроено не так: там чем больше насыщенность, тем шире символы.
Это одна из главных характеристик табличных цифр, известная как «duplexing», потому что она позволяет дизайнерам выделять отдельные строки жирным шрифтом, не нарушая при этом ширину колонки.
Совет: само слово «табличные» может подразумевать сложные таблицы в приложениях к годовым отчётам и раскрытию финансовой информации, но не забудьте, что часто огромное количество цифр появляется и в других контекстах.
Табличные цифры важны, например, для меню, каталогов, справочников и вообще для всего, где есть цены, статистика, номера счетов, баллы или любые другие данные, динамически изменяемые в онлайне.
Любой цифровой опыт с изменяемыми цифрами, например, цены на акции, спортивные баллы, номенклатурный код товаров, курс обмена валют, номера рейсов, расписания, требует использования табличных цифр. Так что лучше работать с табличными цифрами с самого начала проекта.
Креативный выбор
Продвинутые цифровые символы, как и табличные цифры и супериндексы, не являются прерогативой часто используемых семейств шрифтов, и вообще не в каждом проекте требуются рациональные serif или sans.
Когда сложность самого проекта требует надёжный шрифт, а тема проекта подразумевает индивидуальный подход, лучше поискать неочевидные шрифты, в которых есть дополнительные цифровые возможности.
Например, у рукописного Inkwell есть всё необходимое для того, чтобы передать тонкости контента, при этом он смотрится менее строго, а значит, больше подходит для таких областей, как развлечения, розничная торговля, общественное питание, искусства, педиатрическая помощь и даже филантропия.
Совет: если вы планируете в таблицах использовать символы одной насыщенности, следует обратить внимание на такие шрифты, у которых цифры имеют одинаковую ширину, и где они не дублируются по насыщенности (обычный — жирный).
В нашей коллекции Numbers есть шрифты Indicia, Claimcheck, Revenue и Greenback, в которых цифры имеют одну ширину, то же самое с интересными цифрами в любой насыщенности в шрифте Inkwell Blackletter.
Индивидуальные рекламно-информационные материалы бренда
Последний вклад в визуальную коммуникацию обычно делается не дизайнерами, а программным обеспечением. Часто это текстовые редакторы, электронные таблицы и программы для создания презентаций, которые должны бы говорить от организации, но им не хватает инструментов, чтобы делать это как следует. Для таких проектов мы создали Office Fonts.
Шрифты Office — это адаптация часто используемых шрифтов от H&Co, специально созданная для использования их в таких бизнес-решениях, как Word, Excel и PowerPoint. Это те же самые семейства шрифтов, чьи ScreenSmart версии хорошо использовать для мелкого текста и чьи профессиональные комплекты знаков подходят даже для самых сложных данных.
Мы переосмыслили набор шрифтов Office для использования их не-дизайнерами и ограничили каждую входящую в него семью шрифтов всего четырьмя начертаниями (прямое, наклонное, жирное и жирное наклонное). Кроме того, в этом наборе только табличные цифры, чтобы избежать типографических сбоев, которые могли бы остаться незамеченными.
А ещё эти шрифты выгружаются в формат TrueType для максимальной совместимости даже с самыми старыми операционными системами.
Совет: если коммуникации бренда в конечном счёте будут происходить через отчёты, предложения, положения и презентации, лучше эти документы с самого начала разрабатывать с помощью шрифтов Office, чтобы воспользоваться преимуществами их уникальных характеристик.
Блог об аналитике, визуализации данных, data science и BI: шрифты
Данная статья — перевод оригинала: «Choosing Fonts for Your Data Visualization»
Цель визуализации данных — сделать макет, который быстро передаст большое количество информации. Хорошая визуализация помогает пользователю понять сложные данные. Любой текст, сопровождающий график, должен читаться настолько легко, будто он отсутствует совсем.
В этой статье я расскажу, как выбрать читаемый и эстетичный шрифт для вашего проекта. Я сосредоточусь прежде всего на небольшом тексте, предназначенном для пояснения графика, включая метки, сноски и источники. Чтобы угодить более широкой аудитории, я буду рекомендовать только бесплатные шрифты Google, хотя есть и множество хороших платных вариантов.
Хорошо читаемые шрифты
Хорошо читаемые шрифты требуют меньше напряжения для понимания. Визуализации с читаемыми шрифтами имеют постоянный ритм и выглядят как единое целое. Хорошая типографика не является показной — она объясняет содержание, не мешая работе пользователя.
Чтобы понять, что это за тип «хорошо читаемых» шрифтов, давайте рассмотрим несколько ключевых элементов.
X-высота
X-высота — это высота строчных букв. Так как строчные буквы иногда имеют разную высоту, этот параметр измеряется с помощью буквы «х».
Х-высота напрямую влияет на то, насколько шрифт читаем при небольших размерах. Взгляните на изображение выше. Все эти шрифты имеют размер в 10 пунктов. Какой шрифт вы считаете наиболее читабельным? Gill Sans и Athelas имеют меньшую Х-высоту, что затрудняет чтение текста. Open Sans, Noto Sans и Lato имеют большую Х-высоту, что обеспечивает удобство чтения при небольших размерах. При выборе шрифта для визуализации данных выберите шрифт с большой Х-высотой.
Обратите внимание: у Lato хорошая высота по оси Х, но укорочена длина линии.
Если ваша визуализация имеет ось Х с ограниченным пространством, вы можете рассмотреть более сжатую гарнитуру, как, например, Lato.
Апертура
Апертура — это пустая область в буквах, как «р» и «о».
Форма апертуры напрямую влияет на читаемость при небольших размерах. Глаза должны легко идти по буквам, человек не должен тратить время на выяснение, буква «о» это или «е». Шрифты с искаженной апертурой плохо отображаются при небольших размерах, поэтому следует избегать причудливых шрифтов вроде Marker Felt. Обратите внимание, как трудно читать плотные шрифты, такие как League Gothic и Futura Condensed при небольших размерах: это связано с тем, что при сжатии шрифта апертура удлиняется. При выборе шрифта для визуализации данных используйте шрифт со стабильной открытой апертурой.
Засечки
Засечки — это маленькие галочки вокруг буквы.
При маркировке данных часто избегают засечек, потому что дополнительные элементы иногда запутывают представление о форме буквы. Первые три строки выше — шрифты с засечками. Сравните их с двумя последними без засечек: в этом примере слова без засечек легче расшифровать. И хотя некоторые шрифты с засечками можно использовать при меньших размерах, если вы не уверены, выберите что-нибудь без засечек.
Использование чисел
Числа гарнитуры бывают либо пропорциональными, либо табличными.
Пропорциональные числа выглядят хорошо при использовании в тексте. Табличные числа предназначены для работы с данными и занимают одинаковое количество ширины на символ. Если вы выстроите цифры в линию, увидите, что они попадают в одинаково расположенные столбцы. Табличные числа легче читать в визуализациях.
Open Sans — табличный шрифт, центрирующий числа в пространстве столбца. А Lato, например, немного смещает число в таком пространстве. Почему это важно?
Потому что это маленькое пространство требует от вашего мозга работы для осознания того, что это непрерывная цепочка цифр. Мы можем исключить эту работу, выбрав гарнитуру с табличными числами или даже с пробелами.
Посмотрите на старомодные числа. Raleway — красивый шрифт, который обычно используется для текстов и логотипов, однако он плохо работает для маркировки и визуализации данных. Это потому, что он использует старомодные числа вместо ровных чисел, идущих в одну линию. Взгляните, как 3, 5 и 4 опускаются ниже базовой линии. Такие числа трудно воспринимать не только в визуализации, но и в обычном тексте.
Системы типографского дизайна
Системы типографского дизайна представляют собой набор из размеров шрифта, веса и высоты строк, которые будут использоваться в макете. Системы помогают обеспечить визуальную согласованность проекта. Ниже представлено пять систем, которые можно опробовать в своем дизайне. Все они используют бесплатные шрифты Google с открытым исходным кодом.
Система 1: один шрифт / один размер
Такая система использует одну гарнитуру с одним заданным размером, что приводит к универсальной визуальной текстуре. Такой тонкий подход хорош для дашбордов или для добавления графиков в бизнес-отчёт. Важная информация может быть отмечена при использовании более тяжелого веса шрифта или оттенков серого.
Пример из жизни: примером этой техники является панель инструментов Google Trends. Этот дашборд использует шрифт Roboto как для заголовка, так и для надписей. Панель инструментов разделяет контент с помощью макета на основе карты. Эта карта использует одну гарнитуру и один размер шрифта по всей композиции.
В следующей таблице используется техника «Один шрифт / один размер» с Lato в 14 пунктов и высотой строки в 18 пунктов:
Используемый шрифт: Lato — хороший шрифт для визуализации данных, потому что хорошо читается при небольших размерах. Шрифт имеет чистую апертуру, умеренную X-высоту и узкий, но неискаженный интервал между буквами. Для чисел он использует табличные значения, они равномерно распределены для удобства чтения. Жирный шрифт легко отличается от обычного, однако полужирный не имеет достаточных отличий от обычного или жирного, так что его следует избегать. Lato был выпущен в Google Fonts в 2015 году и в настоящее время является третьим по популярности шрифтом на их сайте.
Система 2: Один шрифт / большой заголовок
Типографская система «один шрифт / большой заголовок» использует один шрифт с заголовком, который больше и жирнее прочего контента. Больший заголовок выделяется и позволяет пользователю быстро понять, о чём идёт речь.
В визуализации The Washington Post использован шрифт ITC Franklin Pro
Пример из жизни: The Washington Post использует такую систему в приведённой ниже визуализации. Дизайнер сохраняет семейство и размер шрифта в соответствии с тем, чтобы навигация ощущалась как часть макета.
Ниже приведён пример использования такой системы. В нём используется шрифт Assistant размером в 24 пункта для заголовка и в 14 пунктов для прочего содержимого.
Используемый шрифт: Assistant — чёткий современный шрифт, который хорошо работает в дизайне благодаря простому, открытому эстетичному размеру букв. Числа хорошо сбалансированы и не имеют пробелов. Assistant — семейство шрифтов с открытым исходным кодом, основанное на Source Sans Pro. Проект открыт для сотрудничество и принимает участие в репозитории GitHub.
Система 3. Два шрифта / тяжёлый & лёгкий
Такая система использует два шрифта без засечек с дополнительной X-высотой и межбуквенными интервалами. Заголовок имеет большой вес, содержание — лёгкий.
Пример из жизни: для визуализации данных Reuter в материале «The Rohingya Crisis: Life in the camps» используется комбинация тяжелых и легких шрифтов. Дизайнер использовал фирменную гарнитуру Reuter «Knowledge» для заголовка. Прочая информация использует Source Sans Pro, доступный в библиотеке Google Fonts. Обратите внимание, как «Negative for E. Coli» выделено серым цветом, чтобы привлечь внимание к первым трём показателям.
В следующей таблице используется эта система. Заголовки большие и полужирные, остальное содержимое имеет небольшой вес. Сочетание тяжелых и тонких шрифтов обеспечивает контрастное разделение, помогая пользователю определить важные разделы композиции.
Используемые шрифты: PT Sans Bold — сильный округлый шрифт с большой X-высотой. PT Sans и PT Serif были разработаны для русского алфавита как всеобъемлющий шрифт для поощрения печати и чтения на национальной языке. В дополнение к кириллице, PT Sans поддерживает латиницу, греческий, арабский и другие формы. Семейство также включает стиль PT Sans Caption, который был разработан специально для мелкого шрифта и хорошо подходит для длинных заметок или разделов источников.
Содержимое в примере использует шрифт Noto Sans: это чистый шрифт со слегка сжатым межбуквенным интервалом, что компенсируется чёткой круглой апертурой и большой X-высотой. Табличные числа включают в себя прочное число «1» с широкой ножкой, придающую структуре чисел чёткий вид. Noto Sans является частью большого семейства шрифтов Noto. В группе более 100 различных шрифтов с целью обеспечения «визуальной гармонии» на нескольких языках. Это делает Noto Sans особенно хорошим вариантом для многоязычных визуализаций.
Система 4: Один с засечками / один без засечек.
Такая система использует два шрифта, один из которых с засечками, а другой — без.
Пример из жизни: ниже приведён скриншот статьи New York Times «Coronavirus in US». Название использует шрифт NYT Cheltenham, а метки данных — NYT Franklin, оба шрифта созданы специально для New York Times. Метки имеют два компонента: заметное название штата и менее заметное число. Использование этих двух стилей создает шаблон, который помогает зрителю быстро декодировать информацию. Что бросается в глаза? Название штата или номер?
В следующем примере такой системы используется шрифт Merriweather в 22 пункта с высотой строки в 26 пунктов для заголовка. Source Sans Pro используется для остального контента.
Используемые шрифты: Merriweather — слегка округлый шрифт с толстым и тонким штрихом средней контрастности, что делает его подходящим для заголовков, но не для мелкого текста. Вес шрифта, использованный выше, самый тяжелый. Source Sans Pro используется для содержания. Он был разработан специально для пользовательских интерфейсов.
Серая шкала текста может использоваться для создания шаблонов (как в приведённом выше фрагменте NYT), для снижения визуальной значимости элемента (как это было во фрагменте Reuter) или для выцветания больших фрагментов менее заметной информации, таких как источники или раздел заметок.
Система 5: С засечками для чтения / Без засечек для маркировки
В такой системе заголовок, подзаголовок и прочая информация имеет шрифт с засечками. Эта идея основана на давней дискуссии в теории дизайна о том, что шрифты с засечками для длинных отрывков текста, возможно, позволяют быстрее усваивать информацию. Для максимальной читабельности оставьте длину строки не более 60 символов.
Пример из жизни: New York Times особенно хорошо смешивает шрифт NYT Cheltenham с засечками для чтения и шрифт NYT Franklin без засечек для марикровки данных. Несмотря на то, что это два совершенно разных шрифта, они работаю вместе, потому что буквы имеют дополнительную апертуру, большую X-высоту и одинаковую ширину штриха при соответствующих весах.
На следующем графике отображена такая система с использованием шрифта Lora для заголовка и подзаголовка и шрифта Libre Franklin для содержимого маркировки.
Используемые шрифты: Lora — шрифт Google, оптимизированный для экрана, но также хорошо подходящий и для печатных проектов. Текст диаграммы — Libre Franklin, это шрифт на основе Franklin. Он относится к группе шрифтов, вдохновленных оригинальным шрифтом Franklin Gothic, созданным примерно в 1910 году.
Указанные в тексте шрифты и системы являются взаимозаменяемыми. Ниже приведён список упомянутых гарнитур:
- Lato
- Assistant
- Noto Sans
- Source Sans Pro
- Libre Franklin
Это шрифты, подходящие для заголовков:
- PT Sans
- Merriweather
- Lora
Хороший выбор шрифтов для системы начинается с понимания того, как элементы форм букв обеспечивают высокую читаемость. Я надеюсь, что этот подход поможет вам найти свою систему дизайна шрифтов. Какие ваши любимые шрифты для визуализации данных? Дайте мне знать ниже и спасибо за чтение!
Как шрифт влияет на конверсию? Типографика в UX дизайне
Типограф, автор образовательных проектов по типографике Мэттью Баттерик определяет типографику, как визуальную составляющую напечатанного текста. Хорошая, емкая формулировка с большим пространством для маневра. Именно из-за этого под термином часто понимают достаточно разные вещи.
То, что относится к UX, большей частью касается макротипографики — расположения текста на странице. Микротипографика — это тонкая настройка, работа на уровне символов.
Важна ли типографика пользователям и бизнесу? Конечно. Есть исследования, которые объясняют, как параметры шрифта приносят существенные конверсии, как управлять эмоциями пользователя и дают понять, что несоблюдение достаточного контраста в вебе будет дорого стоить. Подобные вещи действительно влияют на восприятие. Ключевой момент, с которым нужно разобраться, — как люди читают.
Как люди читают
Классические книги, статьи, в основном не останавливаются на физиологии. Чаще речь о диаграмме Гутенберга и различных паттернах чтения.
Диаграмма Гутенберга рассказывает о том, что при большом объеме контакт с текстом начинается с левого верхнего угла и ослабевает по определенным законам. На основе этих данных строятся известные паттерны чтения: z-паттерн, f-паттерн… Это здорово, этим можно пользоваться, но ответа на вопрос, почему так происходит, — здесь нет.
Немецкий типограф Ян Чихольд еще в 1928 году пришел к выводу, что современный человек не хочет читать объемные тексты. «Сканирует» полотно, находит что-то полезное и только тогда останавливается и начинает читать. Вряд ли Чихольд интересовался исследованиями по физиологии, но, тем не менее, понимал, как все происходит.
А происходит следующее: на сетчатке глаза есть маленькая впадина, которая отвечает за распознавание предметов. Она очень маленькая. То есть каждый момент времени четко мы видим очень маленький фрагмент картинки — всего пару градусов обзора. Вся остальная картинка размыта. Но мозг картинку дорисовывает и кажется, что четко видим мы гораздо больше. Очень продуманное инженерное решение.
Чтобы «обновлять» картинку глаз постоянно совершает микродвижения, которые ученые называют саккадами (в переводе с французского — «хлопок паруса»). Взгляд идет, останавливается в одной точке — фиксация, передвигается к следующей. За счет этого картинка постоянно поддерживается в актуальном состоянии.
Поэтому важно, чтобы глаз успешно распознавал формы букв. Отсюда и правило: ряд из прописных плохо различается, потому что он монотонен. В случае со строчными, за счет выносных элементов глазу легче понять, что за слово перед нами находится. Эксперименты показывают, что достаточно и верхней части букв — если убрать нижнюю половину, человек все равно сможет прочитать текст, разве что понадобиться чуть больше времени.
Еще важно понимать, что сам по себе процесс чтения — сложный. Приходится постоянно концентрировать силу воли. Ученые сходятся на том, что префронтальная кора мозга, которая отвечает за концентрацию, быстро утомляется. Если заставлять человека слишком сильно напрягаться в тексте, то ему скоро станет неинтересно, он переключится на другое занятие. Отсюда правила про длину строки, межстрочное расстояние, трекинг в прописных — для того, чтобы префронтальная кора не уставала сверх того, что требует концентрация на тексте.
После Чихольда, на 80 лет позже, известный специалист в области юзабилити Якоб Нильсен сказал примерно то же: «Люди не читают, они сканируют». Но пришел он к этому выводу с других позиций.
Нильсен проводил исследование. Давали людям разного размера тексты и замеряли разными способами, сколько на самом деле люди читают. По результатам даже удалось построить график и вывести формулу. Выяснилось, что примерно 20% текста люди читают, остальные 80% — сканируют.
Что с этим делать?
Писать короткие тексты? Нет. Сотрудники SEO форума решили выяснить, как часто пользователи делятся ссылками на их страницы. Обнаружили, что достаточное количество людей любит большие тексты. Важно учитывать эту часть аудитории и сделать так, чтобы процесс чтения был легким и комфортным.
Хорошая цель. Для этого нужно задать проекту правильный процесс — выбрать хороший шрифт, определить иерархию текстовых элементов на странице, поработать над их расположением, отполировать решения микротипографскими штучками.
Как оценить шрифт?
По шести основным параметрам:
- Legibility — разборчивость шрифта. Буквенные просветы, пропорции и расстояние между буквами и т.д.
- Readability — читаемость. Текст может быть оценен, как удобочитаемый не только с точки зрения формы, но и исходя из контента. На сайте Amazon, когда он еще был книжным магазином, в каждой книжке содержалась небольшая сноска — аннотация, которая учитывала удобочитаемость по ряду тестов. Тесты — сложные математические формулы, в которых считается количество слов и предложений на странице, количество слов в предложении и т.д.
- Flexibility — гибкость, насколько шрифт хорошо работает в разных размерах. Многие шрифты создавались под определенные размеры. Хороши в 12–14 пунктах, но плохо работают в мелких или больших кеглях.
- Amphibiousness — оптимизация. Насколько шрифты будут оптимизированы под экран, насколько хорошо они масштабируются.
- Classiness — стиль.
- Showmanship — эффектность.
Не обойтись и без правил:
- Выбирать шрифты, которые соответствуют привычным формам букв. Что же это такое? 400 лет книгопечатания говорят о том, что шрифты с засечками более привычны. С другой стороны, шрифты, которые используются в операционных системах, тоже становятся привычными из-за плотности контактов с ними. Arial, Times New Roman, как бы от них не воротили нос дизайнеры, годятся для хорошо читаемого результата.
- Отдавать предпочтение шрифтам, у которых открытые формы букв, апертура. Чем шире внутрибуквенные просветы — тем лучше считывается форма.
- Выбирать шрифты с большой высотой букв. Когда с параметрами покончено, хорошо бы сделать «набросок». Сервисов для этого полно.
- При подборе шрифта нужно поработать с разными вариантами иерархии. Действовать итерационно, не менять много параметров одним махом.
- Читерский совет: работайте с суперсеймействами. Это такие специальные гарнитуры, где на каждый случай найдется герой. На суперсемейсвах традиционно специализируется словолитня FontFont. Взять, например, шрифт Tisa — содержит варианты засечками или без, по 14 весов в каждом. Можно создать практически любую шрифтовую композицию.
- При работе с латиницей поможет тест Джессики Хиш на разборчивость букв: нужно сопоставить символы I (прописная i), l (строчная l) и 1.
- И об эстетике. Иногда нужно выбирать «шрифты с настроением». Штука субъективная, но существует одно неплохое упражнение, которое облегчит задачу. Хотите «сделать настроение» на странице и у вас есть подходящий шрифт? Представьте его с противоположным характером. Не получается придумать — значит, шрифт нейтральный.
С засечками или без засечек — вот в чем вопрос
Да, шрифты с засечками привычны. Но.
Интересный эксперимент провела компания «Psychophysics of Readings». Замерили показатели скорости чтения и понимания текста. Позже опросили пользователей — как они сами воспринимают эти показатели, после чтения фрагментов текста со шрифтами с засечками и без? Люди говорили, что с засечками нравится больше, читается быстрее, понимается отлично. Хотя результаты исследования показали, что шрифты без засечек дают лучший результат. Так что, это всего лишь иллюзия.
Пару лет назад Smashing Magazine провели исследование на ту же тему. Решили проверить те сайты, куда люди действительно приходят почитать — новостные порталы, блоги. Отобрали 50 самых популярных.
Оказалось, шрифты с засечками побеждают в основном шрифте, при этом чуть-чуть отстают в заголовках. А в целом, до сих пор достаточно уверенно себя чувствуют в интернете.
О доверии и глобальной катастрофе
На страницах New York Times вышел интересный текст. Вкратце: если с Землей столкнется астероид, то умрет много людей, но это не так страшно, потому что астероиды с нашей планетой сталкиваются редко, последний пролетал пару тысяч лет назад, в запасе еще 250 тысяч лет. После прочтения предлагалось ответить, согласны ли вы с этим утверждением, насколько оно уверено звучит.
Ребята, которые проводили эксперимент, использовали разные шрифты. Из этой пятерки: Georgia, Helvetica, Trebuchet MS, Comic Sans, Baskerville. Неожиданно наидостойнейшим доверия оказался Baskerville. Правда, победил с небольшим отрывом.
Это говорит о том, что люди все же обращают внимание на характеристики шрифта.
Ребята из желтой прессы знают толк
Интересный тест провели немецкие исследователи из университета им. Гумбольдта. Показывали испытуемым слова в разных размерах с негативной, нейтральной, позитивной оценкой и замеряли активность мозга.
И вот, что получилось: когда шрифт маленький — эмоционального вовлечения нет, но чем больше становится шрифт, тем оно больше и держится дольше. Раньше считалось, что подобная реакция касается только физических объектов: чем больше хищник, тем страшнее. Оказывается, на символьном уровне тоже работает.
Ребята из желтой прессы знают, что делают.
Маленький шрифт — большие проблемы
К компании, которая предоставляет услуги по консультированию в сфере UX, Click Laboratory, обратились Numara Software с просьбой улучшить конверсию на сайте.
Ребята просто увеличили шрифт на странице, но увеличили радикально — с 10 пунктов до 13. После этого количество страниц за визит увеличилось на 24%, а конверсии поднялись на 133%.
В другом тесте сравнивали размер ссылок на сайте Who accepts amex. Размер контрольных линков — 14 пикселей. Консультативная компания предложила провести несколько А/В тестов — значение от 12 до 18 с шагом в 1 пиксель. Оказалось, что ссылки размером в 18 пикселей лучше работают — кликов на 32% больше. Но самое интересное, что комбинация в 17 пикселей, всего на один пиксель меньше победившей, показала на 16% меньше кликов, чем контрольная.
Существует гипотеза, что важен не столько размер, сколько еще и пропорции в которых шрифт работает.
80 миллионов долларов за 41 оттенок синего
Кевин Ларсон, психолог по чтению в Microsoft, много внимания уделяет контрасту шрифта. Мы, дизайнеры, работаем с классными мониторами, у пользователя может быть другая история. Часть текстов может быть вообще незаметна или хуже читаться.
Bing специально тестировали 41 оттенок синего. Менеджер проекта сказал, что в итоге это им принесло 80 млн долларов годового дохода.
Когда работаете с текстом проверяйте, насколько он контрастен к вашему фону.
Твоя типографика заставляет людей плакать
Еще один эксперимент Кевина Ларсона. Людей просили читать два фрагмента текста — «Bad design» и «Good design», и проверяли, насколько люди быстро читают, насколько понимают, о чем написано. Потом опрашивали — нравится или нет?
Результаты удивительные: скорость чтения примерно одинаковая, предпочтений к какому-то из фрагментов испытуемые тоже не выявили.
После провели ряд тестов, чтобы оценить внутреннее психологическое состояние людей, после эксперимента. Оказывается, люди, которые читали «плохой» текст чувствовали себя хуже, а те, что читали «хороший» текст, чувствовали себя лучше.
Такое могло произойти еще и потому, что читающим плохо оформленный текст людям приходилось чаще хмуриться. В мозге есть область, что связывает лицевые мышцы с эмоциями, которые мы испытываем. Будем ходить и хмуриться — почувствуем себя хуже, и наоборот.
Так что, плохая типографика действительно делает ваших читателей несчастными.
Изменение шрифтов в презентации — Служба поддержки Office
Изменение шрифта на одном слайде
-
Выполните одно из указанных ниже действий.
-
Чтобы изменить шрифт одного абзаца или выражения, выделите текст, который нужно изменить.
-
Чтобы изменить шрифт всего текста в заполнителе, выделите весь текст или щелкните сам заполнитель.
-
-
На вкладке Главная в группе Шрифт выберите шрифт в поле Шрифт.
Изменение шрифтов во всей презентации
(Эта функция недоступна для PowerPoint в Интернете.)
-
На вкладке Вид в группе Режимы образцов выберите пункт Образец слайдов.
-
На левой панели, содержащей образцы слайдов и макеты, выберите эскиз образца слайдов или макет, содержащий шрифт, который вы хотите изменить.
-
В образце слайдов или макете щелкните текст заголовка или уровень основного текста, к которому нужно применить новое начертание шрифта.
-
На вкладке Образец слайдов в группе Фон щелкните Шрифты, а затем выберите шрифт из списка.
Повторите действия с 1 по 4 для других шрифтов, которые нужно изменить. Чтобы вернуться к изменению слайдов, на вкладке Образец слайдов в группе Закрыть выберите Закрыть режим образца.
Для изменения шрифта во всей презентации можно также использовать параметр «Заменить шрифт». Вот как это сделать:
-
На вкладке «Главная» в группе «Редактирование» выберите «Заменить», а затем выберите «Заменить шрифты».
-
В диалоговом окне «Замена шрифта» в поле «Заменить» выберите шрифт, который нужно заменить.
-
В поле На выберите шрифт, который вы хотите использовать, нажмите кнопку Заменить, а затем нажмите кнопку Закрыть.
Если вы используете один из них иизменили шрифт на этом слайде, новый шрифт будет затеняться во всей презентации.
Если используется несколько образцов слайдов (например, когда к презентации применено несколько шаблонов), необходимо изменить начертание шрифта в каждом образце слайдов.
См. также
Использование декоративных шрифтов сторонних разработчиков
Поиск и замена текста
Изменение шрифта колонтитулов слайда
Изменение шрифта
После выбора темы презентации на вкладке «Дизайн» можно изменить шрифт презентации в представлении «Главная слайды».
-
На вкладке Вид нажмите кнопку Образец слайдов.
-
На вкладке «Главная слайды» нажмите кнопку «Шрифты»и выберите нужный шрифт для темы.
Вы можете изменить шрифты презентации в любое время в представлении «Мастер слайдов».
Выполните любое из описанных ниже действий.
Изменение шрифта
Замена шрифта
-
В меню «Формат» выберите пункт «Заменить шрифты».
-
Во всплывающее меню «Заменить» выберите шрифт, который нужно заменить.
-
Во всплывающее меню «На» выберите новый шрифт и нажмите кнопку «Заменить».
больших шрифтов | FontSpace
Загрузить- Темный режим
- Помощь Войти
- Шрифты
- Стили
- Коллекции
- Генератор шрифтов
- (͡ ° ͜ʖ ͡ °)
- Дизайнеры
- Stuff
Связанные стили
Cool
Скрипт
Симпатичный
Рукописный ввод
Sans Serif
Serif
Bold
- Small
1 Fun
Ретро
Модерн
Логотип
Кисть
Декоративный
Дети
Плакат
Закругленный
Толстый
9000Дисплей
Fat
Heavy
Заголовок
Черный
Маркер
Коммерческое использование
Сортировать по
- Популярные
- В тренде
- Новейший
- Имя
Для личного пользования Бесплатно
4987 загрузок
Для личного пользования Бесплатно
1950 загрузок
Для личного пользования Бесплатно
1730 загрузок
Для личного пользования Бесплатно
275 загрузок
Для личного пользования Бесплатно
265 загрузок
Для личного пользования Бесплатно
441.7k загрузок
Для личного пользования Бесплатно
Курсив5929 загрузок
Для личного пользования Бесплатно
Regular197.6k загрузок
Personal Use Free
500 загрузок
Для личного пользования Бесплатно
360 загрузок
Для личного пользования Бесплатно
1090 загрузок
Для личного пользования Бесплатно
Обычный3144 загрузок
Для личного пользования Бесплатно
720 загрузок
Для личного пользования Бесплатно
120.7k загрузок
Для личного пользования Бесплатно
583 загрузок
От 1 до 15 из 146 Результаты
- 1
- 2
- 3
- 4
- Далее
Еще больше стилей
- Популярные шрифты
- Коммерческие шрифты
- Классные шрифты
- Курсивные шрифты
- Блог
- Справка
- Контакты
- Бренд
- Конфиденциальность
- Условия
- DMCA 9000pace4
- Карта сайта
- 1
26
Генератор шрифтов с большими текстовыми буквами (𝗛𝗜𝗧 𝗳𝗼𝗻𝘁)
Напишите свой текст БОЛЬШИМИ БУКВАМИ ! Вам понравится ▀█▀ █▬█ █ ▄█▀ генератор больших шрифтов ♡.Я также сделал еще один крутой генератор, который вы найдете здесь, известный как █▀█ █▄█ ▀█ nut и █▬█ █ ▀█▀ hit font .
Напишите текстовое сообщение, затем скопируйте и вставьте его крупным шрифтом. Сделайте большим текстом буквы и получайте удовольствие, удивляя людей!
Вам необходимо включить JavaScript для запуска генератора шрифтов большого текста.Большие буквы
Огромные буквы доступны для английских символов a-z, A-Z, цифр 0-9 и знаков пунктуации знаков .≦
Когда вы найдете копию моих больших текстовых генераторов в Интернете - их много, пожалуйста, знайте, что это настоящий оригинал, и мы действительно разработали все эти большие буквы с моими друзьями, включая ASCII Text Art Generator и шрифт 𝗧𝗲𝘅𝘁 копировать вставить. Гордый и злой!
Генератор крутых текстов
Сделайте свой текст волнистым с помощью генератора ᙡᗩᐯ Ꭹ, который превращает ваши буквы в специальные символы. Сделайте свои письма крутыми, расшифровав текстовые сообщения специальными текстовыми знаками и символами.Обогатите свой текст классными символами. Фантастические забавные буквы и символы с акцентом. Ḉσмє їη❣ Генератор символов, который меняет буквы в вашем тексте на похожие на восточнославянские языки. Заменяет символы e на ё и є, превращает символы r в символы я, N на И и так далее. Генератор текста Zalgo создает искаженный текст с ошибками и проклятиями, например ғ̶͈͓͉̥̘͙̃̈̓̌̒͝s̶̨̛̭͖͕͇̘͐͗̐̚͘ʏ̶̭͍̠͖̙̟͒̑͂̓̾̆ᴍ̶̨̹̤̫̰̲̎́̍̃͗̄ʙ̶̻͕͔̳͍̼͑͑̋̓̄̕ᴏ̶̬̹͈̙͓͙̆͒̓͗͌͝ʟ̶̡͎̦̫̩͎̅̽̅̏̍̽s̶̗̪͚̫̫̱̊̎̃̂̎͠Стиль текста
Украсьте свой текст несколькими строчками снизу, сверху и снизу.Подчеркивайте, зачеркивайте и подчеркивайте текст с помощью этого генератора шрифтов. Генератор маленьких заглавных букв превращает ваши строчные буквы в sᴍᴀʟʟ ᴄᴀᴘɪᴛᴀʟ ʟᴇᴛᴛᴇʀs. Строчные заглавные буквы выглядят как заглавные заглавные буквы, но при этом должны состоять из строчных букв. Другие ᵗⁱⁿʸ ₗₑₜₜₑᵣₛ также доступны. Генератор Aboqe - это инструмент, который может перевернуть ваш текст вверх ногами, используя специальные буквы, символы и символы. Поверните сообщения на 180 ° с помощью «boq». Для Facebook, Instagram и т. Д. Надуйте свои буквы и цифры и сделайте свой текст гладким ⓑⓤⓑⓑⓛⓔ с помощью этого текстового генератора пузырьков!Символы, текст, смайлики
▅▀▅─█▘─▀█▀ Моя коллекция изображений текстового искусства из символов (также называемая ASCII art).Пользователям Facebook и Instagram это нравится. Сделано, в основном, неизвестными мастерами. Введите символы по их кодам клавиатуры. Содержит информацию об альтернативных кодах Windows, кодах символов Linux и стандартных инструментах Mac для специальных символов. Поместите их в документы, в Facebook, Instagram, свой блог и т. Д. Коллекция классных компьютерных текстовых символов и знаков, которые вы можете использовать в Facebook и других местах. Все символы в одном месте. ❤ ♥ ❥ Мой большой рукотворный список из более чем сотни крутых персонажей. Поистине удивительно!ヅ ツ ッ Напишите о своих чувствах, используя смайлики и смайлики типа Ленни-Фейс со специальными текстовыми символами.Как сделать сочинение длиннее
Как сделать сочинение длиннее
Довольно сложно предъявить студентам требования к сочинениям - например, требование, чтобы у них было 500 слов, приводит к действительно, действительно, очень, чрезвычайно избыточным спискам прилагательных и описанию таких слов, как это предложение, для увеличения количества слов. Другие учителя используют количество страниц как показатель завершения. Но что произойдет, если у вас будет четыре с половиной страницы вашего пятистраничного эссе? Существует множество техник написания, чтобы конкретизировать идеи и сделать их длиннее, но я предполагаю, что ваше эссе само по себе безупречно, и вам нужен более технологичный ответ.Вот несколько техник, которые мне хорошо послужили. Я использую их все время.
Примечание. Это руководство предназначено для Microsoft Word как части Office 2007, хотя многие из тех же методов можно использовать в предыдущих или последующих версиях Word.
Во-первых, шрифт или размер шрифта - довольно простой способ сделать эссе длиннее. Некоторые учителя требуют использовать шрифт Times New Roman 12 кегля. Однако, когда они забывают добавить это в правила, вы можете изменить это на все, что захотите (при условии, что в программе нет общего заявления об этом).Вы хотите выбрать шрифт с максимальной высотой. Очевидно, вы не хотите выбирать шрифт, который слишком трудно читать, так как это может раздражать человека, оценивающего его. Ниже приведено изображение слова «Hello», напечатанного четыре раза, каждый размером 12. Шрифты слева направо: «Angsana New», «Calibri», «Times New Roman» и «Algerian».
Размер шрифта также может сильно повлиять на качество вашей бумаги. Использование шрифта 72 размера, несомненно, приведет к тому, что количество страниц в вашей бумаге превысит требуемое, но это не лучшая идея.Простое изменение размера шрифта с 12 на 13 может добавить к бумаге несколько строк. Ниже приведено изображение идентичного текста в двух столбцах, оба шрифтом Times New Roman, но размером 12 слева и размером 13 справа.
Даже если ваш учитель требует размер шрифта Times New Roman 12, у вас может возникнуть соблазн изменить его. Незначительные изменения довольно сложно измерить на распечатке, однако это возможно. Например, если учитель должен был распечатать слово «the» шрифтом Times New Roman кегль 12 на листе прозрачной бумаги, он мог бы затем провести его над словом «the» в вашем эссе и подтвердить, идентично ли оно.Вероятно, этого не произойдет, но на самом деле со мной такое случалось раньше.
Расстояние между строками очень сложно измерить, потому что, хотя в большинстве шрифтов верхний и нижний края значительно различаются. В некоторых шрифтах есть общий край, за исключением букв, которые висят над или под линией, но в шрифтах, которые больше похожи на рукописный текст, его нет. В любом случае, даже с общими границами, маловероятно, что ваш учитель выхватит линейку и измерит. Слишком большой пробел может вызвать подозрение, но изменение эссе с двойного интервала на 2.1 интервал может иметь большое значение. Следует помнить, что чем длиннее базовое эссе, тем больше они увеличивают длину. Так, например, если ваше эссе состоит из 10 строк с двойным интервалом, и вы изменили интервал на 2,1, вы получите дополнительные 0,1 строки за каждую написанную вами строку, а 0,1 × 10 = 1. Итак, на каждые десять строк, которые вы на самом деле пишете, вместо этого вы получите эффект одиннадцати. Для эссе объемом 4,5 страницы это крошечное изменение может легко вывести вас за отметку в 5 страниц и практически незаметно.Ниже два абзаца, левый с одинарным интервалом, а правый - с интервалом 1,1. Это действительно демонстрирует потенциал небольшого изменения.
Чтобы изменить интервал между строками, вам необходимо получить доступ к меню «Абзац» (я считаю, что в более старых версиях Word это можно было сделать, выбрав «Формат» -> «Абзац»). В Word 2007 к нему можно получить доступ, перейдя на вкладку «Макет страницы» на ленте и нажав всплывающую кнопку в прямоугольнике абзаца.
Затем в разделе «Межстрочный интервал» выберите «Множественный», а в разделе «При» выберите число, близкое к нормальному, например 1.1 или 2.1. Вы можете увеличить эту разницу, рискуя, что учитель заметит.
Изменение полей страницы - еще один отличный способ изменить длину бумаги. Уменьшая количество места, которое слова могут занимать на странице, вы увеличиваете количество страниц, необходимых для размещения вашего существующего контента. Изменение левого поля немного рискованно, поскольку большинство листов выровнены по левому краю, а это означает, что левый край будет относительно одинаковым для всех листов. Однако правое поле можно изменить по своему усмотрению, поскольку длина слов, количество букв и количество пробелов сильно влияют на правый край каждой строки.Вы также можете увеличить объем места, занимаемого верхним и нижним колонтитулами документа.
Еще один способ сделать документ длиннее - это добавить больше строк в заголовок документа. Если вы сделаете его слишком длинным, убедитесь, что он размещен только на первой странице, а не на каждой, так как это будет невероятно очевидно.
Если ваш учитель требует, чтобы эссе было 5 страниц , а не , но ваша статья немного длиннее, вы можете использовать те же методы в обратном порядке, чтобы ваша работа выглядела на короче .Например, вы можете изменить двойной интервал на интервал 1,9 или увеличить поля.
Категории шрифтовСамый популярный Новейшие3D Агрессивный Все заглавные буквы Древний Араб Азиатский Чернить Блокировать Кровь Смелый Марка Название бренда Щетка Пузырчатый Каллиграфия Мультфильм Рождество Классический Комикс Сжатый Прохладный Кудрявый Курсив Пышные Милый Темный Декоративные Дингбаты Dingfonts Проблемный Точечная матрица Капает Лекарство Элегантный Известный Изысканный Быстрый Праздничный Пылающий Процветать Цветы Иностранный Причудливый Веселье Футуристический Игры Девчушки Готика Граффити Гранж Почерк Трудно читать Сердца Тяжелый День отдыха Фильм ужасов Огромный Промышленное Инициалы Международный Курсив Смешанный Дети Корейский Любовь Прекрасный Строчные буквы Магия Средневековый Современный Моноширинный Фильмы и ТВ Музыка Тайна Старый Контур Пират Пиксель Пиксель или маленький Простой Ретро Богатый Романтичный Закругленный Без засечек Научная фантастика Поцарапанный Сценарий Скрипт или кисть Засечки Острый Плита Плита с засечками Наклонный Маленькие заглавные буквы С шипами Звезды Трафарет улица Стильный Высокий Технический Техно Толстый Тонкий Традиционный Племенной Печатная машинка Юникод арабский Юникод китайский Юникод японский Юникод корейский Жестокий Гравюра на дереве По названию шрифтаА B C D E F грамм ЧАС я J K L M N О п Q р S Т U V W Икс Y ZКатегории генераторовСамый популярный Анимированный Чернить Синий коричневый Горение Кнопка Повседневная Хром Проблемный Элегантный Тисненый Огонь Веселье Девчушки Глянцевый Светящийся Золото Градиент серый Зеленый Тяжелый День отдыха Лед Средневековый апельсин Контур Розовый Простой Фиолетовый красный Закругленный Научная фантастика Сценарий Тень Блестящий Небольшой Космос Искриться Трафарет Камень Триппи Валентинки белый Желтый |
Размеры, семейства и стили шрифтов
LaTeX обычно выбирает подходящий шрифт и размер шрифта на основе логической структуры документа (e.грамм. разделы). В некоторых случаях вам может потребоваться установить шрифты и размеры вручную.
Синтаксис для установки размера или стиля шрифта прост:
Это простой пример, {\ tiny, это покажет разные размеры шрифтов}, а также \textc {разные стили шрифтов}.
В этом примере показано, как использовать наименьший из доступных шрифтов ( tiny ) в стиле LaTeX и small caps style.
Открыть пример на обороте
Размеры шрифта идентифицируются специальными именами, фактический размер не является абсолютным, а зависит от размера шрифта, объявленного в операторе \ documentclass
(см. Создание документа в LaTeX).
В этом примере установлен {\ огромный огромный размер шрифта} и размер примечания {\ footnotesize также}. Есть довольно большой набор размеров шрифта.
В этом примере {\ огромный огромный размер шрифта}
объявляет, что текст внутри фигурных скобок должен быть отформатирован с использованием огромного размера шрифта . Полный список доступных размеров шрифта см. В справочном руководстве.
Открыть пример на обороте
По умолчанию в стандартных классах LaTeX шрифт с засечками (файл.к.а. roman) используется шрифт. Другие гарнитуры шрифтов (без засечек и пишущая машинка, также известные как моноширинные) можно использовать, введя определенные команды.
В этом примере используются команда и переключатели. \ texttt {Используется команда для изменения стиля предложения} \ sffamily Переключатель изменяет стиль с этой точки на конец документа, если не используется другой переключатель
Вы можете настроить использование шрифта sans по умолчанию в документе LaTeX с помощью команды:
\ Renewcommand {\ familydefault} {\ sfdefault}
Аналогично, для использования латинского шрифта по умолчанию:
\ Renewcommand {\ familydefault} {\ rmdefault}
Открыть пример на обороте
Наиболее распространенные стили шрифтов в LaTeX - полужирный, курсив и подчеркнутый, но есть еще несколько.
Часть этого текста написана \textl {разными font style}, чтобы выделить его.
В примере, представленном во введении, использовался стиль маленьких заглавных букв в стиле . В этом случае команда \textl
устанавливает наклонный стиль , который делает текст немного похожим на курсивом , но не совсем. Полный список стилей шрифтов см. В справочном руководстве.
Если вы хотите вернуться к «нормальному» стилю шрифта (по умолчанию для класса LaTeX, который вы используете), это можно сделать с помощью \ textnormal {...}
или команду переключателя \ normalfont
.
Открыть пример на обороте
Размер шрифта
Семейства шрифтов по умолчанию
шрифт = семейство | команда | команда переключения | выход |
---|---|---|---|
serif (римский) | \ textrm {Образец текста 0123} | \ rmсемейство | |
без засечек | \textf {Образец текста 0123} | \ sffamily | |
пишущая машинка (моноширинная) | \ texttt {Образец текста 0123} | \ ttfamily |
Стили шрифта
Открыть пример на обороте
Для получения дополнительной информации см .:
Think Big: Использование текстовых шрифтов в отображаемых размерах - Fonts.com
от Илен Стризвер
ITC Caslon No. 224 - элегантный, изысканный шрифт меньшего размера. В центре: при увеличении одного и того же шрифта засечки и тонкие штрихи выглядят толстыми и немного неуклюжими. Внизу: для больших размеров Big Caslon может быть лучшим выбором.Те же детали, которые делают ITC Oldbook очаровательно потрепанным при меньших размерах, могут казаться вымученными и неестественными при больших размерах.
Gill Sans Heavy очень хорошо переводит текстовые форматы на крупномасштабные дисплеи.
По сравнению с «старыми днями» сегодняшняя технология цифрового шрифта дает пользователям доступ к тысячам шрифтовых дизайнов с легкостью, которая является не чем иным, как чудом. К сожалению, большинство цифровых шрифтов допускают только один контур или дизайн для каждого символа, а не один дизайн для каждого кегля, как в случае с металлическим шрифтом. Это ограничение означает, что современные шрифтовые дизайнеры часто создают гарнитуры с учетом определенного диапазона размеров.
Есть ли способ получить от дизайна больше, чем задумал его дизайнер? Часто да.Несмотря на то, что большинство гарнитур классифицируются (официально или неофициально) как текстовые или отображаемые, вы все равно можете расширить потенциальный диапазон многих гарнитур, мудро выбрав и сделав некоторые незначительные корректировки при установке типа
.В этом месяце мы рассмотрим, как использовать текстовый дизайн при отображении различных размеров. Эти указатели помогут вам максимально эффективно использовать ваши шрифты.
Использование начертаний текста при размере экрана
Чтобы успешно установить дизайн текста для больших размеров, следуйте этим рекомендациям:
- Проверьте общий вид шрифта нужного вам размера.Некоторые текстовые дизайны просто не будут хорошо смотреться в большом размере. Текстовый дизайн может сохранять свою индивидуальность и целостность при больших размерах или может стать неуклюжим, тяжелым и непривлекательным. Избегайте сюрпризов, просматривая шрифт в том размере, при котором вы планируете его использовать, прежде чем делать окончательный выбор шрифта.
- Изучите детали. Волосы, тонкие штрихи, засечки и острые углы становятся более тяжелыми и округлыми при увеличении. В результате некоторые гарнитуры, которые выглядят четкими и резкими при больших размерах текста, иногда кажутся мягкими или неуклюжими при больших масштабах.Опять же, протестируйте дизайн до нужного вам размера и внимательно изучите его, прежде чем принимать.
- Рассмотрим без засечек. Дизайн без засечек, как правило, лучше переводится от текста к отображаемым размерам, чем шрифты с засечками, по причинам, изложенным выше: а именно, засеки часто являются первым элементом дизайна, который страдает от увеличения. Использование шрифтов без засечек позволяет избежать этой проблемы.
- Выбирайте тяжелые веса. Толстые, черные или сверхтяжелые текстовые семейства часто очень хорошо переносятся на большие размеры, поскольку они обычно изначально предназначены для использования на дисплеях.
- Затяните зазор. Расстояние между буквами и словами меняется в зависимости от масштаба, в результате чего лица текста выглядят слишком открытыми при больших размерах. Чтобы компенсировать это, установите размер шрифта текста на нужный вам размер, а затем увеличьте (отслеживайте) интервал соответствующим образом.
- Отрегулируйте кернинг. Пространственные отношения между буквами тоже меняются с масштабом. После настройки трекинга часто нужно будет также настроить кернинг.
Как использовать дизайн дисплеев малых размеров.
Посетите нашу страницу статей о типографике, чтобы узнать больше о типографике.
Размер шрифта баннера - насколько он должен быть большим?
Самая популярная рекомендация для определения правильного размера шрифта вывески и баннера - сделать их высотой не менее одного дюйма (72 пункта) на каждые 10 футов расстояния просмотра. Что касается конкретных размеров шрифта, то по данным Школы медиаискусств и дизайна Университета Джеймса Мэдисона, 1 пункт (пт) примерно соответствует 1/72 дюйма.
Размер шрифта для баннера должен быть настолько большим, насколько вам нужно. На самом деле, вы можете выбрать размер своего баннера только после того, как выясните размер шрифта баннера. Если вы хотите, чтобы основное сообщение вашего баннера было удобочитаемым, вам необходимо убедиться, что размер его шрифта больше, чем размер шрифта любой менее важной информации, которая есть на баннере.
Высота буквы | Эквивалент размера шрифта | Наилучшая читаемость | Рекомендуемое максимальное расстояние |
---|---|---|---|
1 дюйм | 72 пт. | 1 ’ | 50 ’ |
1,5 дюйма | 105 пт. | 15 ’ | 62,5 ' |
2 дюйма | 144 пт. | 20 ’ | 75 ’ |
3 дюйма | 216 пт. | 30 ’ | 100 ’ |
4 дюйма | 288 пт. | 40 ’ | 150 ’ |
5 ” | 360 пт. | 50 ’ | 175 ’ |
6 дюймов | 432 пт. | 60 ’ | 200 ’ |
8 ” | 576 пт. | 80 ’ | 350 ’ |
9 дюймов | 648 пт. | 90 ’ | 400 ’ |
10 ” | 720 пт. | 100 ’ | 450 ’ |
12 ” | 864 пт. | 120 ' | 525 ’ |
15 ” | 1080 пт. | 150 ' | 630 ’ |
18 ” | 1296 пт. | 180 ' | 750 ’ |
24 дюйма | 1728 пт. | 240 ' | 1,000 ’ |
30 ” | 2160 пт. | 300 ' | 1,250 ’ |
36 дюймов | 2592 пт. | 360 ' | 1,500 ' |
48 ” | 3456 пт. | 480 ' | 2,000 |
60 ” | 4320 пт. | 600 ' | 2,500 ' |
Таблица преобразования размера шрифта в дюймы
Для лучшей читаемости ваших вывесок, баннеров и других широкоформатных рекламных материалов см. Таблицу ниже.
Расстояние чтения | Минимальный удобный размер шрифта | Комментарии |
---|---|---|
1,2 фута | 8 баллов | Типичное расстояние чтения для книг и журналов. На этом расстоянии 10, 11 или 12 точек являются самыми популярными |
2,4 фута | 16 баллов | Это ближайшее удобное расстояние для чтения большого плаката. |
5,0 футов | 32 балла | Когда к вашему баннеру трудно получить доступ, например, когда область связана веревками или подвешена на высоком удобном расстоянии, вам нужно сделать размер шрифта еще больше. |
25,0 футов | 160 баллов | Практически для любой настройки вам нужен заголовок, который можно будет прочитать хотя бы с такого расстояния. |
Какого размера должны быть буквы на вывеске?
Вообще говоря, самые важные сообщения на ваших вывесках и баннерах должны быть самыми большими и, следовательно, наиболее удобными для чтения. Чем дальше ожидаемое расстояние просмотра, тем больше должны быть буквы и ваш знак.
Обратите внимание, что размер письма - это еще не все.Следующие факторы также повлияют на общую читаемость вашего баннера:
- Стиль шрифта - Шрифты без засечек легче читаются на расстоянии по сравнению со шрифтами с засечками. Стили с более тонкими буквами могут быть труднее читать, хотя слишком толстые буквы также будут трудно читать. Вы можете проверить профессиональные вывески в вашем районе, чтобы понять, какие стили шрифтов подходят лучше всего. Вы также можете распечатать несколько тестовых знаков на домашнем или офисном принтере, чтобы проверить, работает ли стиль шрифта.
- Кернинг - это расстояние между буквами. Буквы, расположенные слишком близко друг к другу или слишком далеко друг от друга, могут быть трудночитаемыми. Хотя это делается автоматически на вашем компьютере, часто лучше, чтобы графический дизайнер помог вам определить оптимальные расстояния, чтобы избежать создания универсального знака.
- Белое / негативное пространство - Знаки не должны быть слишком загромождены, иначе основное сообщение будет затемнено, независимо от размера букв вашего баннера.Общепринятое эмпирическое правило в сообществе графического дизайна состоит в том, чтобы контент (включая изображения) занимал только 40% знака, а отрицательное пространство занимало оставшиеся 60%. Это поможет лучше выделить сообщение вашего баннера, особенно в общественных местах, где другие знаки и объекты могут конкурировать за внимание.
- Цвета - Белый, красный и аналогичные яркие цвета привлекают больше внимания по сравнению с более темными и нейтральными цветами. Цвета, которые вы используете на копии и фоне вашего баннера, также должны иметь достаточный контраст, чтобы текст был более понятным.
Какой размер шрифта подходит для доски меню?
Баннеры и вывески - популярные продукты для использования на досках меню кафе и ресторанов, а также на досках цен и уведомлений для других малых предприятий, таких как прачечные самообслуживания. Вы можете предположить, что они будут считываться в помещении или, по крайней мере, на близком расстоянии, вероятно, намного меньше, чем 100 футов. Вы можете разместить основной текст между 72 pt. (приблизительно 1 дюйм высотой) и 216 pt. (примерно 3 дюйма в высоту). Вы можете использовать любой размер шрифта заголовка, если он больше основного текста и выглядит пропорционально.
Какой размер шрифта подходит для вывесок политической кампании?
Эти широкоформатные материалы также являются хорошим способом публично поделиться лозунгами или любыми другими сообщениями. Это делает вывески и баннеры популярными среди рекламных агентств и подходящими для политических кампаний и любых видов защиты. 216 пт. (3 дюйма в высоту) - хорошая отправная точка для основного текста для вывесок и баннеров, которые должны быть читаемыми на расстоянии от 30 до 100 футов. Вы можете увеличить размер до 432 пт. (6 дюймов в высоту) или больше, если вы хотите, чтобы водители были лучше видны или просто хотите, чтобы сообщение вашего знака было видно издалека. Вы можете обратиться к нашей таблице рекомендованных размеров шрифта выше.
Какой размер шрифта подходит для рекламных панелей?
В отличие от баннеров и дворовых вывесок, табло обычно имеет подробный текст. Для основных заголовков вы захотите следовать тем же общим правилам, что и для досок меню. Скорее всего, ваша информационная доска будет находиться на расстоянии менее 100 футов от читателей.В этих случаях вы можете иметь текст заголовка между 72 pt.