email
perm_phone_msg
forum

UX: системные шрифты для веб приложений

Технология обработки данных, основанная на мейнфреймах и господствовавшая до создания Apple I, в настоящее время возрождается в виде облачных сервисов. Современные облачные сервисы основаны на модели распределенных вычислений – SPI, или всем знакомые SaaS, PaaS, IaaS. Интеграция облачных технологий, при всех своих недостатках, имеет ряд весомых преимуществ для создания клиент-серверных веб-приложений. Основной целью разработки и интеграции веб-приложений для малого бизнеса является перенос программного обеспечения и вычислительных ресурсов с локальных узлов на распределенные сервера, что позволяет уменьшить общий TCO на обслуживание и поддержку аппаратной части и ПО. Становится совершенно не важно, сколько у вас филиалов, узлов и в каких странах. Все сотрудники работают с единым программным обеспечением для CRM, телефонии, систем учета и продаж. В качестве клиента в таком случае выступает веб-браузер или скомпилированное Electron приложение, а сервера – арендуемое облако. Одной из главных задач UX в разработке веб-приложения или корпоративного сайта является создание native-look интерфейса под операционную систему пользователя. Основным элементом интерфейса операционных систем являются системные шрифты.

Атрибуты шрифта

Для работы с шрифтами используется html тег <p> и согласно документации W3C имеются следующие основные атрибуты: style; variant; weight, size; height; family. Обычная запись в класса CSS выглядит так:
.oursite__menu_header {
font-family: Roboto;
font-size: 2em;
font-weight: 300;
}

Дополнительные атрибуты тега <p>

Специально для создания native look веб-приложений существуют дополнительные атрибуты:

Размеры системных шрифтов для создания сайтов и веб-приложений

Прежде всего, нужно знать, что font-family различны для каждой операционной системы: Но такие атрибуты, как font-style, font-variant, font-weight унифицированы для всех операционных систем и приведены к следующим значениям:
{
font-style: normal;
font-variant: normal;
font-weight: regular;
}

Основные различия заключаются в размерах элементов интерфейса для атрибута font-size:


Значение атрибута font-size для системных шрифтов font-size для Windows font-size для Mac
caption 16 px 13 px
icon 16 px 13 px
menu 12 px 13 px
small-caption 12 px 11 px
status-bar 12 px 11px
Пример использования системных шрифтов в верстке сайта или веб-приложения созданного для Windows:
.oursite__menu_header {
font: menu;
font-size: 24px;
}
Давайте посмотрим, как бы выглядело описание класса меню в CSS при использовании стандартных атрибутов html тега <p>.
.oursite__menu_header {
font-family: Segoe UI; /*Системный шрифт Windows > 7 */
font-style: normal;
font-weight: regular;
font-variant: normal;
font-size: 12px; /* Размер системного шрифта в Windows для меню*/

font-size: 24px;
}

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

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

Запись опубликована: 17.02.2017

Оставьте контактный телефон и мы свяжемся с Вами

Ваше имя

Телефон