Типография дизайна материалов – заголовки, заголовки, интервал, текстовое оформление

Я слежу за официальными руководствами по дизайну материалов ( http://www.google.com/design/spec/style/typography.html ) в типографике, но я считаю, что их совсем не хватает. Например, они перечисляют 10 стилей, которые вы должны использовать для таких вещей, как текст тела, подзаголовок, заголовок, заголовок display1, display2 и т. Д. Введите текст в приложении … Это приводит меня к первой проблеме.

Проблема №1: Как узнать, что такое «подзаголовок», или «заголовок» против «заголовка», или когда нужно использовать «display1», а не «display4», существуют ли стандарты для этих элементов?

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

Проблема 2 #: Как я могу добавить «ведущее» пространство для текста в Android, является ли это рекомендацией для Android?

Проблема №3: ​​Хотя я загрузил последнюю версию Roboto, мои средние шрифты выглядят абсолютно смелыми, в отличие от элегантных и слегка толстых средних шрифтов Google, как я могу подтвердить, что мой шрифт действительно отличается от Google?

большое спасибо

Solutions Collecting From Web of "Типография дизайна материалов – заголовки, заголовки, интервал, текстовое оформление"

«Покажите мне код»: не мой, но см. Комментарий ниже для одного варианта, а также то, как приложение Plaid (Butcher) приложило квитанцию ​​о типографиях, посетив его источник в Github (класс BaselineGridTextView ).

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

Проблема №1: Как узнать, что такое «подзаголовок», или «заголовок» против «заголовка», или когда нужно использовать «display1», а не «display4», существуют ли стандарты для этих элементов?

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

  • Дисплей : большой текст, обычно используемый на плакатах, привлекательные лозунги, вещи, которые требуют и конкурируют за внимание, которые должны привлекать внимание, когда пользователь не смотрит. Он менее читабельен именно потому, что он должен быть очень коротким (сразу привлечь внимание, а не часть обширного потока). Я полагаю, что 4 разных размера дисплея в Material Design – это дополнительная забота от Matias и его команды, но я сомневаюсь, что приложения будут использовать более одного размера дисплея (возможно, журналы и мультимедийное приложение, возможно). В большинстве приложений даже не будет отображаться размер дисплея.
  • Заголовок : традиционно, я считаю, если мое мелкое понимание этого вопроса верное, размеры заголовка используются как короткие лозунги истории. Не описание, просто слоган, короткое сообщение. Пример заголовка: ASSASSIN KILLS KENNEDY . В обычных приложениях, следующих за Material Design, он используется как основной объект экрана (точно так же, как страницы газеты) . Я думаю (как не уверен), что это можно назвать «заголовком» в другом месте.
  • Название : честно говоря, очень общий, и из-за его скромного размера (по сравнению с заголовком и дисплеем), это один из стилей, который я использую больше всего: он очень полезен в местах над блоком текста. Например, «Eula» в качестве названия для текста eula, который следует за этим названием, или «Авторы» непосредственно перед списком авторов. Он широко используется в рамках .
  • Подзаголовок: это более конкретно. Это немедленная, уступающая степени «заголовку» и используется для предоставления выдержек, цитат или краткого описания текстового блока, который следует за ним. Пример подзаголовка (следуя примеру заголовка): губернатор Техаса Раунд, марксист, обвиняемый в убийстве . В Material Design, из-за размера, наиболее распространенное место, которое я видел в нем, находится в элементе списка элементов , именно потому, что оно используется как отрывок из письма (для предоставления обзора) или как номер телефона ( Деталь наиболее важного актива для конкретного человека в списке телефонов).
  • Тело : основной текст. Довольно очевидно. Самый читаемый из них, и единственный вариант для длинных текстов.
  • Надпись : сноски и небольшой текст. В печати он широко используется как титры изображений. В Holo я думаю (как и не уверен) он использовался как текст разделителя (но во всех шапках). В Material Design я думаю, что разделители перестали использовать текст подписи и использовать «тело» со светлым цветом.

Другие программы используют эти (часть или все) концепции со слегка вариациями:

  • Текстовые стили текстовых процессоров;
  • Настройки шрифтов в программном обеспечении изображений, таких как Photoshop, Illustrator и т. Д.
  • Оптический размер шрифтов. Например, Adobe использует «подписи», «регулярные», «подзаголовки» и «показ» , которые, как вы можете видеть, предназначены для дополнения размеров и ведения шрифтов, особенно с учетом различных размеров;

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

Проблема 2 #: Как я могу добавить «ведущее» пространство для текста в Android,

Это касается тех мест, где вы смешиваете TextView с разными стилями, например, в примере изображения (или с текстовыми проходами, конечно).

Позвольте мне быть честным: прямо сейчас, для чрезвычайных целей, я использую свои глаза с наложенными сетками, чтобы проверить мое лидерство. Я начинаю с ведущего размера, затем я вычитаю размер шрифта следующей текстовой строки и некоторую небольшую сумму как descender текущей строки. Затем я делаю небольшие небольшие оптические настройки, если это необходимо. Было бы неплохо, если бы эти элементы (высота x, высота крышки, descender и т. Д.) Могли быть рассчитаны точно , но я, честно говоря, еще не погрузился в это (но это, вероятно, возможно). Я доволен своим «глазным прибором», в то время как я не совершенствую MD в своих макетах.

Однако, и я просто посмотрел на это (не пробовал), я считаю, что вы можете погрузиться в FontMetrics , измерить поля и применить правильные размеры «на лету» между двумя показанными выше TextView . Я бы попробовал это первым ( ascent на следующий и descent предыдущего).

Это руководство для Android?

Да. Очень. Поместите текст под другим, когда у них разные стили. Как название, за которым следует тело, и попытайтесь просто угадать: это не сработает, и ваше приложение не будет соответствовать системе. См. Выше.

Проблема №3: ​​Хотя я загрузил последнюю версию Roboto, мои средние шрифты выглядят абсолютно смелыми, в отличие от элегантных и слегка толстых средних шрифтов Google, как я могу подтвердить, что мой шрифт действительно отличается от Google?

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

Вы можете проверить шрифты в папке sdk / platform / android- APIVERSION / data / fonts . Рендеринг с Ubuntu 15.04 (небольшая подсказка), из коробки, с Android-22 :

Roboto black

Робото смелый

Среда Робото

Робото

Свет Робото

Робото тонкий

Я думаю, что это соответствует образцу .

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

Ubuntu регулярно

Среда Ubuntu

Ubuntu bold

Minion Pro (обычный, средний, полужирный и полужирный). Он более равномерно взвешен, возможно, потому что он также предлагает полужирный вариант, но мы говорим о шрифте с засечками, сделанном для мелкой печати, и с гораздо большим количеством времени на рынке, который постоянно совершенствуется:

Minion Pro регулярно

Minion Pro medium

Minion Pro полужирный

Minion Pro bold

Надеюсь, это поможет.