Шрифтовое оформление — Mixed Reality
- Статья
Текст является важным элементом для предоставления информации в интерфейсе приложения. Как и в случае с оформлением на двухмерных экранах, ваша цель — предоставить понятную и удобочитаемую информацию. С трехмерным аспектом смешанной реальности есть возможность повлиять на текст и общий пользовательский интерфейс еще более широкий способ.
Когда мы говорим о типе в трехмерном формате, мы, как правило, думаем, экструдированный объемный трехмерный текст. За исключением некоторых конструкций логотипов и нескольких других ограниченных приложений, экструдированный текст, как правило, снижает удобочитаемость текста.
В HoloLens тип создается с голограммами с использованием света на основе аддитивной цветовой системы. Как и другие голограммы, тип можно поместить в фактическую среду, где ее можно заблокировать и наблюдать с любого угла. Эффект параллакса между типом и средой также добавляет глубину в интерфейс.
Типография в смешанной реальности
Типографические правила в смешанной реальности ничем не отличаются от других. Текст как в физическом мире, так и в виртуальном мире должен быть понятным и удобочитаемым. Текст может находиться на стене или накладываться на физический объект. Он может быть плавающим вместе с цифровым пользовательским интерфейсом. Независимо от контекста мы применяем те же правила типографии для чтения и распознавания.
Создание четкой иерархии
Создавайте контрастность и иерархию с помощью различных размеров и весов типов.
Определение пандуса типа и его следование во всем интерфейсе приложения обеспечит отличный пользовательский интерфейс с согласованной информационной иерархией.
Определите типы и следуйте инструкциям на протяжении всего процесса приложения.
Ограничение шрифтов
Избегайте использования нескольких разных семейств шрифтов в одном контексте. Слишком много шрифтов нарушает гармонию и согласованность вашего опыта и затрудняет использование информации. В HoloLens, так как информация накладывается на физическую среду, использование слишком большого количества стилей шрифтов приведет к снижению производительности. Segoe UI — это шрифт для всех цифровых макетов Майкрософт. Он используется последовательно в оболочке Windows Mixed Reality. Файл шрифта Segoe UI можно скачать на странице набора средств разработки Windows.
Дополнительные сведения о шрифте Segoe UI
Избегайте толщины тонких шрифтов
Избегайте использования светлого или полусветного шрифта для размеров типов менее 42 пт, так как тонкие вертикальные росчерки будут вибрировать и снизить удобочитаемость.
Современные шрифты с достаточной толщиной росчерка хорошо работают. Например, Helvetica и Arial являются разборчивыми в HoloLens с использованием обычных или полужирных весов.
Color
В HoloLens, так как голограммы создаются с помощью аддитивной системы света, белый текст очень разборчив. Примеры белого текста можно найти на меню и панели приложения. Несмотря на то, что белый текст хорошо работает без задней пластины на HoloLens, сложный физический фон может затруднить чтение типа. Мы рекомендуем использовать белый текст на темной или цветной задней пластине, чтобы улучшить фокус пользователя и свести к минимуму отвлечение от физического фона.
Примеры белого текста на темной или цветной задней пластине.
Чтобы использовать темный текст, следует использовать яркий задний лист, чтобы сделать его удобочитаемым. В аддитивных цветовых системах черный цвет отображается как прозрачный. Это означает, что вы не увидите черный текст без цветной задней пластины.
Примеры белого на черном и черном белом тексте
Примеры черного текста в системных приложениях — Магазин и Параметры
Как можно ожидать, размеры типов, которые мы используем на пк или планшетном устройстве (обычно от 12 до 32 пт), выглядят небольшими на расстоянии 2 метра. Это зависит от характеристик каждого шрифта, но в целом рекомендуемый минимальный угол просмотра и высота шрифта для удобочитаемости составляет около 0,35°-0,4°/12,21-13,97 мм на основе наших исследований пользователей. Это около 35–40 пт с коэффициентом масштабирования, представленным на странице «Текст» на странице Unity .
Для близкого взаимодействия в 0,45 м(45 см) минимальный угол просмотра читаемого шрифта и высота составляет 0,4°-0,5° / 3,14–3,9 мм. Это около 9–12 пт с коэффициентом масштабирования, представленным в Text в Unity.
Содержимое в ближайшем и дальнем диапазоне взаимодействия
Минимальный размер читаемого шрифта
| Расстояние | Угол просмотра | Высота текста | Размер шрифта** |
|---|---|---|---|
| 45 см (расстояние прямой манипуляции) | 0. 4°-0.5° | 3.14–3.9mm | 8.9–11.13pt |
| 2 м | 0.35°-0.4° | 12.21–13.97mm | 34.63-39.58 пт |
Удобный размер шрифта для разборчивого текста
| Расстояние | Угол просмотра | Высота текста | Размер шрифта** |
|---|---|---|---|
| 45 см (расстояние прямой манипуляции) | 0.65°-0.8° | 5.1-6.3 мм | 14.47-17.8 пт |
| 2 м | 0.6°-0.75° | 20.9-26.2 мм | 59.4-74.2 pt |
Пользовательский интерфейс Segoe (шрифт по умолчанию для Windows) хорошо работает в большинстве случаев. Избегайте использования легких или полулегких семейств шрифтов небольшого размера, так как тонкие вертикальные росчерки будут вибрировать, и это снизит удобочитаемость. Современные шрифты с достаточной толщиной росчерка хорошо работают. Например, Helvetica и Arial выглядят великолепно и являются разборчивыми в HoloLens с регулярными или смелыми весами.
Дополнительные сведения о вычислении размера текста в Unity см. в разделе «Текст» в Unity
Расстояние просмотра, угол и высота текста
Ресурсы
Шрифты Segoe
(ZIP-файл)
шрифт HoloLens
(ZIP-файл)
Изображение. Шрифт HoloLens предоставляет глифы символов, используемые в Windows Mixed Reality.
См. также
- Текст в Unity
- Цвет, свет и материалы
10 правил типографики в интерфейсах
Если строка слишком короткая, придется очень часто переводить взгляд, это нарушает ритм чтения. Если строка слишком длинная, то пользователю будет очень сложно сосредоточиться на тексте.
Для мобильных устройств следует придерживаться длины строки в 30-40 символов. Ниже приведен пример двух сайтов, просматриваемых с мобильных устройств. На первом сайте количество символов в строке составляет 50-75, что является приемлемым только для печати документа или его просмотра с экрана компьютера.
На втором сайте количество символов в строке 30-40 — это оптимальный вариант.
Чтобы добиться оптимального количества символов в строке, ограничьте ширину текстовых блоков: используйте единицы измерения em или пиксель.
Пользователи будут заходить на ваш сайт с разных устройств, с разными размерами экрана и разрешениями. Большинство пользовательских интерфейсов содержат различные текстовые элементы (кнопки «копировать», метки, заголовки и так далее), поэтому важно выбрать универсальную гарнитуру, начертания которой хорошо выглядят и читаются вне зависимости от их размера.
Гарнитура Roboto от Google.
Убедитесь, что гарнитура, которую вы выберите, хорошо читается и на маленьких экранах. Старайтесь избегать гарнитур, имитирующих рукописный шрифт, таких как Vivaldi. Несмотря на красоту, такие шрифты очень тяжело читать.
Шрифт Vivaldi будет очень сложно читаться на маленьком экране.
Правило №5. Используйте шрифт с четко различимыми символами
Некоторые шрифты затрудняют восприятие похожих друг на друга букв, особенно таких как «i» или «L» (как в примере ниже).
Эту же проблему может вызвать и слишком близкое расположение букв друг к другу. Например, «r» и «n», если их написать очень близко, напоминают букву «m». Поэтому при выборе шрифта обязательно проверяйте его в разных контекстах, чтобы убедиться, что он не вызовет проблем у пользователей.
Правило №6. CAPS — не всегда хорошо
Текст, написанный только заглавными буквами, подходит только для тех случаев, где не требуется его долгое прочтение (например, аббревиатуры или логотипы). Но там, где необходимо сосредоточиться, такой прием лучше не использовать. Как отметил Майлз Тинкер в своей работе Ligibility of Print, текст, написанный только заглавными буквами, существенно замедляет его прочтение по сравнению с тем же текстом, написанным строчными буквами.
Правило №7. Не минимизируйте расстояние между строками
В типографике используется термин для обозначения интервала между строками текста — интерлиньяж или межстрочный интервал. Увеличивая интервал, вы увеличиваете вертикальное пространство между строками текста, улучшая тем самым читабельность, но сокращая количество текста, который вы сможете разместить на площади экрана.
Как правило, чтобы текст легко читался, межстрочный интервал должен быть на 30% больше высоты самих символов.
Правильный интерлиньяж улучшает читабельность. Картинка от Microsoft.
Как отмечает Дмитрий Фадеев, правильное использование пробелов между параграфами на 20% процентов улучшает понимание прочитанного материала и помогает пользователю легче «переварить» текст, который не перегружен лишними деталями.
Слева: Строки в тексте размещены очень плотно.
Справа: Правильное использование интерлиньяжа улучшает читабельность.
Правило №8. Убедитесь, что вы используете достаточно контрастные цвета
Не используйте одинаковый или похожий цвет для текста и для его фона. Чем четче текст, тем легче его воспринимать и читать. Всемирная организация W3C рекомендует следующее соотношение контрастов:
- Для текста с мелким шрифтом соотношение контрастов между текстом и его фоном должно быть не менее 4.5:1
- Для текста с крупным шрифтом (шрифт 14 жирный/18 нежирный и выше) соотношение контрастов между текстом и его фоном должно быть не менее 3:1
Соотношение контрастов текста и его фона не отвечает рекомендациям, поэтому его трудно прочитать
Соотношение контрастов текста его фона отвечает рекомендациям, поэтому его легко прочитать
Дальтонизм — это весьма распространенное заболевание, особенно среди мужчин (8% мужчин не могут различать цвета).
Поэтому рекомендуется использовать дополнительные инструменты, помимо цвета, для выделения важной информации. Также старайтесь не использовать красный и зеленый в написании текста — при дальтонизме человек чаще всего не различает именно их.Правило №10. Не используйте мигающий текст
Мигающий или мерцающий текст может спровоцировать приступ у чувствительных людей. Помимо этого, такой текст скорее вызовет раздражение, нежели заинтересованность у большинства пользователей.
Заключение
Типографика — очень важная вещь. Правильное оформление сайта привнесет в него ощущение свежести и завершенности. И наоборот, неумелое использование типографики только собьет ваших пользователей с толку. Оформляйте ваши сайты так, чтобы они были удобочитаемыми, понятными и четкими.
Задача типографики —
выгодно подчеркнуть контент
.
Типографика должна выгодно подчеркивать контент, не создавая при этом дополнительную когнитивную нагрузку для пользователя.
Источник: contented
7 правил типографики для начинающих
В этом сообщении блога мы делимся 7 правилами типографики, которым вы должны следовать в графическом дизайне, особенно если вы работаете над редакционными проектами с помощью Adobe InDesign!
Посмотрите наше руководство ниже, чтобы получить полное представление о правилах типов, которым вы должны следовать!
1. Определите четкие точки входа В редакционном дизайне точки входа на разворотах играют решающую роль в привлечении читателей к вашему макету.
Точки входа помогают читателям оставаться вовлеченными и побуждают читать статью. Точки входа могут включать буквиц, заголовков, заголовков, цитат или графических элементов, которые направляют читателей к тексту. Однако используйте точки входа умеренно.
Ниже приведены примеры двух макетов, один с точками входа и без них! Тот, в который включены точки входа, сразу выделяется и привлекает больше внимания к спреду.
Без точек входа
Включены точки входа
Хотите узнать больше о точках входа? Ознакомьтесь с нашим руководством ниже. Мы сосредоточимся на создании привлекательных буквиц в Adobe InDesign и Photoshop!
youtube.com/embed/4rT6UJlJ0f0?rel=0&modestbranding=1&controls=1&showinfo=1&fs=1&wmode=transparent» frameborder=»0″ allowfullscreen=»»/> 2. Длина строки (мера) Чтобы улучшить читаемость текста, всегда следует измерять длину строки. В идеале каждая из ваших строк должна состоять из от 45 до 90 символов, включая пробелы.
Чтобы получить фактическое значение длины строки, просто нажмите трижды на текст, чтобы выбрать одну строку, а затем в меню «Окно» выберите панель «Информация».
Так почему длина строки имеет решающее значение? Длинный текст (более 90 символов) становится очень неудобным для чтения, так как вам приходится очень далеко переходить к следующей строке, это становится труднее читать, особенно для близоруких и страдающих дислексией читателей. Напротив, узкий текст также трудно читать, поскольку читателям нужно будет быстро переходить от строки к строке 9.
0005
Выравнивание является основой хорошей типографики; в общем, выравнивание по левому краю является наиболее распространенным способом установки шрифта, поскольку читатели склонны читать слева направо. (Тем не менее, обратите внимание, что существуют некоторые культурные различия, например, в арабском письме читатели читают справа налево.)
Если вы также используете «Обоснование» в основном тексте, вам нужно стараться избегать рек, что теперь делать? имеется в виду Риверс? Реки — это промежутки между текстом, и лучший способ избежать их появления в тексте — использовать выравнивание по ширине строки больше 9.0014 60 символов и разрешить переносы.
4. Применить визуальное пространство к текстовому блоку При работе с текстовым блоком следует сделать процесс чтения приятным.
Во-первых, вы можете сделать это, убедившись, что ваша типографика создает визуальный разрыв между каждым абзацем.
Вы можете сделать это, применив отступ первой строки (но не включайте его в 1-й абзац). Еще один способ добавить пространство для абзаца – применить команду пробел между функциями, , который автоматически создает визуальный разрыв с ровным интервалом между каждым абзацем.
5. Грамотное сочетание шрифтов . Следуйте одному правилу: X- высота должна быть одинаковой или близкой между двумя шрифтами, поэтому при сглаживании шрифтов постарайтесь добавить контраста, но важно выровнять ихX-высота. 6. Висящая пунктуация вашего основного текста, всегда лучше выбрать Optical Marginal Alignment, , который оставляет Hyphenation снаружи текстовая рамка.
Без оптического выравнивания по краю
С оптическим выравниванием по краю
7. Все ЗАГЛАВНЫЕредакционный дизайн. Хотя это может хорошо работать с заголовками, заголовками или даже кавычками , лучше избегать всех заглавных букв в основной копии, поскольку это может сделать чтение очень неудобным и создать ощущение, что вы кричите на них.
Надеюсь, вам понравились наши 7 правил типографики. Обязательно посмотрите наш полный учебник, чтобы получить глубокие знания о наборе текста и правилах, которым необходимо следовать:
youtube.com/embed/KWLl0WgUaPc?rel=0&modestbranding=0&controls=1&showinfo=1&fs=1&wmode=transparent» frameborder=»0″ allowfullscreen=»»/> ИЗУЧЕНИЕ ПРИЛОЖЕНИЙ ADOBE
у сертифицированных инструкторов Adobe и профессионалов отрасли
Начните прямо сейчас!
Типографские правила для графического дизайна
Типографика — это искусство оформления текста. Мы можем думать об этом как о художественной технике для создания иллюстраций и других объектов графического дизайна. Но, кроме художественной составляющей, типографика — это прежде всего законы и правила, помогающие читателю легко сканировать и понимать написанное. Типографика несет не только эстетическую задачу, но и функциональную, а значит, текст должен легко читаться.
Основные понятия
Во-первых, давайте разберемся с терминами. Гарнитурой называется группа шрифтов с общим типом рисунка и стиля.
Гарнитуры можно кратко разделить на две основные категории: с засечками (например, Antiqua) и без засечек (например, Grotesque). Среди прочих выделяются также моноширинные и акцидентные шрифты.
Размер — это размер шрифта в точках и пикселях. В него входит не только высота самой буквы и всех внешних элементов, но и пространство вокруг нее. Интерлиньяж — это расстояние между базовыми линиями соседних строк в тексте. Трекинг — это расстояние между символами в текстовом блоке, которое изменяется равномерно между всеми буквами, а кернинг — это расстояние между одной парой символов. Давайте рассмотрим простые правила, которые помогут нам улучшить наши тексты.
правила, которые помогут сделать текст лучше
Когда вы начинаете работать с текстом каждый день, вы видите, что есть много возможностей поделиться одной и той же мыслью визуально по-разному.
Чтобы уберечь вас от самых распространенных ошибок новичков, давайте более подробно рассмотрим основные правила типографики.
Используйте не более трех гарнитур
Экспериментировать со шрифтами не стоит, если вы начинающий дизайнер или ваша задача просто оформить текст на сайте. Чаще всего достаточно двух шрифтов, чтобы покрыть все ваши потребности в дизайне. Более того, вы можете обойтись одним шрифтом, используя разные его начертания, и ничего не потеряете.
Фото создано Freepik.Стандартные шрифты лучше декоративных
Вопреки заблуждениям новичков, хорошая типографика чаще всего состоит из довольно простых пар шрифтов. Рукописные и сильно декоративные шрифты редко выглядят уместно и часто трудно читаемы, особенно на веб-сайтах. Не бойтесь использовать стандартные и знакомые шрифты. Обычно они имеют лучший дизайн и не сделают ваш дизайн неуместным.
Шаблон, разработанный Freepik.Пара контрастных шрифтов
При создании пары шрифтов выбирайте шрифты, которые визуально отличаются друг от друга, но благодаря одному или двум атрибутам вместе выглядят привлекательно.
Комбинируйте шрифты с засечками и без засечек или комбинируйте полужирный и обычный или светлый стили в одном шрифте.
Использовать выравнивание по левому краю
Выравнивание по левому краю подходит в большинстве случаев, так как его удобно читать, но оно привычно для глаз. Используйте выравнивание по центру для заголовков, цитат или небольшого количества текста, когда есть только центральная композиция. Выравнивание по ширине вообще не следует использовать, так как оно создает пробелы между словами и выглядит непривлекательно. Этот тип выравнивания используется для газет и некоторых книг, и над их корректировкой работают специальные наборщики. Выравнивание по правому краю используется редко, чаще всего для чисел в таблицах.
Длина строки
Говоря о веб-типографике, количество символов в строке должно быть в диапазоне 40–70 символов для компьютеров и планшетов и 30–40 символов для телефонов. Для текстов сайта оптимальный размер — 16–20 пикселей.
Это означает, что примерная ширина текстового блока не должна превышать 760 пикселей.
Сбалансировать высоту строки, размер и длину строки
Для текстов на веб-сайтах высота строки абзаца составляет около 120–170%, но здесь нужно быть осторожным, потому что при 120% текст может выглядеть слипшимся, и, при 170% это слишком разреженно. Обычно высота строки выбирается дизайнером «на глаз», но рекомендуемая высота строки составляет 150%. При этом строки не разваливаются, а хорошо разделяются, а текст остается читаемым. Вы можете взять размер шрифта и умножить его на 1,5, чтобы получить хорошее значение высоты строки. Это правило хорошо работает для обычного текста, но для заголовков оно часто меньше. Он может быть даже меньше самого размера.
Разделить текст на абзацы
В современном мире людям сложнее воспринимать большие объемы текстов. Если вы хотите, чтобы ваш текст читали, разбейте его на абзацы по принципу: одна мысль — один абзац.
Создание визуальной иерархии
Для этого необходимо соблюдать определенный порядок в оформлении заголовков и основного текста. Текст должен быть структурирован, поэтому определите заголовок и заголовки на разных уровнях. Это поможет разделить информацию и упростить ее понимание. Существует правило, которое поможет вам быстро найти нужный размер заголовка, возьмите размер шрифта (кегль) и умножьте его на 1,6.
Следуйте правилу близости
Объекты, расположенные близко друг к другу, воспринимаются как связанные. Текстовые элементы должны располагаться так, чтобы у читателя не возникало вопросов, к чему относится заголовок или текст. Расстояния следует измерять таким образом, чтобы заголовок четко относился к своему текстовому блоку, а не зависал в воздухе между предыдущим блоком и следующим.
Не деформировать и не растягивать текст
Дизайнеры шрифтов очень постарались и создали для нас идеальные пропорции букв.
Не изменяйте эти пропорции.
Соблюдайте правила грамматики
Распространенной проблемой является путаница между дефисами и тире. Помните, что дефис — это короткая строка, которая используется для расстановки переносов и составных слов с дефисом. Есть два типа тире: длинное тире (—) и короткое тире (–). Названия говорят сами за себя, так как короткое тире примерно соответствует длине буквы «n», а длинное тире — длине буквы «m».
Длинное тире используется в предложениях, когда необходимо разбить его на части по смыслу. Короткое тире используется при указании диапазона числовых значений, например 19.89–2022 (но не тогда, когда мы пишем «откуда», в этом случае следует писать «до» между цифрами, например, с 1989 по 2022 год, так же, как и при чтении дат вслух), а также для обозначения связи или противопоставления между парами слов (например, консервативно-либеральный раскол).
Не используйте Caps Lock
Использование всех заглавных букв хорошо смотрится только в логотипах.
Иногда вы можете использовать их в названии, состоящем в лучшем случае из одного слова. Не используйте заглавные буквы для печатного текста, так как его будет трудно читать.
Свободное пространство — это не пустота
Помните, что вы не хотите заполнять все пустое пространство в своем дизайне объектами. Объекты должны быть окружены воздухом. Это помогает нам воспринимать отдельные элементы и фокусироваться на том, что необходимо. Оставьте достаточно свободного места.
Избегайте висячих предлогов, «вдов» и «сирот».
Чтобы не разбивать в тексте слова с предлогами и сокращениями, используйте неразрывный пробел. Обычно вы можете поставить неразрывный пробел, используя комбинацию клавиш Ctrl+Shift+Пробел для Windows и Option+Shift+Пробел для macOS.
Старайтесь избегать зависания строк. «Вдова» — это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. «Сирота» — это висящая строка, ведущая к началу новой страницы или столбца.