Размеры шрифта: Единицы измерения шрифта или «Как сделать шрифт нужного размера?» | by Dr. Egor

Содержание

Единицы измерения шрифта или «Как сделать шрифт нужного размера?» | by Dr. Egor

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

Размер шрифта в векторе

Как правило, цифровые шрифты являются векторными, и все их метрики задаются в некоторых условных единицах, не имеющих размерности.

Основные метрики шрифта «Новая Гельветика Тонкая» в окне настроек шрифтового редактора «Фонтлаб 5».

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

При этом в векторном представлении все же присутствует точка отсчета и мера, а точнее соразмерность отдельных элементов друг другу.

Глиф G из шрифта «Новая Гельветика Тонкая» в окне глифа программы «Фонтлаб 5».

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

Окно настроек шрифта в редакторе «Фонтлаб 5». Обратите внимание, что параметр UPM является глобальным и влияет на все глифы в шрифте.

UPM (Units Per Em) — это количество условных единиц на кегельную (литерную) площадку.

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

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

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

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

Прямо на процесс создания или хранения векторных шрифтов параметр UPM не влияет. Он становится важен только тогда, когда шрифт попадает в конкретную систему координат.

Например, в окно тестирования/предпросмотра шрифта или в Фотошоп.

Размер шрифта в Фотошопе

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

Чтобы понять, что происходит с векторными метриками шрифта в Фотошопе, давайте разберемся, а что же означают пиксели в параметре «размер шрифта»?

Окно настройки шрифта в программе Адобе Фотошоп.

Когда вы выбираете размер шрифта, например, в «16 px», на самом деле вы устанавливаете это значение для параметра PPM.

PPM (Pixels Per Em) — это количество пикселей на кегельную площадку.

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

То есть, ни одна из вертикальных метрик шрифта не станет при этом равной 16 пикселям! Ни высота строчных, ни высота прописных, ни расстояние между верхними и нижними выносными элементами.

Шрифт Helvetica, PPM = 16 пикселей, сглаживание в режиме Strong. Высота прописных букв равна 12 пикселям, а строчных — 9 пикселей.

Так что же в действительности изменяет параметр «размер шрифта»? Вы уже догадались? Молодцы, совершенно верно.

Коэффициент масштабирования

Изменяя «размер шрифта» в Фотошопе, мы, ни много ни мало, изменяем коэффициент масштабирования при переносе условных единиц из безразмерного мира векторов в мир размерных пикселей. Он служит «мостиком» при переходе условных векторных метрик в пиксели.

Происходит это следующим образом.

Как вы уже поняли, величины UPM и PPM связаны между собой элементом «M», общим множителем — неопределенным размером условной кегельной площадкой. Отсюда получаем простую формулу:

Х у.е. в 1 пикселе = UPM / PPM

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

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

Живой пример

В процессе создания шрифта «5 копеек» (FE 5Cent), было важно добиться абсолютной четкости линий при «размере шрифта» (PPM) в 5 пикселей в Фотошопе или в любой другой программе.

Шрифт FE 5Cent — это, пожалуй, самые большие «5 копеек», добавленные в вопрос пиксельных шрифтов

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

Значение UPM для шрифта предполагалось стандартное, в 1000 единиц.

Дано:

PPM в Фотошопе = 5 пикселей

UPM шрифта = 1000 у.е.

Задача: Найти количество Х у.е. для рендеринга в 1 пиксель.

Решение:

X у.е. в 1 пикселе = UPM / PPM = 1000 / 5 = 200.

Ответ: 200 у.е.

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

Все по 200!

Вывод о пользе

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

Адаптивный веб-дизайн: как выбрать размер шрифта

Вы читаете «Размеры шрифта в UI дизайне: Полное руководство».

Быстрая навигация по главам: Введение · iOS · Android · Веб · Принципы

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

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

Рекомендации по веб-типографике — мобильный дизайн

Если вы создаёте макет веб-сайта или приложения, которым можно будет пользоваться с телефона, зарубите себе на носу раз и навсегда:

  • Размер шрифта в инпутах не менее 16px. Если шрифт будет меньше, на iOS браузер приблизит строку ввода, сместив её влево и обрезав правую сторону так, что после пользования строкой пользователю придется отдалять уже вручную.

Вот так это выглядит:


За гифку отдельное спасибо шустрому Ste Grainer. Можете ознакомиться с его статьёй по авто-зуму здесь.

Вся остальная информация о размерах шрифта в мобильном вебе в основном сводится к следующему:

  • Размер шрифта основного текста должен быть около 16px. Цель: чтобы текст на вашем телефоне (при стандартном расстоянии от глаз) читался так же легко, как и на странице хорошо отпечатанной книги (при стандартном — обычно чуть большем — расстоянии от глаз).
  • Для второстепенного текста, подписей для полей и картинок используйте размер на пару значений меньше: например, 13px или 14px. Уменьшать размер только на одну единицу я не рекомендую — в таком случае его будет легко спутать с обычным текстом. Менее важный текст должен быть оформлен соответственно, чтобы намеренно подчеркнуть его меньшую значимость.
  • Проверяйте, как выглядит ваш дизайн на самом устройстве. Максимально обратите своё внимание на этот совет: макет приложения на экране ноутбука и макет приложения на экране смартфона в ваших руках дают абсолютно разные ощущения.
    В начале своего дизайнерского пути я едва ли не каждый раз поражался тому, как макет, который я делал на компьютере, по-другому выглядел на мобильном устройстве. Размеры шрифтов, отступы — всё слетало к чертям. Поэтому используйте Sketch Mirror, Figma Mirror или что вам там больше нравится, только проверяйте свой дизайн на самих девайсах.
  • По всем остальным вопросам касаемо размеров шрифтов в вебе, идите читать гайдлайны материального дизайна — это понятный, хорошо структурированный, метко написанный (и вполне содержательный) материал. Чем больше я расту как дизайнер, тем больше убеждаюсь в следующем: хоть у Apple и есть максимальный авторитет с точки зрения дизайна, сегодня Google благополучно вытирает об него ноги. Только не говорите дизайнерам-снобам, что я так сказал.

Руководство по веб-типографике на ПК

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

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

Привести пару примеров? Вот

эта страница, на которой вы находитесь, — текстовая. А новостная лента на Facebook — интерактивная. Обе страницы преследуют слегка разные цели, поэтому разберем их по-отдельности. Информация об обеих может быть вам полезной. Страница «О нас» какого-нибудь безумного веб-приложения тоже нагружена текстом. А на странице «Контакты» в каком-нибудь ванильном бложике может быть много взаимодействия.

Текстовые страницы

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

  • 16px — абсолютный минимум для текстовых страниц
  • 18px — лучше начинать с этого размера. Вы же не печатаете текст в ворде с одинарным межстрочником. Вы оформляете текст для людей, которые сидят в метре от своих допотопных мониторов.
  • 20px+ — поначалу может показаться прям очень огромным, но попробовать его стоит в любом случае. Сайт medium.com может похвастаться лучшим дизайном текстовых страниц, а размер шрифта по умолчанию там равен 21px.

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

Интерактивные страницы

Итак, для интерактивных страниц, подойдут и размеры поменьше. На самом деле, исходя из количества информации, которую единовременно получает пользователь, даже текст в 18px может быть слишком крупным для комфортного чтения. Зайдите на свою почту, в twitter, в любое приложение, где нужно скорее «сканировать» страницу, нежели чем читать; зайдите в приложение, которое предоставляет данные — вряд ли вы найдёте там длинные абзацы текста в 18px. Вместо этого нормой будет 14-16px. Однако одним размером шрифта дело не обойдётся. Скорее всего, для менее значимой информации будут использоваться более мелкие кегли, а для более значимой — кегли побольше (заголовки, подзаголовки и под-подзаголовки и так далее), и всё это будет смешано в одну большую типографическую солянку.

А теперь важная мысль: на любой интерактивной странице размер шрифта в МЕНЬШЕЙ степени зависит от свода правил (я о тебе говорю, скейлинг шрифтов), чем от определённых потребностей каждого участка текста и взаимодействия между ними.

Например:

  • Шрифт для названий событий — 12px, medium, в начертании, которое полностью отсутствует в гайдлайнах материального дизайна. Но вот когда эти названия нужно уместить в 7 колонок на экране, ширина которого составляет всего лишь 1440px, а многие события состоят всего из одного-двух слов, данный размер шрифта идеален. Совсем чуть-чуть уменьшишь — и уже не прочитать. Совсем чуть-чуть увеличишь — и слишком много названий окажутся обрезаны. Дизайн — это череда компромиссов, ребята. Если вы не знаете, ради чего вы на этот компромисс идёте, возможно, вы идёте на него не там.
  • Указатели времени слева («12pm», «1pm» и т.д.) имеют размер 10px. Это ещё один стиль текста, который полностью отсутствует в гайдлайнах. А горизонтальное пространство у нас на вес золота. Возле каждого события в любом случае указано время его начала. Почему бы тогда не сделать время слева поменьше?
  • Размер дат — 48px. И вновь ничего подобного в материальном дизайне. В данном случае не знаю, почему не использовать 45px — ведь это официальный размер текста для второго монитора, но если бы разработку дизайна поручили мне, то я бы использовал жирный шрифт размером 48px, и вот здесь жирность создавала бы проблемы. Она привлекла бы слишком много внимания. Поэтому я в любом случае поработал бы ещё над стилем.

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

Руководство по размерам шрифта в дизайне интерфейсов

Чаще всего начинающие дизайнеры интерфейса задают мне следующий вопрос: Какой размер шрифта я должен использовать для своего проекта? Иногда они спрашивают о веб-сайте, иногда об Android-приложении, иногда о проекте на iPhone / iPad. Material Design дает хорошие рекомендации, но они на 50 страниц. iOS … ну, у них нет хороших рекомендаций! А по веб-дизайну все еще хуже. Может быть, внезапно появится какая-нибудь статья, которая рассказывает вам, какие размеры шрифта использовать на основе темной магии с золотым сечением. Да ладно, люди.

Три разных платформы, три разных набора проблем и два противоположных языка дизайна?

Вы когда-нибудь хотели, чтобы кто-то скомпилировал все правила в одном месте?

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

  1. Платформы: рекомендации для различных типов платформ, а именно:
  2. Принципы: более общие правила при выборе размеров шрифтов
  3. Ресурсы: список полезных сайтов по типографике

Примечание по терминологии

Распространение HD экранов вызвало абсолютный хаос в терминологии дизайна. «Пиксель» теперь означает примерно 3 разных вещи. Если не указано иное, я всегда буду «говорить @ 1x», т. е. я буду говорить о размерах шрифтов, используя число, которое вы указали в поле «Размер шрифта» в Sketch / Figma и т. д. В iOS это называется «pt» (читается: «point», означает «точка»). В Android это называется «sp» (читается: «sip», означает «масштабируемый пиксель»). В Интернете это называется «px» (читается: … погодите, вы ведь знаете это, верно?)

Давайте начнем.

iPhone

Проектируете приложения для iPhone и не уверенны, какие размеры шрифта использовать? Вот краткое резюме размеров шрифтов, предполагающее, что (а) вы используете шрифт Apple по умолчанию San Francisco (или аналогичный) и (b) вы хотите соответствовать стилю iOS:

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

Заголовки

В iOS 10 есть несколько больших по размеру, но коротких заголовков, таких как «Inbox» ниже — в размере 34pt. Это самый большой текст, который вы увидите на iPhone.

Но при скроллинге, заголовки уменьшаются до 17pt — размер по умолчанию для текстовых действий.

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

Вид списка

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

В представлении списка — в этом конкретном примере с электронными письмами — iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр — как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.

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

Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.

Элементы управления

Давайте быстро рассмотрим несколько элементов управления.

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

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

Модальные окна

Это маленькое всплывающее окно является наглядным примером того, как Apple создает дизайн текста.

  • Заголовок имеет размер по умолчанию. Вы можете подумать, что этого, будет недостаточно, но что мы видели раньше? Тяжелый вес шрифта, чтобы компенсировать его размер.
  • Пояснительный текст — 13pt. Я бы подумал, что это будет 15pt, как основной текст электронной почты, но, возможно, они просто хотели, чтобы он уместился в одну строку?
  • Ввод пароля составляет 13pt, что было бы слишком мало для обычного ввода текста, хотя, мне кажется, что вы увидите только кучу черных кружков, это не обязательно будет размер по умолчанию.
  • «ОК» и «Отмена» имеют размер по умолчанию, но поскольку кнопка «ОК» надеется, что вы ее нажмете, Apple привлекает к ней немного больше внимания, сделав ее толще.

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

Панель действий

Наконец, у нас есть панель действий в нижней части экрана. Это самый маленький текст, который я мог найти во всем интерфейсе — 10pt. Я бы избегал использовать такой небольшой размер, насколько это возможно.

iPad

На момент написания этой статьи (весна 2018 года), iPad обычно имеет меньшую плотность пикселей, чем iPhone. Это означает, что элемент будет немного больше на iPad. Из-за этого подавляющее большинство размеров шрифтов остаются неизменными для iPhone и iPad. Поэтому, если вы разрабатываете приложение для iPad, начните с чтения раздела по iPhone выше.

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

Поэтому, хотя, некоторые приложения по-прежнему используют заголовки 17pt в стиле iPhone…

На iPad они больше.

В нескольких нативных приложениях используется самый полужирный вес шрифта SF — тяжелый. На мой взгляд, это настоящая «iPad-версия» полужирных заголовков на iPhone, но Apple странно непоследовательна в ее использовании.

Выше я также указываю неправильную нижнюю панель вкладок приложения «Музыка» (с текстом 17pt). В большинстве нативных приложений для iPad сохраняется размер панели вкладок 10pt в стиле iPhone, но я думаю, что это лучший «перевод» дизайна на экран большего размера.

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

Примечания по шрифту SF

Шрифт iOS по умолчанию — San Francisco. Вы можете бесплатно скачать San Francisco. Нет необходимости использовать San Francisco при создании приложения iOS, но, если вы хотите, чтобы у вашего приложения был вид iOS по умолчанию, тогда SF — ваш новый лучший друг.

Apple хотела бы, чтобы вы соблюдали несколько дополнительных правил при использовании шрифта San Francisco

Во-первых, используйте SF Pro Display при размерах шрифта 20 или выше. Используйте SF Pro Text только для основного текста и меньше.

Во-вторых, Сан-Франциско спроектирован так, чтобы иметь различный интервал между символами при разных размерах шрифта. Поэтому, если вы хотите идеально подражать «iOS по умолчанию», у вас есть несколько вариантов:

  1. Ручная настройка интервала между символами в зависимости от размера шрифта в соответствии с приведенной ниже таблицей
  2. Используйте текстовые стили непосредственно из библиотеки Apple iOS UI Design Sketch (или Photoshop или XD)
  3. Используйте этот удобный Sketch плагин для автоматического выбора расстояния между символами шрифта SF, в зависимости от его размера.

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

San Francisco — шрифт по умолчанию для iPhone и iPad. Поэтому, если вы используете его, лучше знать об этих ограничениях. Тем не менее, вы можете проектировать приложения iOS с любым шрифтом. Будьте осторожны, другие шрифты даже в том же размере могут оказаться крупнее или меньше, или менее разборчивыми.

Material Design — Mobile

Итак, вы разрабатываете приложение в стиле Material Design и хотите узнать (примерно), какой размер шрифта использовать? Отлично. Вы пришли в нужное место.

Все размеры шрифта, перечисленные ниже, относятся к Roboto. Другие шрифты могут казаться большими или меньшими, даже с одинаковым размером. Единицы, которые я использую в этом разделе, являются «sp». Произносится как «sips», и обозначает масштабируемые пиксели. Но, как дизайнер, все, что вам нужно знать, это число, которое вы вводите в поле «размер шрифта», когда проектируете.

Теперь давайте рассмотрим элемент за элементом с (a) визуальными эффектами и (b) заметками о том, как Google ловко использует эти стили шрифтов. Без шуток, народ. Надеюсь, вы прочитаете этот раздел и подумаете: «Кто бы ни придумал размеры шрифта Material Design — это умный человек». Я так думаю.

Заголовки

Заголовки в мобильных приложениях Material Design составляют 20sp.

Основной текст

Размер основного текста в Material Design составляет 14sp. Вы должны расценивать это как нормальный размер шрифт, а все остальное в большинстве своем его вариации.

Например, в то время, как 14sp является размером текста по умолчанию, когда текст может быть довольно длинным. Однако, когда есть только небольшое модальное окно с небольшим количеством текста, это 16sp!

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

Элементы списка

Многие простые списки будут показывать каждый элемент в размере 16sp.

Фактически, это размер «элемента списка» по умолчанию в Material Design.

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

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

Но более плотные списки, например, на боковых панелях, равны 14sp — и на один вес тяжелее, чтобы компенсировать (это немного похоже на более крупный размер шрифта модального окна, который легче, чтобы также компенсировать).

Элементы управления

Теперь давайте взглянем на кнопки и текст вводимых данных.

Единственным сюрпризом здесь, на мой взгляд, является то, что размер текста ввода 16sp. Почему не размер основного текста по умолчанию? Поскольку значение словабольше, чем у основного текста по умолчанию, и в отличие от кнопки (у которой естьтекст 14sp), странно делать текстовое поле со средним или полужирным шрифтом.

Для дополнительной информации ознакомьтесь с Material Design руководством по типографике от Google.

Material Design — Desktop

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

Если вы разрабатываете приложение Material для больших экранов, вам также стоит ознакомиться с разделом Desktop web ниже.

Mobile Web

Если вы разрабатываете веб-сайт или приложение, которое можно просматривать на мобильных устройствах, существует только одно жесткое правило:

  • Используйте размер шрифта для текста ввода не менее 16px Если вводимый текст имеет меньший размер шрифта, то iOS-браузеры будут увеличиваться в левой части ввода текста, часто затеняя правую сторону и заставляя пользователя вручную уменьшать масштаб после использования текстового поля.

Вот, что еще я могу сказать о размерах мобильных веб-шрифтов:

  • Используйте размер шрифта основного текста около 16px. Вы хотите, чтобы текст основного текста на вашем телефоне (когда он находился на естественном расстоянии) был таким же читаемым, как текст в хорошо отпечатанной книге (которую держат на естественном — обычно чуть дальше — расстоянии)
  • Для вторичного текста, несущественных меток и подписей используйте размер поменьше — например, 13px или 14px. Я не рекомендую уменьшать только на один размер шрифта, поскольку тогда слишком легко спутать его с обычным текстом. Когда текст менее важен, вы хотите его стилизовать так, чтобы четко понимать его меньшее значение.
  • Золотой стандарт — просматривать свои проекты на самом устройстве. Так как ощущение дизайна мобильного приложения на экране вашего ноутбука отличается от того, когда вы смотрите его на мобильном. Как начинающий дизайнер, я был потрясен почти каждый раз, когда открывал на смартфоне страницу, созданную на компьютере. Размер шрифта, расстояние … все отличалось. Поэтому используйте Sketch Mirrorили Figma Mirror или любое другое приложение, но просмотрите свои дизайны на устройстве.
  • Наконец, по любым другим вопросам, касающимся размеров шрифтов мобильного веб-сайта, см. рекомендации Material Design, которые являются ясными, последовательными и изобретательными (хотя и не краткими). Чем больше у меня опыта, тем больше я убежден, что даже несмотря на то, что у Apple есть дизайн авторитет, Google в настоящее время утерла им нос. Но не говорите снобам, что я так сказал.

Desktop Web

При выборе базового размера для десктопного веб-сайта или веб-приложения вы можете разбивать большинство проектов на один из двух типов:

  1. Страницы, перегруженные текстом. Статьи, блоги, новости и т. д. Это страницы, на которых главная цель пользователя на странице — это прочитать. Взаимодействийочень мало, возможно, просто клик на несколько ссылок
  2. Страницы, перегруженные взаимодействиями.  Приложения, которые включают в себя наведение курсора, нажатия, поиск элемента в списке или таблице, редактирование, печатание и т. д. На странице может быть много текста, но вы читаете его как книгу.

Вам нужен пример или два? Эта статья — страница, перегруженная текстом. Лента новостей в Facebook — это страница, перегруженная взаимодействиями. У каждой есть немного разные проблемы, поэтому я разберу их отдельно. Страница «О нас» сумасшедшего веб-приложения перегружена текстом. Страница «Контакты» в ванильном бложике перегружена взаимодействиями.

Страницы, перегруженные текстом

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

  • 16px— абсолютный минимум для страниц, перегруженных текстом.
  • 18px— лучший размер шрифта для начала. Вы не распечатываете документ Word с одним интервалом; вы пишите для людей, сидящих в нескольких футах от своих мониторов десятилетней давности.
  • 20px+— сначала может показаться неудобно большим, но всегда стоит попробовать его в дизайнерском приложении. Самый красивый перегруженный текстом сайт в Интернете — Medium.com, имеет размер текста статьи по умолчанию 21px.

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

Страницы, перегруженные взаимодействиями

Теперь, для страниц с большим количеством взаимодействий, идеально подойдут малые размеры текста. Фактически, из-за объема данных, которые пользователь получает за раз, даже текст 18px неудобен. Посмотрите на свой (веб-) почтовый ящик, посмотрите на Twitter, посмотрите на любые приложения, которые вы используете. Для них возможность бегло просматривать текст важнее чтения. Посмотрите на приложения, которые показывают вам данные — вам будет трудно найти длинные абзацы текста 18px. Вместо этого 14px-16px является нормой. Но не будет только одного размера шрифта. Вероятно, будут меньшие размеры для менее важных вещей и более крупныеразмеры для более важных вещей (заголовки и подзаголовки, под-подзаголовки и т. д.). И все это будет смешано вместе в гигантской мешанине.

Теперь важная часть: для любой страницы с большим количеством взаимодействий размер шрифта будет УМЕНЬШАТЬСЯ от большего к меньшему, с уменьшением конкретных потребностей каждого фрагмента текста и взаимодействия между ними.

Например:

  • Названия событий — 12px среднего веса. Такой шрифт отсутствует в руководстве Material Design. Тем не менее, учитывая, что они должны соответствовать 7 столбцам на экране, который имеет ширину всего 1440px, а названия многих событий довольно короткие, это идеальный выбор размера шрифта. Если взять размер шрифта меньше, то пострадает удобочитаемость текста. Если взять размер шрифта больше, то слишком часто названия событий будут обрезаны. Дизайн — это компромиссы, малыш. Если вы не можете назвать компромисс, который делаете, вы, вероятно, делаете его не в том месте.
  • Время («12pm», «1pm» и т. д.) Имеет размер шрифта: 10px. Это еще один стиль, полностью отсутствующий в руководстве Material Design. Тем не менее, горизонтальное пространство на вес золота. В любом случае каждое событие будет обозначаться временем начала. Почему бы не уменьшить метки слева?
  • Даты — 48px. Опять же, не нашел в руководстве Material Design. В этом случае, я не знаю, почему они не использовали 45px, что является официальным размером «Display 2». Я бы, вероятно, сделал 48px полужирным шрифтом, а здесь полужирный будет проблемой. Это привлекло бы слишком много внимания. Поэтому я бы изменил стиль в любом случае.

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

Принципы

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

Угловой размер

Как и многие другие аспекты дизайна интерфейса, что-то, что кажется случайным и субъективным (как размер шрифта), на самом деле зависит от удивительно разумного принципа: нам нравится читать абзацы, буквы которых имеют примерно одинаковый субъективный размер, а именно, что-то вроде 0,3 ° вверх от базового уровня до высоты прописных букв, в нашем поле зрения.

Во-первых, зачем нам измерять размеры шрифта в градусах? Честно говоря, это самый разумный способ при сравнении размера шрифта между устройствами. Что у вас еще есть дюймы? Если вы говорите о том, чтобы сделать свой шрифт пол дюйма в высоту, ну, отлично, но текст высотой в пол дюйма — это безумно большой текст для телефона(на расстоянии в 30 см от вашего лица) и довольно маленький на экране телевизора(в 300 см от вашего лица). Простая истина заключается в следующем: когда шрифт в два раза дальше, он должен быть в два раза больше, чтобы компенсировать расстояние.

Это прекрасно в теории, но на практике невероятно сложно вычислить:

  • Не все смотрят на телефон или монитор с одинакового расстояния
  • Не все устройства имеют одинаковые размеры пикселей
  • Не все шрифты имеют такую ​​же читабельность — даже при том же размере шрифта, плотности пикселей и расстоянии просмотра!

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

Правило 1/16″

На широком спектре расстояний просмотра вы можете задать размер основного текста по следующей формуле:

Размер шрифта (в дюймах) = 1/16″ x (количество футов между глазами пользователя и устройством)*

 

* Измерение базовой линии до высоты прописных букв и предполагает достаточно читабельный шрифт основного текста

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

Соотношение пиксельной плотности и расстояния просмотра

В общем, чем меньше устройство, тем меньше пикселей *.

* Под «пикселем» я подразумеваю не физические пиксели, а концепцию, попеременно относящуюся к «CSS пикселям» (веб-сайт), «независимым от плотности пикселям» (Android) или «точкам» (iOS). В настоящее время большинство флагманских устройств имеют настолько небольшие физические пиксели, что они искусственно раздувают изображение в два раза (или три раза), как большое. Каждый «пиксель» на изображении фактически занимает 4 (или 9) физических пикселей. Таким образом, «физический пиксель» становится довольно бесполезным, как термин размера. Вместо этого у нас есть три термина: один из них — пережиток прошлого, когда все экраны были с низким разрешением (CSS-единица «пиксель»), второй — новое значение для старого печатного термина («точка») и последний — совершенно новая единица, чье определение связано с мудреной, неприятной детализацией, которая отличает ее от других единиц («независимый от плотности пиксель» или «dp»).

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

Это не конец света, так как мы держим телефоны ближе к своему лицу. Но если средний телефон в два раза ближе к нашим глазам по сравнению с монитором ПК, достаточно ли уменьшить плотность пикселей на мониторе компьютера, чтобы сделать шрифт рабочего стола вдвое больше? Короткий ответ: нет. Более развернутый ответ: типичный рабочий стол ПК имеет на 33% меньше пикселей, чем обычное мобильное устройство. Это означает, что не глупо делать любой текст на мониторе ПК примерно на 33% больше, чем его мобильный эквивалент, по крайней мере, на странице, оптимизированной для чтения длинной формы (А на других страницах? Посмотрите раздел Страницы, перегруженные взаимодействиями выше).

Это все. Просто еще одно золотое правило, которое следует учитывать при разработке гибких веб-сайтов.

Для дальнейшего чтения по теме

Material Design:
  • Material Design руководство по типографике от Google. Официальная страница Google по типографике, хотя, для более полной картины, вы должны просмотреть страницы по разным компонентам (кнопки, модальные окна и т. д.).
  • Device Metrics от Google. Официальный ресурс Google, в котором перечисляются физические размеры, размеры в пикселях и разрешение экрана многих устройств Android и iOS.

iOS:
  • iOS Design Guidelines от Ivo Mynttinen. Действительно полезная компиляция руководств по iOS. Нет, она не официальная, но по иронии судьбы, гораздо проще в использовании, чем официальное яблочное руководство «Human Interface Guidelines», указанное ниже.
  • Human Interface Guidelines — Типографика

ТВ дизайн:

Оригинал: Skethcapp

Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS

Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size, для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:


/* в процентах: */
h2 {
	font-size: 100%;
}


/* в единицах измерения em: */
h3 {
	font-size: 1em;
}


/* в пикселях: */
h4 {
	font-size: 18px;
}


/* с помощью ключевого слова: */
p {
	font-size: small;
}

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:


font-size: 24px;

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:


p {
	font-size: 100%;
}

/* ...то же самое, что и значение в браузере по умолчанию: */

p {
	font-size: 16px;
}

Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение

200%, наоборот, увеличит шрифт в два раза.

Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.

Единица измерения em

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em = 300% и так далее. Пример записи:


font-size: 0.9em;

/* перед точкой можно опустить ноль: */

font-size: .9em;

Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:

Скриншот: наследование значений размеров шрифтов

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem, которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

Ключевые слова

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

Ключевое словоРазмер в пикселях
xx-small9px
x-small10px
small13px
medium16px
large19px
x-large24px
xx-large32px

Как видим, значение medium соответствует базовому размеру шрифта 16px. Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймыin, сантиметрыcm, миллиметрыmm. Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.

Размер шрифта. HTML, XHTML и CSS на 100%

Читайте также

Семейство шрифта

Семейство шрифта Свойство font-family указывает браузеру шрифт или список шрифтов, которыми должен отображаться текст. Не надо забывать, что заданный вами шрифт может быть не установлен на машине клиента. Тогда браузер отобразит текст на экране первым шрифтом, который найдет

Стиль шрифта

Стиль шрифта Стиль шрифта задается свойством font-style, которое может принимать одно из трех значений: normal, oblique или italic. Эти значения имеют следующий смысл.• normal – определяет шрифт, который классифицируется как Normal. При отображении на экране он выглядит как обычный текст.•

Вид шрифта

Вид шрифта Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задано значение small-caps, то текст будет выведен шрифтом из малых прописных букв. Если задано значение normal, то текст отображается, как обычно.Лучше всего это понятно на примере. Применим

Ширина шрифта

Ширина шрифта Свойство font-weight определяет ширину шрифта. Значение может быть задано числом от 100 до 900 (в сотнях), где каждый номер обозначает шрифт, который темнее своего предшественника. В других случаях значение может быть следующим.• normal – текст будет отображен обычным

Свойства шрифта

Свойства шрифта fontЗадает параметры шрифта элемента страницы.Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке. font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];Значение по умолчанию – normal normal

1.

5. Оформление текста (границы, абзацы, размер шрифта, гарнитуры)

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

4.2. Параметры шрифта

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

Вид шрифта

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

Размер страницы и размер кэша по умолчанию

Размер страницы и размер кэша по умолчанию При восстановлении вы можете изменить размер страницы, включив в команду переключатель -р[age_size], за которым следует целое число, задающее размер в байтах. Допустимые размеры страниц см. в табл. 38.2.В этом примере gbak восстанавливает

1.5. Оформление текста (границы, абзацы, размер шрифта, гарнитуры)

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

Стили шрифта

Стили шрифта Стиль шрифта задается перечислимым типом FontStyleType, который содержит следующие константы: fsNormal – обычный; fsBold – жирный; fsItalic – наклонный; fsBoldItalic – жирный наклонный; fsUnderline – подчеркнутый; fsBoldUnderline – жирный подчеркнутый; fsItalicUnderline – наклонный

13.6.1. Выбор шрифта

13.6.1. Выбор шрифта В вашем компьютере установлено много различных шрифтов. Шрифт по умолчанию, который используется в MS Word, — Times New Roman. Он подойдет для сухого делового документа, служебной записки. Чтобы изменить гарнитуру шрифта (далее мы просто будем говорить «изменить

13.6.2. Начертание шрифта

13.6.2. Начертание шрифта Шрифт может быть курсивным, жирным и подчеркнутым. Начертание используется для выделения текста, на который вы хотите обратить внимание читателя. Например, термины можно выделить жирным или жирным+курсивом.Для изменения начертания используются

16.3.3. Размер шрифта и полноэкранный режим

16.3.3. Размер шрифта и полноэкранный режим У некоторых веб-мастеров, наверное, проблемы со зрением: одни устанавливают неприлично больпюй размер шрифта, другие, наоборот, слишком мелкий. Браузер позволяет исправить ситуацию — зачем портить себе зрение (если шрифт мелкий)?

Размер головного мозга и размер социального окружения

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

Понятие размера шрифта—Справка | ArcGIS for Desktop

ArcGIS использует программные масштабируемые шрифты для отображения текста. Это позволяет отображать надписи, аннотации и тексты на карте в различных масштабах, сохраняя при этом все их свойства отображения. Пример масштабируемого программного шрифта – Arial (Open Type).

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

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

Измерение размера шрифта в пунктах

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

Таблица конвертации пунктов в дюймы
ТочкиДюймы

1

0.014″

12 (1пика = 4,23 мм) В издательских системах – единица измерения горизонтальной и вертикальной разметки страницы. Её точное значение – 0,166 дюйма, но во многих пакетах вёрстки в целях упрощения расчётов принято приближённое значение 1/6 дюйма;

0.166″

18

0.250″

24

0. 332″

36

0.500″

72 (6 пик)

1.000″

Таблица конвертации пунктов

Связанные темы

Отзыв по этому разделу?

Как рассчитывается размер шрифта? – CodeRoad

Высота-это стандартная мера

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


(источник: banzaimonkey.net )

Шрифты в порядке появления: Times New Roman, Courier New, Calibri, Consolas.

Ширина

Ширина глифов варьируется между шрифтами, как вы можете видеть на изображении выше. Существует также важное различие между пропорциональными и fixed-width шрифтами. Для шрифтов фиксированной ширины пространство, которое каждый символ занимает в строке, точно такое же (хотя сами символы могут быть не совсем одинакового размера. Для пропорциональных шрифтов пространство, которое использует каждый символ, больше соответствует его форме по сравнению с другими символами, поэтому i , j и l обычно узкие , в то время как w, m и o обычно шире.

Шрифты

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

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

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

Проблемы С Калибровкой

Есть некоторые предостережения относительно размеров шрифтов, когда вы имеете дело с вещами в интернете.

Для Интернета

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

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

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

Печати и Пикселей

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

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

Пиксели также относятся к размеру дисплея, поэтому 12px будет другим физическим размером на этих дисплеях:

  • 20″ монитор на 1680х1050
  • 22 ” монитор на 1680×1050
  • iPhone экран
  • Blackberry экран
  • и т. д.

TL;DR

Итак, в общем, все очень сложно. font-size относится к высоте, необходимой для отображения гаммы символов, но в диком и шерстистом интернете всегда есть исключения.

Что такое размер шрифта?

Обновлено: 01.02.2021, Computer Hope

Размер шрифта или Размер текста – это размер символов, отображаемых на экране или напечатанных на странице.

Как измеряется размер шрифта?

Размер шрифта часто составляет пунктов ( пунктов ). Очки определяют высоту надписи. В одном дюйме или 2,54 см примерно 72 (72,272) точки. Например, размер шрифта 72 будет около одного дюйма в высоту, а размер шрифта 36 – около половины дюйма.На изображении показаны примеры размеров шрифта от 6 до 84 пунктов. В вычислениях размеры шрифта также измеряются как пикселей, ( пикселей, ) и пикселей, ( пикселей, ).

Как изменить размер шрифта

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

Совет

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

Почему большинство шрифтов везде маленькие?

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

Размер шрифта в веб-дизайне

В веб-дизайне и CSS размер шрифта изменяется в зависимости от набора заранее определенных размеров шрифта. Некоторые из этих размеров включают xx-small, x-small, small, medium, large, x-large и xx-large. Размер шрифта также можно указать с помощью пунктов «Точка», «Пика», «Дюйм», «Сантиметр», «Миллиметр», «em» и в процентах.

Указание размера шрифта в теге HTML

Пример HTML ниже – это один из способов использования атрибута style в теге абзаца для настройки размера шрифта.

 

Вот пример шрифта 2pt.

Указание размера шрифта в CSS

В приведенном ниже примере кода CSS любой тег h3 на странице будет иметь большой размер шрифта.

 h3 {font-size: large;} 

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

Шрифт, масштабирование шрифта, точка, размер, тип, термины типографики, термины веб-дизайна

Что такое размер шрифта? Определение, размер и значение pt на самом деле

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

Интернет изобилует рекомендациями по размеру шрифта для студентов и других целевых аудиторий.Например, некоторые университеты по-прежнему предписывают, какой шрифт (Times New Roman) и кегль (12 пт) использовать для диссертации, что не обязательно способствует разборчивости диссертации. Многие люди не уверены в размерах шрифтов. И это вполне понятно, учитывая отсутствие лаконичных и понятных рекомендаций по этому поводу. Пора пролить свет на этот вопрос.

Типографские единицы

При работе со шрифтом мы используем не метрическую систему измерения, а типографские единицы. Итак, когда мы говорим о размере шрифта, мы используем не метры и миллиметры, а наименьшую типографскую единицу, и точку , установленную на заре печати и сохранившуюся до наших дней. На протяжении многих лет и столетий применялись разные единицы измерения: точка Дидо, модифицированная версия, основанная на точке Фурнье, долгое время была стандартом в мире типографики. На 0,375 мм это было немного больше, чем сегодняшняя точка PostScript или DTP, которая составляет 0,353 мм .Поэтому, если вы вводите размер шрифта 10 пунктов в Microsoft Word или Adobe InDesign, вы определяете, что ваш шрифт будет иметь размер 3,53 мм. По крайней мере, теоретически.

Что такое размер шрифта?

Давайте сначала определим термин «размер шрифта». Строго говоря, этот термин вводит в заблуждение, поскольку мы не определяем размер шрифта при установке значения точки в InDesign, Word или других приложениях, а указываем высоту основного текста. При ручном наборе высота корпуса определяется высотой грифеля или сорта металла, на котором отлита фактическая поверхность шрифта, печатная поверхность шрифта.Он окружен пустыми или пустыми частями формы буквы, так называемыми счетчиками.

Металлический сорт времен ручного набора

Когда Гутенберг установил шрифт размером 12 пунктов, именно металлический шрифт, а не печатная буква, имела высоту 12 пунктов по вертикали. Следовательно, высота тела обычно больше, чем напечатанный глиф.

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

Шрифт PT Sans установлен в InDesign на 12 пунктов; серый прямоугольник за шрифтом имеет высоту 12 пунктов, что равняется 4,233 мм и соответствует высоте корпуса.

Различные результаты измерений

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

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

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

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

Различный внешний вид

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

Буква имеет разные анатомические особенности. Например, «p» проходит ниже базовой линии, «a» остается посередине, «b» поднимается над средней линией, «E» располагается посередине и вверху, «O» поднимается вверх. еще немного и подчеркнутые столицы выигрывают соревнование по высоте. Это проиллюстрировано на рисунке ниже:

Анатомия шрифта

Помимо формы, ширины линии и ширины букв, решающим для оптического размера в основном является x высота . Высота по оси x – это высота строчных букв в гарнитуре, например «m», «a» или «z». Эта высота отличается от высоты крышки, то есть букв «M», «A» или «Z». Часто буквы имеют соотношение размеров в соответствии с золотым сечением с коэффициентом 1,6, что означает, что «M» в 1,6 раза больше, чем «m».

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

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

Помните: не все шрифты размером 12 пунктов сделаны одинаковыми.В зависимости от шрифта различия могут быть значительными: шрифт размером 12 пунктов может казаться маленьким, как шрифт 8 пунктов, или большим, как шрифт 16 пунктов.

Измерение размера шрифта

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

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

Высота в л.с.

Высота в л.с. является стандартной величиной; он измеряет высоту от верхнего края буквы «h», «b», «d» или «l» до нижнего края «p» или «q». Для этого на большинстве типометров нанесены прямоугольники с печатью. Все, что вам нужно сделать, это найти прямоугольник, который точно соответствует буквам «h» и «p», и вы знаете размер шрифта. Если бы только не было вопроса об использовании другой высоты тела, описанной выше…

Типометр, используемый для измерения размеров шрифта

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

В качестве альтернативы, некоторые дизайнеры работают с высотой крышки, которая измеряет только высоту заглавной буквы без чашек , например, буквы «H» или «M».Но их тоже сложно измерить, особенно в случае курсивных и рукописных шрифтов. Конечно, высота крышки не совпадает с размером пункта, который вы вводите в InDesign и других приложениях. Здесь необходимо указать рост. Таким образом, вы можете рисовать на собственном опыте или знать, где искать, чтобы рассчитать размер шрифта или высоту текста по высоте кепки.

Какой размер шрифта для какой цели?

Учитывая описанную выше ситуацию, вряд ли возможно дать надежные рекомендации по размеру шрифта.Размер легко читаемого шрифта для более длинного основного текста, который используется в журналах и книгах, обычно составляет от 8 до 12 пунктов. Чтобы сузить круг вопросов, вы должны знать, какой шрифт используется для надежного утверждения. То же самое касается визитных карточек или фирменных бланков, для которых одинаково хорошо подходит размер шрифта от 8 до 12 пунктов. Подписи, информация об авторских правах, сноски и аналогичные аннотации могут по-прежнему быть читаемыми в 7 pt. Но это сильно зависит от используемого шрифта и других деталей, таких как длина строки, количество текста или фон.Шрифты размером 6 пунктов обычно требуют от читателя хороших очков или используются для мелкого шрифта в контрактах, которые в любом случае никто не хочет читать.

Вывод: мы знаем, что ничего не знаем.

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

Рекомендации по размеру шрифта для адаптивных веб-сайтов (обновление 2020)

Вы читаете «Размеры шрифтов в дизайне пользовательского интерфейса: полное руководство». Быстро переходите к другим главам: Введение · iOS · Android · Интернет · Принципы

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

Руководство по типографике для мобильных веб-сайтов

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

1.Шрифты основного текста должны быть около 16 пикселей

Понимание того, что разные шрифты могут быть более или менее разборчивыми, даже при точно такого же размера , 16 пикселей – хорошее место для начала при выборе размера мобильного шрифта по умолчанию. Под «по умолчанию» или «основным» я подразумеваю размер, установленный для большинства абзацев, меток, меню и списков. (Предположим, вы уже выбрали шрифт – и у вас есть для этого хорошее обоснование)

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

Один способ добраться:

  1. Начать с 16 пикселей
  2. Рассмотрите возможность уменьшения размера, если у вас (A) есть страница с интенсивным взаимодействием или (B) шрифт с особенно большими, легко читаемыми символами (например, Proxima Nova на изображении выше)
  3. С другой стороны, вы можете быть более либеральными, исследуя размеры больше , чем 16 пикселей, но, в частности, если (A) у вас есть страница с большим количеством текста или (B) шрифт, который особенно трудно читать на заданный размер (как Futura выше)

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

2. Размер вводимого текста должен быть

минимум 16 пикселей

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

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

Видео или этого не произошло, да ?:

Анимация любезно предоставлена ​​лихой Ste Grainer. Вы можете прочитать его статью о феномене автоматического масштабирования здесь.

Это веская причина сделать размер основного шрифта 16px или больше. Может показаться неудобным иметь текст управления формой большего размера, чем текст абзаца ☝️

3. Дополнительный текст должен быть примерно на 2 размера меньше вашего парагафского текста

Для вторичного текста – например, меньших меток, подписей и т. Д. – используйте размер на пару ступеней меньше – например, 13 пикселей или 14 пикселей .Я НЕ рекомендую уменьшать размер шрифта только на один , поскольку в этом случае его слишком легко спутать с обычным текстом. Вдобавок, когда текст менее важен, вы хотите стилизовать его так, чтобы вы четко передавали меньшее значение – часто используя, скажем, более светлый оттенок серого (что-то примерно на 70% ярче – хорошее место для начала. ).

4. Всегда просматривайте свои проекты на реальном устройстве

Золотым стандартом выбора размера мобильного шрифта является просмотра ваших дизайнов на реальном устройстве .Я не могу рекомендовать эту практику в достаточной степени, поскольку ощущение в дизайне мобильного приложения на экране ноутбука на отличается от , когда вы держите его в руке. Как начинающий дизайнер, я был шокирован почти каждый раз, когда открывал на мобильном устройстве страницу, созданную мной на компьютере. Размеры шрифта, интервалы… все было не так. Так что используйте Sketch Mirror или Figma Mirror или любое другое приложение, которое вам подходит, но просматривайте свои проекты на устройстве .

5. Ознакомьтесь со стандартами Material Design и iOS.

Никогда не помешает узнать, что делают крупнейшие дизайн-системы в городе.Например:

  • Размер шрифта по умолчанию в Material Design составляет 16 пикселей Roboto, а размер дополнительного шрифта – 14 пикселей (подробнее о стилях Material Design)
  • Размер шрифта по умолчанию для iOS составляет 17 пикселей SF Pro, а размер дополнительного шрифта – 15 пикселей (подробнее о стилях iOS)

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

Руководство по типографике для настольных компьютеров

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

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

Нужен пример или два? Эта страница – это страница с большим количеством текста. Ваша лента на Facebook – это страница с интенсивным взаимодействием. У каждого свои проблемы, поэтому я буду рассматривать их отдельно. Имейте в виду, что оба варианта, вероятно, будут вам полезны. Страница «О программе» сумасшедшего веб-приложения по-прежнему содержит текста, насыщенного текстом, . Страница «Контакты» в обычном блоге по-прежнему , много взаимодействий .

Полнотекстовые страницы

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

  • 16px – абсолютный минимум для страниц с большим количеством текста
  • 18px – размер шрифта лучше для начала. Вы не печатаете документ Word с одинарным интервалом; вы пишете для людей, сидящих в паре футов от мониторов десятилетней давности.
  • 20px + – сначала может показаться неудобно большим, но всегда стоит попробовать в своем дизайнерском приложении. Самый красивый и насыщенный текстом сайт в сети, Medium.com, по умолчанию имеет размер текста статьи 21 пиксель.

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

Взаимодействие – тяжелые страницы

Теперь для страниц с интенсивным взаимодействием вполне допустимы меньшие размеры текста. Фактически, в зависимости от объема данных, которые ваш пользователь принимает одновременно, даже текст размером 18 пикселей будет неудобно большим. Посмотрите на свой (веб) почтовый ящик, посмотрите твиттер, посмотрите любые приложения, которые вы используете, для которых требуется сканирование , , а не , чтение , посмотрите приложения, которые показывают вам данных – вам будет трудно найти устойчивый абзацы текста размером 18 пикселей.Вместо этого нормой является 14–16 пикселей. Но не будет только одним размером шрифта . Вероятно, будет меньших размеров для менее важных вещей и больших размеров для более важных вещей (заголовки, субтитры, субтитры и т. Д.), И все это будет объединено в гигантский солянка.

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

Например:

  • Имена событий имеют размер 12 пикселей, это стиль шрифта, полностью отсутствующий в рекомендациях по материальному дизайну. Тем не менее, учитывая, что им нужно уместить 7 столбцов на экране шириной всего 1440 пикселей, а многие события довольно короткие, это идеальный выбор размера шрифта. Любое меньшее и страдает разборчивость. Чем больше, тем больше названия событий будут обрезаться слишком часто. Дизайн – это компромисс, малыш. Если вы не можете назвать компромисс, на который идете, вероятно, вы делаете его не в том месте.
  • Ярлыки часов дня («12:00», «13:00» и т. Д.) Имеют размер шрифта: 10 пикселей. Это еще один стиль, полностью отсутствующий в рекомендациях по материальному дизайну. Тем не менее, горизонтальное пространство имеет большое значение. Каждое событие в любом случае помечается временем начала. Почему , а не , делают левые ярлыки меньше?
  • Даты имеют размер 48 пикселей. Опять же, не нашел в рекомендациях по материальному дизайну. В данном случае я не знаю, почему они не использовали 45 пикселей, что – это , официальный размер «Дисплея 2», но я скажу следующее: если бы это был я, я бы, вероятно, сделал размер 48px жирным шрифтом, а здесь жирный шрифт будет проблемой.Это привлекло бы тоже много внимания. Так что я бы все равно изменил стиль.

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

Как можно меньше шрифтов

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

Давайте разберемся:

  1. Размер шрифта заголовка . Это самый большой размер шрифта на вашей странице. Используйте его для заголовка или заголовков разделов. Если у вас есть заголовки и разделов, вы почти наверняка должны использовать здесь два разных размера шрифта.
  2. Размер шрифта по умолчанию . Это наиболее распространенный размер шрифта на вашей странице, и его следует использовать для всего основного текста, а также для большинства элементов управления, таких как текстовые поля, раскрывающиеся списки, кнопки и меню.Основная ошибка в заголовке, которую делают здесь начинающие дизайнеры, заключается в том, что для элементов используется много размеров шрифта, которые все должны быть на один размер шрифта.
  3. Размер дополнительного шрифта . Это размер шрифта – обычно примерно на 2 пункта меньше размера шрифта по умолчанию – который вы используете для менее важных деталей сайта. Вспомогательная информация и статистика, иногда подписи и т. Д.
  4. Третичный / заголовок / метка / размер шрифта подстановочного знака . Очень часто вам понадобится еще один размер шрифта.Иногда это происходит из-за того, что ваша информация настолько иерархична, что вам нужен третичный стиль , даже более сдержанный, чем второстепенный стиль. В других случаях вы можете использовать прописные буквы для меток или кнопок – и из-за увеличенного визуального веса прописных букв вы захотите использовать немного меньший размер для самого текста (помните: балансируйте всплывающее вверх против всплывающего вниз). Итак, этот четвертый размер шрифта является чем-то вроде подстановочного знака. Не каждому дизайну это нужно, но многим это нужно. Мое единственное предупреждение: насколько это возможно, по умолчанию согласованность .

Имеет смысл? Давайте двигаться дальше.

Перейти к главе 4: Принципы и ресурсы

Одна заключительная нота 41

Если вы здесь впервые, возможно, вас заинтересует:

  • Изучите дизайн пользовательского интерфейса, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
  • The Design Newsletter, информационный бюллетень для более чем 40 000 человек с оригинальными статьями по дизайну, цель которых дать вам тактические советы по улучшению ваших навыков UX / UI.

Некоторым людям есть что сказать о новостном бюллетене.

Благодарность за информационный бюллетень по дизайну

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

Триша Литтлфилд
Основатель, TheSimpleWeb

Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт возьми, это чертовски блестяще », и прочитал все это.

Жан-Филипп
Специалист по UX-стратегии, внештатный сотрудник

Подписано более 40 000 человек.
Нет спама. Отпишитесь в любое время.

Размеры, семейства и стили шрифтов

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

Синтаксис для установки размера или стиля шрифта прост:

 Это простой пример, {\ tiny это покажет разные размеры шрифта}, а также \textc {разные стили шрифта}.
 

В этом примере показано, как использовать наименьший из доступных шрифтов ( tiny ) в стиле LaTeX и small caps .

Открыть пример на обороте

Размеры шрифта обозначаются специальными именами, фактический размер не является абсолютным, а зависит от размера шрифта, объявленного в операторе \ documentclass (см. Создание документа в LaTeX).

 В этом примере установлен {\ огромный огромный размер шрифта} и
размер примечания {\ footnotesize также}. Есть довольно
большой набор размеров шрифта.
 

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

Открыть пример на обороте

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

 В этом примере используются команда и переключатели.
\ 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

Стили шрифта

Открыть пример на обороте

Для получения дополнительной информации см .:

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


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

Свойство font-size устанавливает размер текста.

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

Всегда используйте правильные теги HTML, например

для заголовков и

для абзацы.

Значение размера шрифта может быть абсолютный или относительный размер.

Абсолютный размер:

  • Устанавливает указанный размер текста
  • Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
  • Абсолютный размер полезен, когда известен физический размер вывода

Относительный размер:

  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в браузерах

Примечание: Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, например абзацев, составляет 16 пикселей (16 пикселей = 1 em).


Установить размер шрифта с пикселями

Установка размера текста в пикселях дает вам полный контроль над размером текста:

Пример

h2 {
размер шрифта: 40 пикселей;
}

h3 {
размер шрифта: 30 пикселей;
}

p {
font-size: 14px;
}

Попробуй сам ”

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


Установить размер шрифта с помощью Em

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

1em равно текущему размеру шрифта. Размер текста по умолчанию в браузерах: 16 пикселей. Итак, размер 1em по умолчанию составляет 16 пикселей.

Размер может быть рассчитан от пикселей до em по следующей формуле: пикселей /16 = em

Пример

h2 {
font-size: 2.5em; / * 40px / 16 = 2.5em * /
}

h3 {
font-size: 1.875em; / * 30 пикселей / 16 = 1,875 em * /
}

p {
font-size: 0,875em; / * 14px / 16 = 0,875em * /
}

Попробуй сам ”

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

К сожалению, проблема со старыми версиями все еще не устранена. Internet Explorer. Текст становится больше, чем должен когда он сделан больше, и меньше, чем должен, когда сделан меньше.


Используйте комбинацию процентов и Em

Решение, которое работает во всех браузерах, – установить размер шрифта по умолчанию в процент для элемента:

Пример

body {
font-size: 100%;
}

h2 {
font-size: 2.5em;
}

h3 {
font-size: 1,875em;
}

p {
font-size: 0,875em;
}

Попробуй сам ”

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


Размер адаптивного шрифта

Размер текста можно установить с помощью единицы vw , что означает «ширину области просмотра».

Таким образом, размер текста будет соответствовать размеру окна браузера:

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Viewport – это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра 50 см, 1vw составляет 0,5 см.



CSS свойство font-size


Пример

Установите размер шрифта для разных элементов:

div.a {
размер шрифта: 15 пикселей;
}

див.b {
размер шрифта: большой;
}

div.c {
font-size: 150%;
}

Попробуй сам ”

Определение и использование

Свойство font-size устанавливает размер шрифта.


Поддержка браузера

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

Имущество
размер шрифта 1,0 5,5 1,0 1,0 7,0


Синтаксис CSS

размер шрифта: средний | xx-маленький | x-маленький | маленький | большой | x-большой | xx-большой | меньший | больший | длина | начальная | наследование;

Значения собственности

Значение Описание Играй
средний Устанавливает средний размер шрифта. Это значение по умолчанию Играй »
xx малый Устанавливает размер шрифта на xx-small size Играй »
x-маленький Устанавливает очень маленький размер шрифта Играй »
малый Устанавливает малый размер шрифта Играй »
большой Устанавливает большой размер шрифта Играй »
x-большой Устанавливает очень большой размер шрифта Играй »
xx большой Устанавливает размер шрифта в xx-большой размер Играй »
меньше Устанавливает размер шрифта меньшего размера, чем родительский элемент Играй »
больше Устанавливает размер шрифта больше, чем у родительского элемента Играй »
длина Устанавливает фиксированный размер шрифта в пикселях, см и т. Д.Подробнее о единицах длины Играй »
% Устанавливает размер шрифта в процентах от размера шрифта родительского элемента Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальных Играй »
наследовать Наследует это свойство от своего родительского элемента.Читать о наследовать

Связанные страницы

Учебник

CSS: шрифты CSS

Ссылка CSS: свойство шрифта

Ссылка

HTML DOM: fontSize свойство



Увеличьте размер шрифта и вместе с ним увеличьте SEO и RPM

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

Увеличение размера шрифта.

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

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

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

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

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

Пять наиболее распространенных единиц измерения, которые вы увидите:

  1. балл (пт)
  2. пикселей (px)
  3. выс.
  4. рем
  5. процентов

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

Но сначала оговорка: точки НЕ равны пикселям.

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

Общее практическое правило заключается в том, что 12 pt будет равняться 16 пикселям на большинстве устройств, но – не все .

Теперь перейдем к элементам из приведенного выше списка, с которыми вы, вероятно, не знакомы: rem, em и проценты.Все эти три будут «относительными» размерами шрифта.

Несмотря на то, что они являются более продвинутыми, они обычно считаются предпочтительным методом в адаптивном веб-дизайне, поэтому есть вероятность, что ваша тема или дизайн их используют.

Все они относятся к базовому шрифту, обычно 12pt или 16px на большинстве устройств; Если вы установите 1em, 1rem или 100%, то теоретически это то же самое, что выбрать 12pt или 16px для большинства устройств.

Это позволяет вам легко определять заголовки, списки и другие элементы относительно основного текста вашего текста.Например, вы можете установить заголовки на 150% или 1,5 мкм, что сделает их на 50% больше.

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

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

Все это говорит о том, какие размеры шрифтов лучше всего подходят для повышения SEO и RPM?

Увеличение размера шрифта для SEO (и читателей тоже)

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

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

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

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

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

Вот почему инструмент Google Lighthouse измеряет размер шрифта, который является одним из основных компонентов определения удобства вашего сайта для мобильных устройств, при расчете вашей SEO-оценки.

Инструмент Lighthouse недавно немного изменил свои собственные рекомендации, но установил 16 пикселей в качестве базового шрифта сайта. Это означает, что основной текст вашего шрифта должен быть установлен минимум на 16 пикселей.

Фактически, именно здесь руководство по стилю Google Material Design также устанавливает базовый размер шрифта в типографике. Итак, для SEO вам понадобится шрифт размером не менее 16 пикселей, чтобы ваш сайт считался оптимизированным для мобильных устройств, что имеет решающее значение для индекса, ориентированного на мобильные устройства.

Увеличение размера шрифта и его влияние на частоту вращения

Хорошо, Google доволен размером 16 пикселей. Мы все?

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

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

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

Итак, каков идеальный размер шрифта для монетизации?

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

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

Это может показаться большим числом, но помните, где ваша аудитория читает, и что это не шрифт 18pt ; 18px на самом деле все еще довольно мало на мобильном устройстве.

Можете ли вы пойти еще дальше?

Совершенно верно.

Мы видели, что многие сайты очень хорошо работают с большим размером шрифта. Эми из Shugary Sweets и Кортни из Sweet Cs обсуждали это во время прямой трансляции в Facebook, которую они проводили с нами прошлым летом.

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

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

Где вы вносите эти изменения?

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

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

Если вам нужно сделать это самостоятельно, вам потребуется отредактировать CSS.Ниже вы можете настроить размер шрифта с помощью небольшого CSS, который изменит ваш h2 (теги заголовка) и размер шрифта тела следующим образом:

body {
font-size: 18px;
}

h2 {
font-size: 24px;
}

Тем не менее, обратите внимание, что в тему так много всего.

В таблице стилей задаются высота строк, кернинг символов и шрифты.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *