Если после увеличения
Графические дизайнеры без опыта в веб-дизайне крайне удивлены большому размеру текста на веб-страницах в сравнении с текстом в книгах. Имейте в виду, текст велик только если книга и экран монитора находятся в одной плоскости, в перспективе же все будет иначе.
Чем дальше от вас находится текст, тем меньше он кажется визуально. При увеличении дистанции нужно увеличивать размер текста, чтобы компенсировать большую дистанцию от глаз читателя до текста. На сколько больше должен быть размер текста само по себе есть наукой. Если у вас нет опыта в этом, для сравнения попробуйте держа перед глазами, на удобной для чтения дистанции, книгу смотреть на текст на экране.
На рисунке ниже видно, что чем дальше от вас находится текст, тем больше должен быть его размер. Две черные и две красные буквы имеют одинаковый метрический размер. Но так как правая пара букв находится дальше, воспринимаемый их размер меньше. Красная буква А справа воспринимается как равная по размерам черной А слева:
Размер текста на странице не зависит от ваших личных предпочтений. Он зависит от того, как далеко находится читатель от экрана. Так как экраны мониторов настольных компьютеров находятся дальше от глаз читателя чем книга, то метрический размер текста на экране должен быть больше чем размер его в книге.
Многие считают, что для экранной типографики вопрос «романский или гротеск?» отвечает сам на себя. На самом деле не все так просто. Не смотря на общее убеждение, оба вида шрифтов хорошо смотрятся на экране при размере больше 12px. Романский шрифт размером менее 12px смотрится размыто, но (и это подводит нас ко второму пункту) на современных мониторах 12px определенно слишком маленький размер.
Обычно выбор падает между serif (романский) и sans serif (гротеск). На самом деле это сложная задача, но есть простое правило, которое может помочь вам: . Один не лучше другого, но по разным причинам в романских шрифтах чувствуется авторитарность, гротеск же отдает демократичностью. Пять тысяч лет истории типографии описаны в двух строках, поэтому не воспринимайте это слишком серьезно.
Мы создали свой собственный шрифт для этого сайта что бы поэкспериментировать с градацией. Мы выбрали serif поскольку он соответствует нашему тону и прекрасно отображает изысканность контента (по крайней мере, нам так кажется). Для мы выбрали моноширинный шрифт. Поскольку главная цель нашего приложения помочь вам быстро и легко работать, мы специально выбрали Nitty шрифт, который смотрится сильно и в то же время аккуратно. Решение использовать моноширинный шрифт так же пришло от того, что ОС первого iPad'а не поддерживает автоматический кернинг пропорциональных шрифтов. Вместо использования плохо отрисовующихся пропорциональных шрифтов мы сразу решили использовать моноширинный шрифт.
Рано или поздно вам придется решать какой шрифт вы хотите использовать. Выбор шрифта это в основном дело тона, но так как каждый шрифт имеет свои качества и требования (или ограничения), выбор шрифта имеет много визуальных и технических последствий. Благодаря web-fonts у вас появился огромный выбор шрифтов, что делает этот процесс еще более сложным.
Примечание: Responsive Web Design имеет ряд макро-типографических проблем (размер шрифта, межстрочный интервал, ширина колонок). Таким образом RWD уже включает в себя отзывчивую типографику. То на чем мы были сосредоточены в нашем первом посте об отзывчивой типографике, в основном касалось использования градуированных шрифтов. Далее я бы хотел поговорить о градации и углубится в основы отзывчивой типографики на дисплеях.
Хотя оба имеют свои преимущества и недостатки, но мы считаем, что адаптивный лэйаут с несколькими вариантами размеров более приемлемый, так как читабельность важнее лэйаута который всегда идеально вписывается с размер экрана. Это довольно спорное мнение, но достижение оптимальной читаемости требует определенного контроля над размерами (шириной колонки) текста, и в этом случае резиновый лэйаут создает больше проблем, чем решает.
Резиновые лэйауты: непрерывное изменение лэйаута до всевозможных размеров
Адаптивные лэйауты: изменение лэйаута пошагово определенное количество раз
Что бы избежать разработку лэйаутов для каждого размера экрана многие разработчики приняли концепцию Responsive Web Design. Идея в том, что ваш лэйаут автоматически адаптируется под текущий размер экрана. Существует данной концепции. Но я хотел бы сказать так:
Во время перезапуска нашего сайта я написал короткий пост об отзывчивой типографике, акцентируя внимание исключительно на нашем последнем эксперименте: отзывчивых шрифтах. Не зная истории iA вы пропустите некоторые ключевые аспекты отзывчивой типографики и дизайна на нашем новом сайте. Вместо перемешивания всех наших статей по этой теме, я решил начать с чистого листа и рассказать об отзывчивой типографике шаг за шагом. Это первый шаг.
Когда мы создаем веб-сайты обычно мы начинаем с определения текста документа. Определение основного текста задает ширину главной колонки на странице, все остальное должно произойти само по себе. Должно. До недавнего времени разрешение экрана было более менее одинаковым. Сегодня мы имеем дело с огромным количеством экранов разного разрешения и размеров. Это делает вещи намного сложнее.
Отзывчивая типографика: Основы
Отзывчивая типографика: Основы / Хабрахабр
Комментариев нет:
Отправить комментарий