В качестве визуального представления языка основная задача типографии заключается в обмене информацией. Стиль шрифтов никогда не должен затмевать эту цель. В этой статье мы обсудим, как использовать шрифтовое оформление в вашем приложении Windows, чтобы помочь пользователям легко понимать содержимое.
Шрифт
Вы должны использовать один шрифт в пользовательском интерфейсе приложения, и мы рекомендуем придерживаться шрифта по умолчанию для приложений Windows, Segoe UI Variable. Он создан для обеспечения оптимальной четкости для любых размеров и любой плотности пикселей, а также отличается четкой, легкой и открытой эстетикой, которая дополняет содержимое системы.
Сведения об отображениях текста на языках, отличных от английского, или выборе другого шрифта для приложения см. в разделах Языки и Шрифты, в которых описываются шрифты, рекомендованные для приложений Windows.
Выберите один шрифт для пользовательского интерфейса.
Не смешивайте несколько шрифтов.
Лучшие Бесплатные Шрифты с Google Fonts!⚡️
Оси шрифта переменной
Шрифт Segoe UI Variable содержит две оси для более точного управления текстом. Этот шрифт имеет ось веса ( wght ) с весами от тонких (100) до полужирного (700). Он также имеет ось оптического размера ( opsz ) для оптического масштабирования от 8pt до 36pt.
При использовании общих элементов управления XAML шрифт Переменной пользовательского интерфейса Segoe будет выбран по умолчанию для поддерживаемых языков. Если используется этот шрифт или другой шрифт переменной с оптической осью, оптический размер будет автоматически соответствовать требуемому размеру шрифта. При использовании HTML оптическое масштабирование также выполняется автоматически, но необходимо указать шрифт Segoe UI Variable в CSS.
Размер и масштабирование
Размеры шрифтов в приложениях UWP масштабируются автоматически на всех устройствах. Алгоритм масштабирования позволяет добиться того, что шрифт размером 24 пикселя на Surface Hub, который располагается на расстоянии трех метров от пользователя, будет таким же читаемым, как и шрифт аналогичного размера, отображаемый на телефоне с диагональю экрана 5 дюймов, который располагается на расстоянии нескольких сантиметров от пользователя.
В силу особенностей работы системы масштабирования вы работаете с эффективными пикселями, а не физическими пикселями, и вам не следует изменять размер шрифта для различных размеров и разрешений экрана.
Не используйте размер шрифта меньше 12 пикселей.
Иерархия
Пользователи полагаются на визуальную иерархию при просмотре страницы, когда заголовки представляют сводку содержимого, а основной текст содержит более подробные сведения. Чтобы создать четкую визуальную иерархию в приложении, используйте набор шрифтов Windows.
Набор шрифтов
Набор шрифтов Windows определяет важные отношения между начертаниями шрифтов на странице, помогая пользователям легко читать содержимое. Все размеры указываются в эффективных пикселях и оптимизированы для приложений UWP, работающих на всех устройствах.
КАК ВЫБРАТЬ ПРАВИЛЬНЫЙ ШРИФТ? [правила хорошей типографики]
Дополнительные сведения см. в руководстве по использованию пандуса типов XAML .
Соответствие
Значение TextAlignment по умолчанию — «Left», и в большинстве случаев такой подход, в котором содержимое сдвинуто влево и не выравнивается по правому краю, обеспечивает согласованную привязку содержимого и универсальный макет. Сведения о языках RTL см. в разделе Настройка макета и шрифтов для поддержки глобализации.
Количество знаков
Оставить до 50–60 букв на строку для удобства чтения.
Не используйте менее 20 символов или более 60 символов на строку, так как это трудно прочитать.
Обрезка и многоточия
Если объем текста выходит за рамки доступного пространства, рекомендуется вырезать текст и вставить многоточие [. ], что является поведением по умолчанию большинства элементов управления текстом UWP.
Текст клипа и перенос, если включено несколько строк.
Не используйте многоточие, чтобы избежать визуального загромождений.
Если контейнеры не определены точно (например, не указан отличающий цвет фона) или доступна ссылка для просмотра всего текста, используйте многоточия.
Языки
Segoe UI Variable — это наш шрифт для английского, европейского языка, греческого и русского языков. Для других языков см. следующие рекомендации.
Шрифты для глобализации и локализации
Используйте API сопоставления шрифтов LanguageFont для программного доступа к рекомендуемому семейству, размеру, насыщенности и стилю шрифта определенного языка. Объект LanguageFont предоставляет доступ к нужной информации о шрифте для различных категорий содержимого, включая заголовки, уведомления, текст и шрифты доступных для редактирования текстов пользовательского интерфейса. Дополнительные сведения см. в разделе Настройка макета и шрифтов для поддержки глобализации.
Шрифты для языков, не использующих латинский алфавит
| Ebrima | Обычный, полужирный | Шрифт пользовательского интерфейса для африканских сценариев (ADLaM, Ethiopic, N’Ko, Osmanya, Tifinagh, Vai). |
| Gadugi | Обычный, полужирный | Шрифт пользовательского интерфейса для североамериканских сценариев (канадские syllabics, Cherokee, Osage). |
| Leelawadee UI |
Fonts
Рубленые шрифты (без засечек)
Рубленые шрифты хорошо подходят для заголовков и элементов пользовательского интерфейса.
| Arial | Обычный, курсив, полужирный, полужирный курсив, черный | Поддерживает европейские и ближневосточные сценарии (латинский, греческий, кириллица, арабский, армянский и иврит). Черный вес поддерживает только европейские сценарии. |
| Calibri | Обычный, курсив, полужирный, полужирный курсив, светлый, светлый курсив | Поддерживаются наборы знаков для европейских и ближневосточных языков (латинский, греческий, кириллический, арабский и иврит). Арабские символы доступны только в вертикальном написании. |
| Consolas | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины, поддерживающий наборы знаков для европейских языков (латинский, греческий и кириллический). |
| Segoe UI | Обычный, курсив, светлый курсив, черный курсив, полужирный, полужирный курсив, светлый, полусветлый, плотный, черный | Шрифт пользовательского интерфейса для набора знаков европейских и ближневосточных языков (арабский, армянский, кириллический, грузинский, греческий, иврит и латинский), а также набора знаков письма Лису. |
| Selawik | Обычный, полусветлый, светлый, полужирный, плотный | Шрифт с открытым исходным кодом, совместимый с segoe UI, предназначенный для приложений на других платформах, которые не хотят объединить пользовательский интерфейс Segoe. Получить Selawik на GitHub. |
Шрифты с засечками
Шрифты с засечками хорошо подходят для представления больших объемов текста.
| Cambria | Обычный | Шрифт с засечками, поддерживающий наборы знаков для европейских языков (латинский, греческий, кириллический). |
| Courier New | Обычный, курсив, полужирный, полужирный курсив | Шрифт фиксированной ширины serif, поддерживающий европейские и ближневосточные скрипты (латинский, греческий, кириллица, арабский, армянский и иврит). |
| Грузия | Обычный, курсив, полужирный, полужирный курсив | Поддерживаются наборы знаков европейских языков (латинский, греческий и кириллический). |
| Times New Roman | Обычный, курсив, полужирный, полужирный курсив | Устаревший шрифт, поддерживающий наборы знаков для европейских языков (латинский, греческий, кириллический, арабский, армянский, иврит). |
Шрифты переменных
Шрифты переменных хорошо подходит для точного управления внешним видом текста.
| Хинсрифт | Вес, ширина | Шрифт переменной, поддерживающий латинский, греческий и кириллица. |
| Segoe UI Variable | Вес, оптический размер | Шрифт переменной, поддерживающий латинский, греческий и кириллица. |
Символы и значки
| Segoe MDL2 Assets | Обычный | Шрифт пользовательского интерфейса для значков приложений. Дополнительные сведения см. в статье о ресурсах Segoe MDL2 . |
| Segoe UI Emoji | Обычный | Шрифт пользовательского интерфейса для Эмодзи. |
| Segoe UI Symbol | Обычный | Резервный шрифт для символов. |
Похожие статьи
- Текстовые элементы управления
- Ресурсы темы XAML
- Стили XAML
- Шрифтовое оформление Майкрософт
- Шрифты переменных
Источник: learn.microsoft.com
Лучшие Гугл шрифты для сайта
Шрифты играют огромную роль на качество подачи и удобство восприятия информации. Веб-мастера учитывают их нюансы, поскольку выбор шрифтов оказывает влияние на посетителей сайта.
Google Fonts – лучший бесплатный каталог шрифтов в котором собрано около 1000 семейств на более чем 135 языках. Мы сделали подборку из 10 самых интересных вариантов, подходящих для установки на сайт и ПК.
Шрифты делятся на семейства, но основополагающим отличием принято считать наличие или отсутствие засечек – штрихов на концах букв. Это отражено в названии шрифтов: «serif» означает засечку, если рядом есть частица «sans» (от фр. sans – «без»), то шрифт будет без засечек. Они могут быть различной формы и размера: прямые, закруглённые, перпендикулярные, толстые, тонкие и ещё какие-нибудь. Считается, что засечки служат для улучшения читабельности текста, поскольку визуально образуют горизонтальную линию направления букв.
Однако, для использования в Интернете, да и вообще при чтении с экрана монитора, легче воспринимаются шрифты без засечек. Они проще поддаются оцифровке и выглядят более чёткими. Благодаря сервису Google Fonts выделился рейтинг самых популярных веб-шрифтов использующихся в мире. Мы отобрали десять вариантов самых удобочитабельных кириллических (русских) шрифтов, кратко охарактеризуем их, дадим ссылки на скачивание и расскажем, как их установить на сайт или компьютер.
Лучшие шрифты от Google Fonts – ТОП 15
- Roboto – самый популярный шрифт в мире
- Open Sans – самый читаемый шрифт
- Montserrat – лучший шрифт без засечек
- Roboto Condensed – для текстовых абзацев
- Source Sans Pro – для веб-приложений
- Oswald – солидный шрифт для заголовков
- Merriweather – изящный шрифт с засечками
- Noto Sans – гладкий и простой шрифт
- Yanone Kaffeesatz – для кричащих заголовков
- Caveat – красивый прописной шрифт
- Manrope – самый читабельный шрифт
- Cousine – лучший кириллический шрифт
- Raleway – популярный шрифт без засечек
- Noto Sans – лучший шрифт для русского языка
- Marck Script – красивый письменный шрифт
- Какой шрифт выбрать для сайта
- Как скачать шрифт с Google Fonts
- Как установить шрифт на компьютер
- Как изменить шрифт в браузере
- Как подключить шрифт к сайту
- Выводы и рекомендации
1. Roboto – самый популярный шрифт в мире
- Дата создания: 2011 год
- Всего стилей: 12 шт.
- Используют: 26 млн. сайтов
Roboto – семейство бесплатных шрифтов с большим количеством вариантов веса: Thin, Light, Regular, Medium, Bold, Black. Шрифт придуман дизайнером Кристианом Робертсоном и впервые был представлен вместе с ОС Android 4.0 «Ice Cream Sandwich» в качестве системного шрифта. Сегодня это самый популярный шрифт в Интернете.
2. Open Sans – самый читаемый шрифт
- Дата создания: 2010 год
- Всего стилей: 10 шт.
- Используют: 23 млн. сайтов
Open Sans – выглядит приятно, легко читается на экранах. Засечек не имеет, разработан Стивом Матессоном – одним из ведущих современных специалистов в типографике. Находится на 2-м месте по популярности в Сети, Google его использует для своей рекламы и некоторых сайтов.
3. Montserrat – лучший шрифт без засечек
- Дата создания: 1989 год
- Всего стилей: 18 шт.
- Используют: 7,5 млн. сайтов
Montserrat – шрифт без засечек, выглядит просто, интересно, отлично читается. Был изобретён в 1989 году Джульеттой Улановски, дизайнером из Буэнос Айреса, и назван в честь её родного района города. Стили различной степени жирности добавляются периодически по сей день.
4. Roboto Condensed – для текстовых абзацев
- Дата создания: 2011 год
- Всего стилей: 6 шт.
- Используют: 2,9 млн. сайтов
Roboto Condensed – ещё одно творение Кристиана Робертсона, которое он вывел в отдельное семейство. Это узкий, вытянутый шрифт, довольно внятный и приятный на вид. Хорошо подходит для длительного чтения с экрана.
5. Source Sans Pro – для веб-приложений
- Дата создания: 2012 год
- Всего стилей: 6 шт.
- Используют: 5,4 млн. сайтов
Source Sans Pro – содержит полный набор стилей, первый шрифт Adobe с открытым доступом. Разработан Полом Хантом, хорошо подходит для пользовательских интерфейсов. Поддерживает кириллицу во всех стилях, кроме курсива.
6. Oswald – солидный шрифт для заголовков
- Дата создания: 2011 год
- Всего стилей: 6 шт.
- Используют: 5,4 млн. сайтов
Oswald – относительно новый шрифт, бы создан художником Верноном Адамсом в 2011 году, позже были добавлены стили, которых всего шесть. Шрифт вытянутый, стильный, внушительно смотрится в заголовках. Широко используется на сайтах и в приложениях для ПК и мобильных платформ.
7. Merriweather – изящный шрифт с засечками
- Дата создания: 2010 год
- Всего стилей: 8 шт.
- Используют: 4,1 млн. сайтов
Merriweather – шрифт с чётко выраженными засечками, вытянутый и слегка сжатый, с открытой, плавной формой букв. Был разработан специально для отображения на электронных экранах. Изящно выглядит и хорошо читается. Существует также в версии без засечек с приставкой «sans».
8. Noto Sans – гладкий и простой шрифт
- Дата создания: 2012 год
- Всего стилей: 4 шт.
- Используют: 3,1 млн. сайтов
Noto Sans – шрифт с упрощённым дизайном букв: простые линии, никаких засечек, буквы чуть шире среднего и их толщина тоже. Был специально разработан для компьютеров с учётом особенностей оцифровки. Выглядит просто, гладко, хорошо читаем. Подходит для текста абзацев.
9. Yanone Kaffeesatz – для кричащих заголовков
- Дата создания: 2004 год
- Всего стилей: 4 шт.
- Используют: 460 тыс. сайтов
Yanone Kaffeesatz – шрифт стилизован под типографию кофеен 20-х годов. Тонкий, вытянутый, выглядит немного старомодно и дорого, отлично подходит для заголовков, особенно рекламных. Используется в полиграфии множества стран и крупных компаний.
10. Caveat – красивый прописной шрифт
- Дата создания: 2014 год
- Всего стилей: 2 шт.
- Используют: 110 тыс. сайтов
Caveat – это элегантный прописной шрифт, его профиль легко узнаваем и отлично читается. Шрифт игривый и лёгкий, подходит для утончённых заголовков, каких-то сносок, а также писем личного характера. Красивый и непринуждённый, лишён официоза, но на роль основного для сайта, конечно, не подходит.
11. Manrope — самый читабельный шрифт
- Дата создания: 2018 год
- Всего стилей: 7 шт.
Manrope – новый (2018 год) шрифт, который легко воспринимается при чтении. Он похож на многие другие, но отличается простотой и выверенностью пропорций. Лучше всего выглядит в конфигурациях «Extra-light» и «Light», в жирном начертании становится немного тяжеловат. Таким шрифтом можно писать блог, к примеру. Можно также использовать в роли основного шрифта сайта.
Есть кириллическая и латинская версия.
12. Cousine — лучший кириллический шрифт
- Дата создания: 2004 год
- Всего стилей: 7 шт.
Cousine – приятный шрифт, от которого долго не устают глаза, всматриваться практически не нужно, читается легко и не напрягает, особенно в начертании Regular. Один из наиболее удачных, широко используемых шрифтов формата «Monotype», включает латинскую и кириллическую версии.
13. Raleway — популярный шрифт без засечек
- Дата создания: 2012 год
- Всего стилей: 18 шт.
Raleway – аккуратный, эстетичный шрифт с огромным количеством стилей на все случаи жизни. Им одним можно оформить весь сайт, всё будет элегантно выглядеть и легко читаться. Входит в десятку самых популярных шрифтов Google Fonts, что само по себе говорит о его привлекательности, универсальности в использовании.
14. Noto Sans — лучший шрифт для русского языка
- Дата создания: 2015 год
- Всего стилей: 4 шт.
Noto Sans – внятный, не раздражающий шрифт, подходящий для длительного чтения. Лаконичный, в меру растянутый, в меру вытянутый, с расстоянием между буквами чуть выше среднего. Наиболее привлекательно выглядит курсив, который вполне можно использовать для привлечения внимания к важным формулировкам на сайте.
15. Marck Script — красивый письменный шрифт
- Дата создания: 2011 год
- Всего стилей: 1 шт.
Marck Script – изящный, округлый шрифт, на который приятно смотреть. Да, он витиеватый, немного небрежный, но выверенный, читается легче многих других письменных шрифтов. Такой можно использовать, к примеру, для заголовков или выделения важных моментов на сайтах, посвящённых уходу за женской красотой, в магазинах одежды, пригласительных на праздничные мероприятия и т. д. Представлен в единственном стиле, что неудивительно для такого типа шрифта.
Какой шрифт выбрать для сайта?
Бывало же такое: заходишь на сайт, ещё ничего не прочёл, а уже оценил качество форматирования материала и засмотрелся на несколько секунд? Никто не будет пытаться разобрать каракули, если только там не какая-то редкая/важная информация. Проще за пару секунд найти другой сайт, благо, поисковики не скупятся на выдачу.
10 бесплатных шрифтов
Это нео-гротескное семейство шрифтов без засечек, отличающееся приятными и открытыми кривыми. Google разработала его в качестве одного из основных системных шрифтов для своей ОС. Он быстро запал в душу и стал популярным в наши дни, поэтому рассматривайте данный вариант в качестве основного для разработки.
San Francisco (Бесплатный шрифт для iOS)
Цена: Бесплатно
Еще одно нео-гротескное семейство шрифтов без засечек, которое может помочь вам создать удобное и так полюбившееся яблоководам визуальное представление макета. Поскольку ребята из Apple выбрали его в качестве системного шрифта для своих iOS-устройств, вы не промахнетесь в выборе. Семейство лучше всего подходит для логотипов и брендирования.
Open Sans (Бесплатный шрифт Google)
Цена: Бесплатно
Формат: TTF
Это известный шрифт без засечек, разработанный Стивеном Меттисоном. Он отличается нейтральными формами, дружелюбным внешним видом, и считается вторым по популярности шрифтом Google. Идеально подойдет для использования как в приложениях Android, так и iOS.
Lato (Бесплатный шрифт Google)
Цена: Бесплатно
Формат: TTF
Разработанное Дзедзицем Лукашем семейство шрифтов без засечек обладает полукруглыми деталями на буквах, а структура обеспечивает стабильность и серьезность. Отличный вариант, как для личного, так и для коммерческого использования.
Montserrat (Бесплатный шрифт Google)
Цена: Бесплатно
Формат: TTF
Montserrat – это знаменитый шрифт Google в стиле ретро. Он имеет два родственных семейства шрифтов с похожим стилем: Alternates и Subrayada. Если вы ищете шрифты для создания ретро-приложений – выбирайте этот вариант, он будет очень кстати.
Proxima Nova
Цена: Бесплатно
Формат: TTF , OTF
Proxima Nova – шрифт без засечек с 48 стилями. Это полная реконструкция Proxima Sans 1994 года, устраняющая разрыв между такими шрифтами, как Futura и Akzidenz Grotesk, а также замена Helvetica в качестве одного из самых популярных шрифтов для мобильных устройств .
Nexa
Цена: Бесплатно
Формат: TTF , OTF
Это простое и современное семейство шрифтов включает в себя 16 уникальных стилей. Они будут хорошо смотреться в заголовках, текстовых блоках и страницах с четкой компоновкой.
Ubuntu
Цена: Бесплатно
Формат: TTF
Семейство Ubuntu – это набор libre/open шрифтов, поддерживаемое широким сообществом Open Source и проекта Ubuntu.
Область применения – языки, используемые юзерами Ubuntu по всему миру в соответствии с философией, которая гласит, что каждый пользователь должен иметь возможность использовать свое программное обеспечение на выбранном им языке.
Nunito
Цена: Бесплатно
Формат: TTF
Nunito – это хорошо сбалансированный шрифт без засечек с закругленными краями, который был разработан в основном для использования в качестве “экранного”, но он также может применяться и в качестве текстового шрифта. Отлично смотрится в браузерах, на десктопах, ноутбуках и мобильных устройствах.
Source Sans Pro
Цена: Бесплатно
Формат: TTF
Source Sans Pro известно как первое семейство шрифтов с открытым исходным кодом от Adobe, и предоставляет пользователям шесть шрифтов в вертикальном и курсивном стилях. Это хороший вариант, чтобы помочь вам создать более приятные тексты для чтения ваших мобильных приложений.
Заключение
Шрифты влияют на многие аспекты ваших мобильных приложений, и их никогда нельзя игнорировать.
Библиотека программиста надеется, что лучшие бесплатные примеры шрифтов, упомянутые выше, помогут легко создавать удобные UX -приложения. Если вы не найдете интересных вариантов в этой подборке, не отчаивайтесь – ссылки в каждом пункте, несомненно, помогут быстро выбрать правильный шрифт. Удачи!
Больше полезной информации вы можете получить на нашем телеграм-канале «Библиотека мобильного разработчика».
Источник: proglib.io