Шрифт пиксели: px, em, rem и другие

alexxlab
Разное |

Содержание

font-size | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

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

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

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

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSSxx-smallx-smallsmallmediumlargex-largexx-large 
HTML1 234567

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-size</title>
  <style>
   h2 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */ 
    font-size: 250%; /* Размер шрифта в процентах */ 
   } 
   p {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11pt; /* Размер шрифта в пунктах */ 
   }
  </style>
 </head> 
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(«elementID»).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Font size бесполезен, давайте это исправим / Хабр

Что происходит, когда вы указываете в редакторе

"font_size": 32

? Я бы вам всё равно рассказал, но хорошо, что спросили.

Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:

Если мы измерим сами буквы, то нигде не найдём числа 32:

32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела?

Во-первых, это размер не в пикселях, а в пунктах. Пункт — физическая единица измерения, равная 1⁄72 дюйма (0,353 мм), она берёт начало из типографики.

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

На практике никто этого не делает. Вместо этого для преобразования пунктов в пиксели macOS всегда использует 72 PPI (points per inch, пункты на дюйм). Если вывести macOS на 32-дюймовый и на 24-дюймовый мониторы с одинаковым разрешением 1080p, то мы получим одинаковый размер в пикселях, а не физический размер, что разрушает весь смысл исходной идеи.

Почему число 72? Оказывается, в первых Mac использовались дисплеи с разрешением изображения ровно 72 PPI. Если просматривать на них текст, то его физический размер на экране совпадёт с физическим размером при печати. Удобно! Разумеется, с тех пор разрешение PPI дисплеев Mac повысилось, но традиция сохранилась.

В духе истинного сотрудничества, Windows использует не 72, а 96 PPI. Почему не 72? Не потому, что у компьютеров были дисплеи получше (это не так), а потому, что 72 давали слишком мало пикселей для рендеринга читаемого текста. Поэтому проектировщики решили: почему бы не сделать всё на ⅓ крупнее?

Так они и поступили. Этот стандарт сохраняется и по сей день: текст размером 16 pt в Windows на ⅓ крупнее, чем текст 16 pt в macOS. Весело!


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

P.S. Похоже, VS Code берёт значение editor.fontSize напрямую в пикселях. Отличное начало!

То есть пользователь, запрашивающий шрифт 32 pt, на самом деле требует 32 пикселя (px) в macOS и 43 px в Windows. Но эти числа всё равно нигде не встречаются.

Так происходит, потому что font-size задаёт так называемый размер «em».

В традиционной печати металлическими литерами размер em — это высота литеры символа (её кегль).

Почему высота называется «размером em»? Потому что так совпало, что буква «m» имеет квадратные размеры, а ширина «m» == высоте литеры символа == размеру em. Всё просто!


Источник изображения

Однако в цифровой типографике «квадрат em» — это (цитата из Википедии):

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

То есть если я открою свой шрифт Fira Code и начерчу em square, то он

не будет вообще ничему соответствовать

:

Если вкратце, этот квадрат и есть то

чем вы управляете

при задании размера шрифта. Если задать размер шрифта 32 pt, то этот квадрат будет иметь ширину/высоту 32/43 px. К сожалению, он невидим и ему не соответствует ни один элемент шрифта.

Когда я говорил, что em size совершенно произволен и не связан ни с чем в шрифте, это не было преувеличением. Он действительно не связан!

Это означает, что если задать разным шрифтам одинаковый размер, то внешне их размер может значительно различаться. Например, если сопоставить em square (то есть задать одинаковый размер шрифта) двух разных шрифтов, то мы получим очень разную высоту «m»:

Ещё один пример. Все эти шрифты имеют одинаковый размер — 22 pt:

Я считаю, что размер шрифта обладает следующими проблемами:

  • Непредсказуемость: невозможно угадать, что ты получишь. 16 pt — это сколько пикселей?
  • Непрактичность: невозможно получить то, чего хочешь. Хочешь, чтобы буквы были высотой 13 пикселей? Не получится.
  • Нестабильность. Переключаемся на другой шрифт, оставляем тот же размер, получаем более крупные/мелкие буквы.
  • Зависимость от ОС. Получаем разный рендеринг при открытии документа на разных ОС. Нельзя использовать одинаковые конфигурации редактора в macOS и Windows.


  • Указывать высоту прописных букв, а не размер em square.
  • Указывать её в пикселях.

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

их

размером, а не какой-то произвольно выбранной метрикой:

Вот несколько шрифтов, для которых задан одинаковый размер шрифта:

А вот те же шрифты, но с размерами, подогнанными под высоту прописных букв:

На мой взгляд, последний вариант обеспечивает гораздо большую целостность. Например, взгляните на Cascadia и Consolas. Или Hack и IBM Plex Mono. Или Ubuntu Mono и Victor Mono (два последних шрифта).

Если уж мы начали говорить об этом, то почему бы не исправить и высоту строки? Не волнуйтесь, это будет быстро.

Во-первых, очевидно, что отсутствует консенсус. Каждый делает что-то своё:

Почему? Проблема высоты строки в том, что она вычисляется по тем же абстрактным границам символа:

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

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

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

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

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

Что же нам делать? Разумно было бы задавать высоту строки непосредственно в пикселях, игнорируя все метрики шрифтов. Или же как процент от высоты прописных букв, но совершенно точно не через font-size или «автоматическую» высоту строки!

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

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

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

Подведём итог: вот что есть сейчас — при изменении шрифта мы получаем случайную высоту строки:

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

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

То, чего я пытаюсь достичь всеми этими предложениями, легко показать на одном примере:

  1. Я один раз задаю в своём редакторе нужные мне размер шрифта и высоту строки.
  2. Я могу попробовать разные шрифты.
  3. Мне не нужно перенастраивать размер шрифта и высоту строки каждый раз, когда я меняю шрифт.

Примерно так (высота прописных букв и высота строки в точности совпадают):

Интерфейс моей мечты:

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

Это всегда было проблемой для веба, но недавно эту болезнь подхватила и macOS:

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


Getting to the bottom of line height in Figma

. Приключения Figma в поисках компромисса между тем, что нужно людям и что делает веб.

Deep dive CSS: font metrics, line-height and vertical-align. Превосходная статья, демонстрирующая, как конкретно работает алгоритм высоты линии шрифтов и CSS. Кроме того, обратите внимание, что я не единственный человек с ужасным цветом фона на веб-сайте.

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

Leading-Trim: The Future of Digital Typesetting. О том, как leading-trim (то есть примерно то же, что и высота прописных букв) может упростить жизнь каждого.


На правах рекламы

VDS для размещения сайтов

— это про наши

эпичные

! Все серверы «из коробки» защищены от DDoS-атак, скорость интернет-канала 500 Мегабит, автоматическая установка удобной панели управления VestaCP для размещения сайтов. Лучше один раз попробовать 😉

Интересные особенности типографики в Figma — UXPUB

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

Эффективная работа с типографикой в Figma

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

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

Если вы хотите перейти непосредственно к деталям, вы можете прочитать их в этом посте или в справке. Или вы можете остаться и прочитать эту статью об истории и современном положении шрифтов. Мы будем общаться с создателями CSS, прольем слезу по OS/2 и, надеюсь, лучше поймем все изменения, происходящие с Figma сегодня.

Первые века вёрстки

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

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

Вам нужно было купить один или несколько таких блоков для каждой буквы. Вам также нужно было купить дополнительные металлические блоки для текста разного размера. Но размер шрифта не определялся размером букв – это была высота металлического блока, содержащего их, выраженная в единице, известной как точка (каждая точка была 1/72 дюйма, или около 0,4 мм). Высота блока была известна, но внутри него дизайнер-шрифтовик мог делать все, что хотел: шрифты одного размера могли быть больше или меньше, их базовая линия (линия, на которой «сидит» каждая буква) размещалась выше или ниже и т. д.

Четыре металлических шрифта с одинаковым размером шрифта 16pt. Обратите внимание, что некоторые шрифты занимают больше места, чем другие, и базовые линии везде разные

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

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

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

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

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

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

Это была относительно простая система с четко определенными ролями и правилами. Шрифт приходил от литейного цеха в виде монолитного неизменяемого блока, а высоту строки можно было только добавить, но не уменьшить. Да, вы могли заказать встроенный шрифт с нестандартной высотой строки, но это было необычно. (Любой такой шрифт получал обескураживающее название – «шрифт-бастард», ориг. – bastard type). Ваша работа заключалась в том, чтобы сложить блоки и разместить их так, как вам хочется.

С пикселями пришли проблемы

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

Шрифты больше не были сплошными свинцовыми блоками; вместо этого они принесли с собой наборы чисел, упакованных в файлы. Дизайнер-шрифтовик или литейщик шрифтов также должны были подготовить свои шрифты в различных форматах файлов в соответствии с требованиями ранних графических платформ – Windows, Macintosh и забытой в настоящее время OS/2. (К тому же, рендеринг шрифтов на определенной платформе иногда был странным или глючным, и шрифтолитейные цеха тоже должны были к этому приспособиться).

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

Добавление и удаление лидинга

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

Четыре цифровых шрифта с размером шрифта 16pt и высотой строки 100% (по умолчанию)

Но, чтобы привыкнуть к вновь обретенным свободам потребовалось некоторое время. Ранние графические программы, такие как Photoshop или QuarkXPress, все еще использовались для проектирования бумажных проектов, где вы имели абсолютный контроль над шрифтами и могли с высокой точностью все измерять и позиционировать. В результате они руководствовались теми же принципами и тем же словарем, что и печатная типографика. Например, дизайнер, использующий Photoshop, по-прежнему должен указать шрифт 16pt, а затем добавить 4 точки для лидинга.

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

Другие программы делали это немного по-другому. Иногда вместо лидинга они спрашивают вас о высоте линии (в данном случае 20 точек). Или вместо этого вы можете сказать: «Я хочу, чтобы высота линии составляла 100%», и это означало бы высоту линии шрифта по умолчанию, указанную дизайнером цифровых шрифтов, которая может составлять 16 точек, 20 точек или любое другое значение.

Лидинг в дизайн-программе

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

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

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

Шрифт P22 Johnston Underground с тремя разными наборами встроенных метрик, в зависимости от платформы

Эра интернета

Затем в 1989 году появился Интернет – и проблемы усугубились.

Люди, собирающие строительные блоки раннего Интернета, приняли два решения, которые изменили природу высоты строки. Во-первых, они распределили дополнительное пространство, которое когда-то было полосой свинца, над и под каждой строкой. Они назвали новую систему «half-leading».

Лидинг на экранах (слева) и half-leading в Интернете (справа)

Я обратился к создателям CSS, чтобы понять причину этих изменений. Они объяснили мне, что, хотя ранние предложения по созданию таблиц веб-стилей соответствовали миру печати, у них были веские причины для того, чтобы принять решение создать half-leading. А именно, у текстовых полей в Интеренете было больше обязанностей.

В мире печати или ранних программ, текстовое поле должно было содержать внутри себя только текст. Интернет просил большего. «Я знал, что half-leading не был традиционным концептом типографики», – отметил Берт Бос, работавший над CSS1 в 1995 и 1996 годах. «Но у меня возникла проблема с добавлением лидинга только под строкой, когда вы помещаете фон позади нее или границу вокруг нее».

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

Другое изменение, добавленное CSS? Высота строки 100% была переопределена, как «100% размера шрифта». Ранее дизайнер шрифтов мог назначить 16-пиксельному шрифту высоту строки по умолчанию, равную 20 пикселям. Но в Интернете 100% -ая высота строки 16-пиксельного шрифта составит ровно 16 пикселей, независимо от того, что предписывал оригинальный дизайнер.

Причина этого изменения была проста: знание высоты строки шрифта по умолчанию требовало загрузки этого шрифта, что могло быть очень медленным на заре Интернета. Умножение высоты строки на размер шрифта, с другой стороны, может быть сделано немедленно. «Мы хотели сделать как можно больше вычислений, не загружая шрифт», – отметил Хокон Виум Ли, один из создателей CSS. Высота строки больше не понимала шрифт внутри. К счастью, шрифты не должны вписываться в физические рамки, так что это не было большой проблемой.

Посмотрите на разнообразие в четырех цифровых шрифтах с размером шрифта 16pt и высотой строки 100% в Интернете

Тот же шрифт, что и раньше, имел бы размер 16 пикселей, но высота строки 20 пикселей теперь будет выражаться как 125% или 1,25, поскольку 16 × 1,25 дает ровно 20. (Традиционные 100% сохранились в одном конкретном случае, как line-height: normal).

(Half-)leading может быть выражен в CSS тремя способами

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

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

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

За несколько коротких десятилетий изобретение Тима Бернерса-Ли вышло за пределы чьего-либо воображения. Но сеть не захватила весь мир. Настольные приложения превратились в нативные приложения для iOS и Android – и они продолжали смотреть на шрифты с точки зрения печати.

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

Еще молодая цифровая типографика быстро накопила свои причуды и проблемы. В мире клавиатур есть шутка: «Почему эта клавиша расположена в таком странном месте на клавиатуре? Потому что так было на клавиатуре до этого». То же самое относится и к типографике.

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

Конечный результат? Больше не было единого восприятия шрифтов.

Изменения в Figma

Этот мир, со всеми особенностями и проблемами высоты строки, вероятно, не тот, который мы бы выбрали для наследования при запуске Figma  ;). Однако, у нас не было выбора. И, вдобавок ко всем ранее упомянутым проблемам, у Figma были свои уникальные особенности:

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

Больше нет единого восприятия шрифтов … и все же Figma должна думать о шрифтах единым способом. Мы не можем по-разному рендерить шрифты на разных платформах, потому что это может создать проблемы для людей, совместно работающих над одним файлом. Мы хотели поддержать проектирование для iOS устройств в веб-браузере Chromebook или приложений Android на Mac, но нам не хотелось делать набор переключателей для интерфейса Figma под разные платформы. Нам нужно было создать удобный, функциональный интерфейс, но мы также понимали, что часто конечный результат работы в Figma находится в другом месте, например, в CSS или исходном коде.

Чтобы достичь всех своих целей, Figma должна взять на себя ответственность за все пространство – интерпретировать файлы шрифтов, принимать решения, ранее зарезервированные для платформ и браузеров, и сужать пространство дизайн-решений

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

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

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

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

Мастер-файл Figma со всеми нашими исследованиями по высоте строки

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

1. Распределение по высоте строки

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

2. Обработка последующих строк

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

3. Процент размера шрифта

Высота строки 100% теперь означает «100% размера шрифта», а не «100% высоты строки шрифта по умолчанию». Это должно упростить вычисления и соответствовать тому, как большинство людей думают об этом значении.

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

4. Высота строки в пикселях

Кстати, о пикселях… отныне, когда вы скажете: «Я хочу, чтобы высота строки была 20 пикселей», мы будем более настойчиво соблюдать это – даже когда Интернет не будет этого делать (высота строки в CSS на самом деле минимальная высота строки). Мы наблюдали, как люди используют определенные значения высоты строки для выравнивания, и мы хотим это учитывать.

  1. ?❤️✏️

Мы также наблюдали, как люди (и мы сами) раздражаемся, когда, вставляя эмодзи, растягиваем высоту строки и нарушаем ритм текста. Теперь, если вы разбавите текст эмодзи, мы больше не будем расширять строку.

Взаимодействия между эмодзи и текстом заслуживают отдельной книги!

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

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

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

Последняя буква в строке имеет дополнительный межбуквенный интервал, Figma теперь будет игнорировать это. Это отличается от Интернета / CSS, но это должно упростить центрирование текста.

Нет единственно верного восприятия шрифтов, но мы считаем – что это лучший способ. Он должен решить больше актуальных проблем, чем наш предыдущий подход, и, насколько нам известно, не должен ничего усложнять. Теперь на панели «Код» мы выводим больше информации, которая должна помочь в переходе от проектирования к разработке.

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

Как показывают эти примеры, вертикальное выравнивание может означать много разных вещей

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

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

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

Все ведет к этому

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

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

Мы будем продолжать работать над шрифтами Figma и улучшать их, и я надеюсь, что вы продолжите помогать нам в этом. Пишите нам в Twitter или на почту [email protected].

Скоро будут еще более интересные новости о шрифтах. Жду не дождусь, чтобы поделиться ими.

Как в фотошопе увеличить шрифт больше 72


Как увеличить текст в Фотошопе


Перед новичками Фотошопа довольно часто встает вопрос: как увеличить размер текста (шрифта) больше предлагаемых программой 72 пикселей? Как быть, если требуется кегль, к примеру, 200 или 500?

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

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

На самом деле, Фотошоп позволяет увеличивать размер шрифта до 1296 пунктов, и для этого имеется стандартная функция. Собственно, это не одна функция, а целая палитра настроек шрифтов. Вызывается она из меню «Окно» и называется «Символ» .

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

Для изменения размера нужно поставить курсор в поле с цифрами и ввести требуемое значение.

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

1. Находясь на текстовом слое, нажимаем сочетание клавиш CTRL+T и обращаем внимание на верхнюю панель настроек. Там мы видим два поля: Ширина и Высота.

2. Вносим в первое поле необходимое значение в процентах и нажимаем на значок цепочки. Второе поле заполнится автоматически теми же цифрами.

Таким образом мы увеличили шрифт ровно в два раза.

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

Теперь Вы знаете, как увеличивать текст и создавать огромные надписи в Фотошопе.

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ

Как увеличить текст в Фотошопе

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

Но сегодня мы ответим на один из самых простых вопросов: “как увеличить размер шрифта в Photoshop?”. Особенно этот урок будет полезен пользователям, которые хотят установить шрифт на отметке больше 72-ух пунктов, т.к. в стандартной выборке максимальная отметка – 72.

Как увеличить размер шрифта

В программе есть возможность увеличить размер текста (шрифта) до максимальных 1296 пунктов. И сделать это достаточно просто. Нужно лишь следовать инструкциям и внимательно смотреть на наши скриншоты.

Давайте начнем. Нам нужно выбрать в верхнем меню “Окно”, а затем кликнуть на “Символ”.

Появится палитра “Символ”, в которой мы сможем задать желаемые настройки для шрифта. Как видно на скриншоте, настроек немало, но нас интересует лишь изменение размера текста. Сейчас там стоит цифра 80 пт:

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

Это уже практически максимальное значение (макс: 1296 пт), но мы все равно можем масштабировать шрифт. Мы покажем вам как это нужно делать профессионально, а не увеличивая размер самого холста и т.д., как это делают новички. “Поехали”:

  1. Выберите нужный слой с текстом, а затем нажмите на горячие клавиши CTRL+T. Вы заметите, что под верхним меню появится панель настроек нужными нам полями “Ширина” и “Высота”.
  2. Мы хотим увеличить ширину и высоту на 150% (вы можете выбрать любое другое значение), поэтому в поле “Ш” вводим это число. Далее, рядом с шириной есть значок цепочки, на который необходимо нажать, чтобы сохранить пропорции шрифта и получить автозаполнение “Высоты”. См. скриншот ниже:

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

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

До встречи в наших следующих уроках.

Как исправить проблемы с размером шрифта в Photoshop

Автор Белов Олег На чтение 4 мин. Просмотров 750 Опубликовано

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

Как исправить мелкий шрифт в Adobe Photoshop


  • Выберите опцию сброса символов
  • Обновить фотошоп
  • Переключите Единицы Типа в Пиксели
  • Отмените выбор параметра Resample Image
  • Отрегулируйте текст в режиме свободного преобразования
  • Изменить шрифт изображения
  • Очистить кэш шрифтов Windows
Выберите опцию сброса символов

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

Обновить фотошоп

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

Переключите Единицы Типа в Пиксели

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

  • Откройте меню Изменить в Photoshop и выберите Настройки , чтобы развернуть подменю.
  • Выберите Юниты и линейки в подменю, чтобы открыть окно, показанное ниже.
  • Выберите пикселей в раскрывающемся меню Тип.
  • Нажмите кнопку ОК , чтобы применить новые настройки.
Отмените выбор параметра Resample Image

  • Отмена выбора параметра Resample Image в Adobe Photoshop также может исправить проблемы с размером шрифта. Для этого нажмите Изображение и Изменить размер в Photoshop.
  • Выберите Изменение размера изображения , чтобы открыть окно непосредственно под ним.
  • Снимите флажок Resample Image , если выбран этот параметр.
  • Введите точные размеры изображения в полях Ширина и Высота. Вы можете найти сведения об измерении изображения, щелкнув правой кнопкой мыши файл в проводнике и выбрав Свойства > Подробности .
  • Нажмите ОК , чтобы закрыть окно.
  • Теперь выберите текстовое поле на вашем изображении и отрегулируйте размер шрифта.
Отрегулируйте текст в режиме свободного преобразования

Если на увеличенном изображении шрифт кажется крошечным, может пригодиться инструмент Free Transform Mode. Это инструмент, с помощью которого вы можете изменять размер текста, расширяя ограничивающий прямоугольник. После ввода текста с помощью инструмента горизонтального ввода нажмите сочетание клавиш Ctrl + T. Удерживайте клавишу Shift и левую кнопку мыши, чтобы изменить размер шрифта, перетаскивая границу ограничительной рамки курсором.

  • ЧИТАЙТЕ ТАКЖЕ . Как исправить сбои Photoshop при печати в Windows 10
Изменить шрифт изображения

Есть несколько шрифтов, которые не очень хорошо работают в Photoshop. Это шрифты Zippy, SF Tattle Tales Condensed, ZEROGEBI, JH_TITLES, GURAKH_S, SCREEN, SEVESBRG и 21kannmbn. Если ваше изображение содержит один из этих шрифтов, выделите текст и выберите альтернативный шрифт.

Очистить кэш шрифтов Windows

Очистка кэша шрифтов Windows – эффективное общее решение проблем со шрифтами в Photoshop. Вы можете стереть системный шрифт, открыв Проводник.

  • Затем откройте этот путь к папке в проводнике: C:> Windows> ServiceProfiles> LocalService> Appdata> Local .
  • Затем щелкните правой кнопкой мыши файл * FNTCACHE * .DAT или * FontCache * .dat и выберите Удалить .
  • Вы также можете перейти в Пользователи> [имя пользователя]> AppData> Роуминг> Adobe> Adobe Photoshop CC, CC 2014 или CC 2015 в проводнике, чтобы очистить кэш шрифтов в Photoshop.
  • Нажмите правой кнопкой мыши на папку CT Font Cache и выберите Удалить , чтобы стереть ее.

Это несколько решений, которые могут исправить проблемы с размером шрифта в Photoshop. Вы также можете проверить и восстановить поврежденные шрифты с помощью программного обеспечения, такого как FontDoctor, которое продается по цене 69,99 долларов США на этой странице веб-сайта.

Как изменить размер шрифта меню фотошопа?

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

Редактирование – Установки – Интерфейс

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

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

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

Для начала оценим меню и заголовки. Стрелочками я указал, что изменилось.

(Кликните, чтобы увеличить)

Как видите: главное меню, выпадающий список команд и всплывающие подсказки — изменения не затронули. А вот названия файла во вкладке, настройки на панели параметров, а также заголовок палитры и сопутствующие настройки внутри панели — изменились.

Теперь откроем какое-нибудь диалоговое окно и посмотрим каких размеров стал в них текст.

(Кликните, чтобы увеличить)

Как видите разница очевидная. Размер текста даже повлиял на величину самого диалогового окна.

Еще раз обратите внимание, что все изменения вступают в силу только после перезагрузки программы фотошоп!

Это все, других возможностей повлиять на размер шрифта в фотошопе не существует. Довольствуемся тем, что есть.