Расскажите о типографике в вёрстке. Часть 1

  • Что за font‑family? Где его взять?

  • Типовые решения в вёрстке. Как подключить шрифты

  • Что за font‑family? Где его взять?

  • Типовые решения в вёрстке. Как подключить шрифты

Кегль и интерлиньяж

В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными, например, в пикселях или относительными, например, в процентах или em:

article p {
  font-size: 16px;
  /* Высота строки посчитается от кегля:
     16px * 1.25 = 20px */
  line-height: 1.25; 
}
article .caption p {
  /* Кегль посчитается от кегля родителя (страницы):
     16px * 0.75 = 12px */
  font-size: .75em;
  line-height: 125%;
}

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

Кегль экран­но­го тек­ста обыч­но лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля

См. также:

  • Responsive Typography: The Basics

  • The State of Fluid Typography

  • Accessible Font Sizing, Explained

Проще и удобнее задавать кегль в пикселях, а интерлиньяж — коэффициентом: font-size: 16px;line-height: 1.25. При изменении кегля, например, в мобильной или десктопной версии интерлиньяж не придётся пересчитывать вручную.

См. также:

  • Responsive Typography: The Basics

  • The State of Fluid Typography

  • Accessible Font Sizing, Explained

Обычно кегль основного текста задают на самом высоком уровне в 

:root или body, а для остальных текстовых элементов используют rem или em:

:root {
  font-size: 16px;
  line-height: 1.4;
}
h2 {
  font-size: 2rem; /* 32 пк */
  line-height: 1. 025;
}
h3 {
  font-size: 1.5rem; /* 24 пк */
  line-height: 1.25;
}
h4 {
  font-size: 1rem; /* 16 пк */
  line-height: 1.4;
}
small {
  font-size: .75rem; /* 12 пк */
  line-height: 1.2;
}

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

Выключка

Выключка задаётся свойством text-align с ключевыми словами left (левый флаг), center (по центру), right (правый флаг) и justify (по формату):

text‑align: left

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

text‑align: right

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

text‑align: center

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

text‑align: justify

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

Регистр

Регистр задаётся свойством text-transform с ключевыми словами uppercase (все прописные), lowercase (все строчные) и capitalize (первые буквые каждого слова прописными):

article h2 {
  /* «Капитализируем» заголовок статьи */
  text-transform: capitalize;
}
article h2 + p::first-line {
  /* Первую строку набираем прописными,
     как это принято в художественной литературе */
  text-transform: uppercase;
}
article abbr {
  /* Аббревиатуры делаем строчными */
  text-transform: lowercase;
  /* И набираем капителью */
  font-variant: small-caps;
}

In “responsive” layout of a web page, designer specifies not only the shape of the text container but also the rules by which that shape changes depending on window and screen size.

In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type size.

font‑variant на МДН

font‑variant на МДН

Межбуквенный и межсловный пробел

Чтобы изменить межбуквенное или межсловное расстояние, используют letter-spacing и word-spacing. Расстояние можно указывать, как в пикселях, так и в относительных единицах, например, в em или rem

:

.metro {
  /* Уменьшаем межбуквенное расстояние на -5.5 пк */
  letter-spacing: -5.5px;
}
.metropoliten {
  /* Разряжаем буквые на .25em */
  letter-spacing: .25em;
}
.moscow-metro {
  /* Увеличиваем расстояние между словами на .3em */
  word-spacing: .3em;
}
.metro,
.metropoliten,
.moscow-metro {
  /* Приводим к заглавным и выравниваем по центру */
  text-transform: uppercase;
  text-align: center;
}

Метро

Метрополитен

Московский Метрополитен


имени Владимира Ильича Ленина

Интересный момент: и letter-spacing, и word-spacing задают не ширину пробела, а приращение к его ширине по умолчанию в шрифте. Соответственно, letter-spacing: 0 не схлопнет растояние между буквами, а сделает его стандартным.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

Работа с типографикой при адаптивном дизайне — CSS-LIVE

Итак, у вас есть резиновый лейаут и изображения, которые меняют размеры, но вам нужно заставить так же изменяться и текст. Один и тот же размер шрифта не подойдет ко всем возможным размерам экранов!

Мы привыкли думать, что для изменения размеров тескта достаточно указать значение относительно размеров базового шрифта, используя em’ы или проценты. В адаптивном web-дизайне мы пишем кучу правил и устанавливаем кучу ограничений, чтобы удостовериться, что наш лейаут хорошо отображается на различных разрешениях. Текст — это замечательная изменчивая среда, но, указав один размер не получится красиво заполнить им страницу. Мы рассмотрим несколько простых советов как добиться того, чтобы текст красиво заполнял лейаут, невзирая на размер экрана или устройство на котором он отображается.

Конечно, это слишком обширная тема, чтобы раскрыть ее в одном уроке. Поэтому в конце перечислено несколько полезных ресурсов на эту тему.

Заставляем типорграфику масштабироваться

Ах, этот адаптивный web-дизайн! Эти прекрасные резиновые сетки и медиа-запросы (media queries), которые помогают нашим дизайнам заполнять экраны любых размеров. К счастью для нас текст может масштабироваться практически безгранично и заполнять любой контейнер, в который мы его поместим. Наврядли нам нужно что-то еще придумывать для наших адаптивных дизайнов… или нужно? В идеале, когда наш основной лейаут масштабируется, то же должен делать и текст, и вот один способ как этого добиться.

Наша тестовая страница

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

Давайте взглянем на наш исходник и посмотрим, что у него под капотом. <h2> в качестве заголовка и несколько параграфов, обернутых в <div>, которому назначен класс wrap. Мы используем этот контейнер для управления длиной строки в нашем примере. Для вашего сайта ширина контейнера будет основываться на вашей сетке и ее адаптивном поведении, но идея остается неизменной.

Быстрое погружение в CSS расскажет нам, что мы установили размер шрифта у

body в 100% (что, для справки, составляет около 16px). Размеры остальных елементов задаются при момощи em. Замечательно! Мы взяли хороший старт:

body {
    font-size: 100%;
    line-height: 1. 6875;
    font-family: Georgia;
}

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

Сначала проверяем наименьший экран

Давайте начнем смотреть на нашу разметку на экране очень маленькой ширины, допустим что-то около 320 пикселей по ширине. примерно это вы увидите на большинстве популярных мобильных устройствах.

Изначально, при такой малой ширине ширина строки будет немного меньше чем общепринятая оптимальная длина в 45 — 75 символов. Или, если вы не фанат подсчета количества символов в строке, вы можете заметить, что строки кажутся короткими и за текстом трудновато следить. Лично я, как правило, часто перечитываю строку по несколько раз.

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

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

Самый простой способ сменить размер всех шрифтов — сменить font-size у

:

@media only screen and (max-width: 400px) {
    body {
        font-size: 90%;
    }
}

Благодяря тому факту, что мы изначально указали размеры шрифтов в em

, мы можем сменить все размеры на странице, просто исправив одну строчку кода. Слава относительным размерам шрифта!

Движемся дальше

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

Примерно при ширине 800 пикселей (ширина всего окна браузера) длина строки становится некомфортно длинной. Похоже пришло время добавить еще одно ограничение для нашего текста.

@media only screen and (max-width: 800px) {
    body {
        font-size:100%;
    }
}

@media only screen and (max-width: 1100px) {
    body {
        font-size: 120%;
    }
}

Вот как теперь выглядин наша страничка при любой ширине окна между 800 и 1100 пикселями. Мы получили немного больше рабочего места и наш текст заполняет его немного более красиво.

В этот раз мы написали два медиа-запроса. Один для максимальной ширины 800px с font-size у body. установленным в 100%, который покрывает диапазон размеров окна между 500px и 800px. И второй, для тех случаев, когда ширина окна больше 800px, и позволяет нам увеличить

базовый размер шрифта.

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

Иии… полетели!

Догадайтесь, что будет дальше, я собираюсь продолжить растягивать окно браузера шире и шире и посмотрю что произойдет. Неудивительно, что длина строки снова растет и достигает неудобных размеров примерно при ширине в 1100px. Пришло время для еще одной граничной точки? Мы можем продолжить добавлять и добавлять точки сколько угодно, но, кажется, это не очень умно, этому уже не видно конца!

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

Осталось дописать последний медиа-запрос. Я хочу, чтобы что-то останавливало нашу строку от дальнейшего роста, чтобы мы могли все застыло на том моменте когда мы имеем приемлемую длину строки. Самы легкий путь сделать это — добавить максимальную ширину диву, содержащему текст.

Для начала, нам надо определить приблизительную ширину нашего дива с содержимым. Если ширина окна браузера равна 1100 пикселям, а ширина дива-обертки равна 70%, то совсем чуть-чуть математики дас нам 770 пикселей (1100 * 0.7).

Вооруженные этой информацией отредактируем наш последний медиа-запрос:

@media only screen and (min-width: 1100px) {
    body {
        font-size: 120%;
    }

    .wrap {
        max-width: 770px;
    }
}

Шрифт в нашем демо теперь такого размера, какой мы захотели.

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

Суммируя все воедино

Даже из такого простого примера вам должно быть ясно, что вы должны быть аккуратны в выборе, когда ставите ограничения для шрифта при контроле длины строки. А что же тогда на счет интерлиньяжа и иерархии? На них так же влияет изменение размеров текста и контейнера. Есть еще так много тем для изучения!

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

Дальнейшее чтение

Это простенькое демо только вершина айсберга. Если типографика для адаптивного web-дизайна вас заинтересовала, то вот несколько рекомендаций по чтению:

  • Тим Браун (Tim Brown) делает замечательную работу, собирая техники и вещи, о которых можно задуматься применительно к web-типографике.
  • Есть не только проценты и em’ы, когда разговор заходит об изменении размеров текста в web. Итан Маркотт (Ethan Markotte) рассказывает об этом подробней в блоге Typekit.
  • Тяжело говорить о типографике не вдаваясь в дискуссии по поводу вертикального ритма. Эта классическая статья на 24 ways рассказывает об этом подробней (И не пропустите урок Мэта Уилкокса (Matt Wilcox) о сохранении вертикального ритма при помощи CSS и jQuery).
  • И, наконец, взгляните на урок Пола Роберта Ллойда (Paul Robert Lloyd) о том как построить адаптивный сайт за неделю. Сегодняшняя 2 часть об адаптивной типографике и сетках

Перевод статьи Handling typography for responsive design автора Val Head

P.S. Это тоже может быть интересно:

Наиболее стандартный способ установки размера шрифта в HTML/CSS

спросил

Изменено 9 лет, 8 месяцев назад

Просмотрено 25 тысяч раз

Я много лет работаю с HTML/CSS, но хотел бы кое-что прояснить по поводу установки размера шрифта. В каком формате лучше всего установить шрифт?

Обычно я устанавливал размер шрифта в процентах, а затем использовал em, чтобы изменить его в большую или меньшую сторону.

Это самый стандартный способ? Я видел шрифты, объявленные в пикселях, пунктах, с относительными ключевыми словами, такими как «крупнее» или «меньше». Я видел, что они устанавливаются в процентах и ​​т. д.

Так что же является самым стандартным? Является ли самый стандартный лучшим? какие-либо исследования, подтверждающие это?

Спасибо,

  • html
  • css
  • размер шрифта

В школе я научился следующему:

Установить размер шрифта в теле с процентами до 62,5%:

 body {
      размер шрифта: 62,5%;
}

Затем вы можете использовать em в том же смысле, что и пиксели, за исключением того, что вы делите на 10.

Например:

 h2 {
    размер шрифта: 1.4em; /* 14 пикселей */
}

Мы научились использовать их для «эластичных» макетов. Если вы укажете размер шрифта в em, текст сохранит свои пропорции после того, как пользователь увеличит или уменьшит масштаб.

Опять же, я вижу, что люди постоянно используют px или другие объявления для шрифтов; насколько я знаю они все стандартные. Я думаю, все сводится к созданию лучшего пользовательского опыта.

6

Все они стандартные. Используйте то, что работает для вас.

1

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

После этого можно было установить размеры на свой h2 , h3 , p и т.д. с % или em .

Я обычно устанавливаю html на 10px , затем использую font-size: 100% на теле . Затем вы можете использовать соотношение px/em 14px / 1.4em для элементов. Единственное, с чем я сталкиваюсь, это то, что если я вставляю базовые элементы, шрифт становится все фанковым, и вы должны указать размер шрифта для всех вложенных элементов.

Пример: если у меня есть p, section, article, div{font-size: 1.6em;} , каждый раз, когда у меня есть p, section, article, div , шрифт становится пропорциональным контейнеру. Таким образом, 1.6em , который изначально был 16px , теперь 1.6em из 16px (не 10px ) или 25.6px . Вам придется масштабировать текст до 0,625em (или 16px / 25,6px = 0,625em ). У вас будет больше контроля над согласованностью между браузерами, но это может потребовать от вас немного больше усилий.

Некоторые могут спросить: «Зачем проходить через все эти хлопоты?» Это хороший вопрос. Вот ответ: Отзывчивость. Это, и я работаю в компании, которая должна соответствовать 508. Это включает полный контроль над начальными размерами шрифта. Я не могу полагаться на предположение, что конечный пользователь выбрал «средний» или 16pt шрифт, потому что в законе четко указано, что он должен быть X или Y для высокой контрастности и т. д.

1

Кто-то говорит, что это нехорошо и может сломать макет, см.: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — размер шрифтов с использованием «em» все еще актуален?

Не используйте em, когда на самом деле имеете в виду %. Единственная причина, по которой em работает, заключается в том, что в CSS 1em, который должен представлять размер буквы «M» ( em происходит от «M»), на самом деле эквивалентен размеру шрифта. Поэтому, когда вы пишете 1em, вы на самом деле пишете «100% унаследованного размера шрифта ». em предназначен для использования при указании размеров блока относительно размера шрифта (что бывает редко, очень редко).

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

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

Предлагают ли современные браузеры масштабирование текста?

Короче: не по умолчанию. Браузеры предлагают масштабирование страницы по умолчанию, и это скрыто глубоко внутри строки меню, обычно просматриваемой. Вы можете ожидать, что некоторые из ваших пользователей знают сочетание клавиш Ctrl+MouseWheel, но фактическое масштабирование текста более сложно. С современной тенденцией отказа от строки меню (примечание: на момент написания этой статьи бета-версия FF4 также по умолчанию избавляется от нее), вы должны учитывать, что пользователям, которым требуется масштабирование текста, являются те очень в этом нуждается . Я говорю это, потому что тенденция учебных пособий/советов в сети состоит в том, чтобы просто прославлять эластичный макет и возможность изменять размер текста, но на самом деле это не проблема. К сожалению, слишком много «профессионалов» в области эластичных/em/гибких макетов полностью упускают из виду суть: сайт должен выглядеть хорошо, если я увеличу масштаб до 300% или выше! Если он просто хорошо выглядит на таких вещах, как 130% или 170%, это совершенно бессмысленно и является пустой тратой усилий и действительно полезно только тогда, когда они были достаточно глупы, чтобы установить свой базовый шрифт на что-то вроде 10px или меньше (слишком мало для больших текстов). .

Другая проблема заключается в том, что «некоторые браузеры не масштабируют», из них IE6 является единственным важным, потому что он по-прежнему занимает небольшую долю Интернета. Если вы думаете иначе, вы, вероятно, читали некоторые статьи 2002 года или около того (т.е. спустя 1 год после его появления), очнитесь:

  • Ваша аудитория использует IE6 и не знает ничего лучше? Если у вас нет статистической поддержки, предположим: НЕТ. Кроме того, следует ли сначала разрабатывать дизайн для IE6? Ответ всегда: черт НЕТ. Создавайте дизайн в самом технически совершенном, всеобъемлющем и соответствующем стандартам браузере, который только можно найти. Обычно перетягивание каната происходит между Safari и Opera. Firefox на самом деле не сильно отстает, но обычно реализует их как правила -moz- и медленно конвертирует в правила, отличные от -moz-.

  • Каковы шансы того, кто использует IE6, знать об инструментах для изменения размера шрифта? Если сомневаетесь, предположим Zero. Каковы шансы, что люди, которые на самом деле используют IE6 (в наше время), заботятся о размере шрифта во всем? Если сомневаетесь, предположим Zero.

  • Если у вас есть пользователи IE6, вы можете сделать одну невинную вещь — дать им информативный толчок в правильном направлении, дискретно. Пример: «Ваш браузер Internet Explorer 6 содержит множество недостатков безопасности. В целях вашей безопасности и безопасности активов вашей компании рекомендуется выполнить обновление (или попросить администратора выполнить обновление) до более новой версии: http://www.microsoft .com/nz/windows/internet-explorer/default.aspx (это абсолютно бесплатно!)»

Также может быть полезно знать текущую тенденцию (согласно сайтам вроде Google) убить IE6 как можно скорее! Вы ни в коем случае не профессионал, поддерживая этот проклятый браузер почти десятилетней давности, наряду с другими чудовищами, такими как IE5.5. Прежде чем читать советы по веб-дизайну, проверьте дату.

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

  • pt («пункты») — это размер для печати, а — только для печати ! Точка определяется как 1/72 дюйма и примерно 0,3527 мм. Никогда не используйте pt для стилей экрана , потому что браузеру придется угадывать; и многие браузеры действительно ужасно угадывают! Пика составляет 12 пунктов.

    Хотелось бы, чтобы это было вежливо, но каждый раз, когда вы видите точки, используемые для стиля экрана (будь то сценарий онлайн-сброса, ванильный сценарий и т. д.), автор был идиотом. Даже один простой контрольный просмотр должен был показать, что измерение точки не верно.

  • ex (аббревиатура от «x-height») — это причудливая единица CSS, которую, если вам повезет, вы никогда не будете использовать.

  • px («пиксель») — это более точная кросс-браузерная И кросс-платформенная согласованная единица. Хотя ваш браузер не может точно знать высоту (в мм/дюймах) экрана, точность 90 149 пикселей с идеальной точностью 90 150 довольно проста. Пользовательские пиксели в настройке (базовых) размеров шрифта для отображения на экране различных ключевых элементов, в частности, когда эти элементы сами по себе являются идеальными пикселями. Простой пример: текст на изображении. Даже если вы используете только значения em или % во всем коде, вы все равно полагаетесь на базу 16px, установленную браузером (при отображении на экране).

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

  • em (как в «M») относится к размеру буквы M и является измерением типографики (например, точка ), но в CSS это просто равно размеру шрифта, при работе с экраном . Если вы имеете дело с печатью, бог знает, не вернется ли она просто к типографски правильному «размеру M» вместо «размера шрифта» (помните, что CSS предназначен не только для экрана). Наиболее уместно использовать em при указании размера окружающего блока относительно текста. Используйте его только тогда, когда вы не можете использовать %, так как процент более четкий и лучший код в целом.

  • названных размеров: xx-small, x-small, small, normal, large и т. д. следует избегать! Экспериментируя, вы могли заметить, что «маленький» — это практически 12 пикселей или 75%, но намного четче. Однако они несовместимы с кросс-браузером. Small в Firefox меньше, чем small в Safari, поэтому никогда не используйте их.

Эмпирическое правило: всегда пишите то, что вы имеете в виду, в контексте с максимально кратким синтаксисом.

Реальный вопрос: как дать пользователям возможность изменять размер текста

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

Вы хотите дать своим пользователям возможность изменять размер текста, который они хотят прочитать. И рекомендуется предлагать простой A/A (2-й «A» должен быть меньше; полезно дополнять его текстом, таким как «нормальный», «в 2 раза больше» и т. д.). Поместите это где-нибудь на видном месте, чаще всего в правом верхнем углу контента пользователь хочет прочитать. Контекст «контента» очень важен:

  • Пользователи заботятся только о том, что они хотят читать. Они не совсем слепые, и увеличение базового размера шрифта не совсем «лечит слепоту». Если у вас есть заголовок размером 50 пикселей, да, они, вероятно, увидят его нормально, не нужно делать его размером 150 пикселей! Вы можете очень легко поместить переключатель размера шрифта в статью и заставить его влиять только на тело, и это сработает отлично!

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

Если вам необходимо сделать весь сайт «эластичным» (т. е. динамическим в зависимости от размера шрифта)

  • , в первую очередь убедитесь, что пользователь должен использовать одну из функций браузера No Style или Accessibility Style (см.: Opera) ваш сайт выглядит хоть как-то прилично. Пользователи с реальными проблемами (а не просто дурачиться) с большей вероятностью воспользуются ими, а затем попытаются немедленно изменить размер.

  • Затем убедитесь, что у вас есть видимый переключатель для изменения размера текста. Современные браузеры не изменяют размер текста по умолчанию, не думайте, что ваши пользователи изменят эти значения по умолчанию.

  • Когда пользователи используют переключатель, убедитесь, что разные уровни настраивают заголовки и различные другие элементы. Убедитесь, что все становится больше, но сделайте так, чтобы такие вещи, как заголовки, увеличивались лишь немного, чтобы они не заполняли весь экран (предположим, что окна пользователей не развернуты).

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

    No related posts.