Какой размер в пикселях оптимален для чтения
Сегодня расставим точки над «i» и разберемся в этом очень хитром вопросе.
Часто встречающиеся вопросы на эту тему: меньше или больше dpi? Чем больше – тем лучше качество фотографии? И как это связано с размером самой фотографии?
Все чаще и чаще встречается заблуждение о «качестве» снимков и требуемых 300dpi.
Для начала определим, что такое dpi… Dpi – это параметр, указывающий на разрешение изображения на дюйм при его печати. И тут внимательный читатель задумается. Да-да, именно при печати. И пока вы не печатаете изображение, а просто смотрите на мониторе, обрабатываете в фотошопе – dpi вообще не имеет никакого значения. Оно не влияет ни на качество, ни на то, какого размера вы будете распечатывать фотографию (10*15 или А4) и вообще ни на что не влияет. Единственный важный параметр пока у вас фото в цифровом виде – это размер в пикселях. И всё! Такова суровая реальность.
Давайте разберемся по порядку:
1. Что если меньше или больше 300?
Да можно сколько угодно. Пока не печатаете, то никакой разницы, хоть 1dpi, хоть 1000dpi.
2. А как же качество? Ведь при 300 все хорошо будет, так везде в интернетах пишут и вообще это у всех на слуху. Значит, что если значение меньше, то качество хуже?
Как я уже написал выше – качество никак не связано с параметром dpi. Точка. Смиритесь с этим.
3. Ну а если я собираюсь напечатать фотографию? Тогда этот параметр уже важен и тут чем больше – тем лучше?
Не совсем. Этот параметр указывает, сколько точек (читай: пикселей) будет напечатано на дюйм изображения. При этом значение dpi можно поставить любое. Например, есть фото размером 4000*6000 пикселей. При 300dpi его можно напечатать размером 34 см * 51 см (округлил десятые). Но при этом можно напечатать и с другим значением dpi. При 150dpi – это будет 67,7 см * 101,6 см.
4. А какое значение тогда ставить?
Это уже зависит от того, куда идет печать. Если в глянцевый журнал, то 300dpi вполне подходит. Для дома в семейный альбом – 100-300dpi (примерно). А для для огромного билборда вообще хватит 20-70dpi.
Но повторюсь еще раз – размер в пикселях важнее, если речь идет о качестве! Представьте, что у вас на компьютере есть 2 фото: Одно размером 600*800 пикселей с 600dpi. И второе 2000*3000 пикселей с 70dpi. Какое из них можно напечатать больше и качественней? Казалось бы, первый, у него целых 600dpi - круто, значит его! Но нет, физический размер в пикселях больше у второго файла, не смотря на жалкие 70dpi. Сам параметр dpi, пока он в цифровом файле, ничего не значит. При печати этих двух файлов уже можно выбрать требуемое значение dpi. Мы его усредним до адекватного значения 250 (тут можно было любую цифру взять) и получим физический отпечаток первого файла 6,1 см * 8,1 см, а второй 20,3 см * 30,5 см. Как видите, у кого размер в пикселях больше – у того физический размер при печати больше.
5. Откуда тогда 300dpi и почему его почти везде требуют?
Я не знаю, откуда взялась цифра именно 300, но при таком значении типография или фотолаба вам как бы гарантирует отличное качество печати (с учетом, что и размер в пикселях соответствует). По сути, это усредненная цифра, которая может варьироваться в зависимости от ваших задач при печати.
На этом фото открыты 2 фотографии в фотошопе. У фотографии слева 900dpi. У фото справа 1 dpi. Как видите, физически они выглядят абсолютно одинаково.
Если вдруг вам попался человек, который называет себя профессионалом и требует от вас какие-то нелепые 300 dpi, сам не понимая, что они значат – это неуч с которым не стоит работать. Не может человек быть профессионалом, если ему нужны какие-то параметры, в которых он сам ничего не понимает. Лучше отказаться от услуг такого человека. Будь-то ретушер, фотограф, иллюстратор или еще кто-либо.
А теперь немного лирики. Я уже давно собирался написать эту статью, но все откладывал. А последнее время всё чаще и чаще объясняю людям, что dpi при цифровом виде фотографии ничего не значит. Накипело.
Из реальных случаев:
1 – Пишет мне заказчик. Изначально был скан фотографии. А на выходе нужно, цитирую: «Нужно качество около 600dpi, т.е. цифровое фото, а не редактированнный скан..».
2 – В одном паблике ретушеров зашел разговор о том, сколько выставлять dpi при ретуши… И вот цитата одного ретушера: «Меня как-то хотели заставить переделывать, потому что стояло 240.».
3 – Нам нужна фотосессия, 10 фото на выходе с 300dpi.
Я надеюсь, вы тоже оценили абсурдность этих случаев. и это только за последнюю неделю.
Лаура Франц, UX-эксперт и профессор Массачусетского университета Дартмут, опубликовала в издании Smashing Magazine материал о том, как создателям интернет-проектов следует работать с текстом при применении адаптивного дизайна. ЦП выбрал самые интересные моменты из этой статьи.
Дизайн в векторе
Есть пара практических уроков, которые вам стоит извлечь из всего этого. Для начала, вы должны создавать дизайны в векторе. Это позволяет нашим интерфейсам, иконкам и прочей графике масштабироваться в любой нужный размер.
Второй урок: мы должны все рисовать в масштабе 1х. Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. Масштабирование 2x-графики на 150% для создания версии в 3х провоцирует появление размытых контуров, поэтому это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить четкость.
Разрешение макетов приложений для iPhone должно быть не 750×1334, а 375×667 — это как раз то разрешение, в котором приложение будет отображаться. Большинство инструментов дизайнера не отличают пункты от пикселей, так что можно считать, что пункты и есть пиксели, а затем просто экспортировать исходники в двукратном и трехкратном размерах.
Как читают люди
По мнению Лауры Франц, шрифт на странице должен быть такого размера, чтобы его было комфортно читать. Однако понять, что в конкретном случае будет удобно, а что нет, можно только предварительно разобравшись с тем, как вообще пользователи читают текст в интернете.
Существует три основных способа прочтения текста в интернете. В 2006 году исследовательская организация Nielsen Norman Group опубликовала изображения «тепловых карт», полученных в ходе изучений того, как пользователи смотрят на веб-страницы (eye-tracking). На этих изображениях зоны веб-страницы, на которые испытуемые обращали больше всего внимания, обозначены красным цветом, менее востребованные зоны отображены желтым, а наименее востребованные участки — фиолетовым.
Сочетание красных и желтых зон часто формирует различные вариации символа F — это подтверждает тот факт, что пользователи читают текст в сети, выборочно сканируя страницу для получения понимания ее контента, но не более того.
Кроме того, посетители изучают страницу для того, чтобы решить свою задачу — они «перепрыгивают» взглядом с элемента на элемент, пытаясь найти нужную информацию. Часто они читают лишь одно слово или даже пару символов на строке. На тепловой карте ниже изображены движения глаз пользователя, изучающего поисковую выдачу Google — первые два результата человек читал медленнее, а затем начинал сканировать страницу, не задерживаясь надолго ни на одной строке. Поэтому в левой части изображения нет четкой вертикальной «линии взгляда»:
Также пользователи могут читать текст увлеченно — это происходит, когда они находят интересную статью или запись в блоге. В таком случае человек читает медленнее и внимательнее. На изображении ниже изображена тепловая карта подобного взаимодействия с контентом — цвета на изображении распределены равномернее, чем в двух предыдущих случаях. При этом к низу тепловой карты цветовая интенсивность падает — очевидно человек потерял интерес к тексту, «проскользил» взглядом по левой стороне странице и завершил работу с ней.
Межстрочный интервал и размер шрифта
Франц убеждена, что для установки верного межстрочного интервала необходимо учитывать несколько параметров (семейство шрифтов, длина строки в адаптивной верстке, размер шрифта, используемый язык). При этом наиболее важным параметром является как раз размер шрифта. Более мелкий шрифт требует большего межстрочного интервала, а не наоборот, как могло бы показаться. Больший межстрочный интервал облегчает распознавание слов и способствует горизонтальному движению взгляда, когда человек устает читать маленький текст.
Слева: межстрочный интервал составляет 150% от размера шрифта, но на iPhone текст читать сложно. Справа: тот же самый контент с немного увеличенным межстрочным интервалом читается гораздо легче.
Правила можно нарушать
При разработке адаптивной версии сайта ее тестирование только на больших размерах экранов не позволяет точно определить, как текст будет выглядеть на маленьких устройствах. Для обнаружения ошибок в дизайне Франц рекомендует использовать длину строки и ее идеальные пропорции, однако призывает не забывать о том, что правила создаются, чтобы их нарушать.
Даже упомянутый Ян Чичолд нарушал собственное правило и использовать центрированный текст на протяжении большей части своей карьеры. Если выбор стоит между удобством пользователя и сохранением идеальных пропорций — удобству должен быть отдан приоритет. Контент, который удобно читать, позволяет пользователям найти то, зачем они пришли на сайт — а в этом и состоит его главная задача.
Дизайнер Питер Ноуэлл в своем блоге написал о плотности пикселей в дизайне мобильных приложений — объяснил, что это такое и рассказал о проблемах, с которыми сталкиваются дизайнеры, проектируя интерфейсы для разных устройств.
Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.
В видео затронуто большинство тем статьи, но если вы заинтересованы в подробностях, — продолжайте читать
Плотность пикселей — это количество пикселей, вмещающееся в определенном физическом размере (обычно, в дюйме). На первом компьютере Mac было 72 пикселя на дюйм, — число кажется большим, но на самом деле это были огромные пиксели, под которые подходила не каждая графика.
Иконки на компьютере Macintosh 1984 года. Дизайнер Сьюзан Каре
С тех времен технологии экранов заметно продвинулись вперед, — сейчас даже самые простые дисплеи имеют разрешение между 115 и 160 пикселей на дюйм (PPI— pixel per inch). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с Retina-дисплеем — суперчетким экраном, удвоившим количество пикселей на дюйм. В результате графика стала четче, чем когда-либо.
Разница особенно хорошо заметна в иконке приложения почты и в тексте
Чтобы поддерживать те же физические размеры элементов пользовательского интерфейса, пришлось увеличить количество пикселей на дюйм. Кнопка, которая раньше занимала 44px, стала занимать 88px.
Для совместимости между разными устройствами дизайнеры должны выпускать графику для обычных дисплеев и для Retina-дисплеев. Но тут возникла еще одна проблема: теперь дизайнер не может сказать, что какой-то элемент должен быть, например, 44 пикселя в высоту, потому что на другом устройстве этот же элемент должен быть в два раза выше.
Решением стали пункты (points), или pt. Один пункт соответствует одному пикселю на экранах до поколения Retina и двум пикселям на экранах с Retina. Теперь, если дизайнеру говорят, что высота какого-либо элемента — 44 пикселя, он может адаптировать этот размер под любой коэффициент плотности пикселей — 1х, 2х или 3х в случае с iPhone 6 Plus.
Восприятие масштаба
- точности метода ввода (сенсор или курсор);
- физических размеров экрана;
- расстояния до экрана.
Кнопка на экране телевизора должна быть размером с телефон — потому что иначе ее нельзя будет увидеть, сидя на диване.
Вот менее драматичный и очень правдивый пример: иконки приложений на планшете должны быть больше таких же иконок на телефоне. Это реализуется двумя способами: с помощью меньшей плотности пикселей или разных размеров иконок.
Размер формата A4 (210 × 297 мм) в пикселях
при DPI = 75, разрешение формата А4 имеет 620 × 877 пикселей;
при DPI = 150, разрешение формата А4 имеет 1240 × 1754 пикселей;
при DPI = 300, разрешение формата А4 имеет 2480 × 3508 пикселей.
Разные размеры
Иногда низкой плотности пикселей недостаточно — отдельные элементы дизайна должны быть еще больше. Это случилось с иконками на iPad. На iPhone их размер 60×60 пикселей, но экран на iPad больше, так что практичнее иконки размером 76×76 пикселей.
Изменение размера элементов интерфейса под разные устройства — дополнительная работа дизайнера.
Размер формата A3 (297 × 420 мм) в пикселях
при DPI = 75, разрешение формата А3 имеет 877 × 1240 пикселей;
при DPI = 150, разрешение формата А3 имеет 1754 × 2480 пикселей;
при DPI = 300, разрешение формата А3 имеет 3508 × 4961 пикселей.
Какой размер в пикселях имеют листы формата A5, А4, А3, A2, A1, A0 в зависимости от DPI?
Ниже можно найти соответствие значений разрешения исходного изображения и размеров листа бумаги, на который производится печать (данные рассчитаны для разрешения печати 75 DPI, 150 DPI и 300 DPI).
Статические веб-страницы и размер шрифта
Главный плюс адаптивного дизайна, относящийся к чтению текста, заключается в том, что пользователям мобильных устройств не нужно использовать зум и передвигать видимую зону экрана для чтения.
Если структура страницы статичная (например, две колонки текста, как на изображении ниже), то при использовании рекомендованной длины строки, текст может получаться слишком мелким — на устройствах с небольшими экранами прочитать его можно будет только с помощью «зума».
Слева: Главная колонка текста имеет рекомендованную длину, однако без адаптивной структуры, он слишком мал для устройств с небольшими экранами. Справа: Размер шрифта (Verdana 13 пикселей для левой колонки, Georgia 18 пикселей для введения и 16-пиксельная Georgia для основного контента) хорошо подходит для чтения на ноутбуке.
Низкая плотность пикселей
Крупные экраны, на которые мы смотрим на расстоянии, обычно располагают меньшей пиксельной плотностью. У телевизора может быть 40 пикселей на дюйм — и, как правило, этого хватает. Плотность пикселей Retina-дисплеев на iPad составляет около 264 ppi; на iPhone — 326 ppi. Так как пиксели на iPad больше (а плотность меньше), весь интерфейс становится немного больше. Это объясняется дополнительным расстоянием между глазами пользователя и экраном iPad.
Межстрочный интервал влияет на горизонтальное движение глаз
Поскольку пользователи сканируют контент горизонтально и вертикально, то строки должны восприниматься глазом в качестве одной линии, а не вызывать ощущения «волны». Слишком «плотно сбитый» текст может усложнить горизонтальное движение и вынуждать читателя переводить взгляд ниже по левому краю страницы. Кроме того, это усложняет понимание информации и может заставить пользователя перечитывать ее.
С другой стороны, при чтении слишком свободно расположенного текста с большим межстрочным интервалом может возникать впечатление «разъезжающихся строк». Строки в таком случае не воспринимаются в качестве единого элемента, что усложняет вертикальное сканирование контента. Франц говорит, что не существует общепринятых стандартов идеального межстрочного интервала, но советует устанавливать его в размере, равном примерно 150% размера шрифта.
Размер формата A5 (148 × 210 мм) в пикселях
при DPI = 75, разрешение формата А5 имеет 437 × 620 пикселей;
при DPI = 150, разрешение формата А5 имеет 874 × 1240 пикселей;
при DPI = 300, разрешение формата А5 имеет 1748 × 2480 пикселей.
Как определяется количество пикселей соответствующее формату листа бумаги?
Как уже говорилось выше, достаточным качеством для переноса графики на бумагу принято считать разрешение печати 300 DPI. Чтобы распечатать фотографию или просто картинку в таком качестве на листе формата A4 (297 × 210 мм) необходимо иметь исходное изображение с разрешением 3508 × 2480 пикселей, если требования к качеству снизить вдвое до 150 DPI, то будет достаточно исходного разрешения 1754 × 1240 пикселей, а для печати текста достаточно 75 DPI и разрешения 877 × 620 пикселей.
В любой нестандартной ситуации можно прибегнуть к запрещенным приемам и воспользоваться математикой. Например, чтобы узнать необходимое разрешение исходного изображения для печати можем построить следующую формулу:
R = L × DPI / 25,4
R — искомое разрешение стороны;
L — длина стороны в мм;
DPI — требуемое качество печати;
25,4 — перевод дюйма в сантиметры (1 дюйм примерно равен 2,54 см) и умножить на 10 для перевода в миллиметры.
Необходимо распечатать снимок в качестве 150 DPI на лист A4 (297 × 210 мм). Получаем:
R (высота) = 297 × 150 / 25,4 = 1754 пикселей;
R (ширина) = 210 × 150 / 25,4 = 1240 пикселей.
Соответственно, исходное разрешение должно быть 1754 × 1240 пикселей, что совпадает с данными приведенной выше таблицы.
Идеальные цифры: от 45 до 75 символов
Существует множество «правил» относительно того, какой должна быть горизонтальная строка текста. Лаура Франц цитирует Джеймса Крейга, который в 1971 году написал в своей книге «Дизайн с типографикой» (Designing with type):
Чтение длинной строки вызывает усталость: читатель вынужден поворачивать голову к концу строки, а затем искать глазами начало следующей. Слишком короткие строки способствуют разбитию на части слов или фраз, которые обычно воспринимаются в качестве общей текстовой единицы.
Если усталость настигнет читателя, который ищет на странице нужную информацию, то он просто станет сканировать ее по левому краю. Если пользователь, увлеченно изучающий текст, устанет, то он может случайно начать читать одну и ту же строку по второму разу (феномен, названный «дублированием»).
Часто в качестве идеальной длины строки называют цифру 65 символов. Считается, что в интернете хорошо работают тексты, строки в которых насчитывают от 45 до 75 символов. Лаура Франц, однако, говорит, что согласно ее опыту, верхнюю планку можно раздвинуть до 85 символов на строку (включая пробелы и знаки препинания).
Длина строки и чтение
Типографы обсуждают связи вертикальных и гоизонтальных движений глаз уже почти столетие. Еще в 1928 году Ян Чихолд (Jan Tschichold) заявил о минусах текста, выровненного по центру, и рекомендовал выравнивание по левому краю. Он считал, что это поможет читателям в восприятии информации — появление четкой вертикальной линии по левому краю страницы, которую человек может использовать после прочтения горизонтальной строки для перехода к следующей.
Межстрочный интервал и чтение
На то, как люди читают текст, влияет не только зависимость между размером шрифта и длиной строки в адаптивных структурах сайтов, но и межстрочный интервал текста.
Небольшие устройства и размер шрифта
На устройствах с маленькими экранами шрифт изначально выглядит меньшим по сравнению с его отображением на компьютере. Франц говорит о том, что это нормально, поскольку пользователи в процессе чтения подносят мобильные устройства ближе к глазам. В настоящее время распространен подход, при котором в адаптивной верстке используются шрифты меньшего размера, но достаточного для сохранения «читабельности». При этом сохранение идеальной длины строки не обязательно — идеальный с точки зрения размера, но слишком мелкий текст делает адаптивный сайт бесполезным, поскольку провоцирует пользователей на прокрутку и «зум» страницы.
Слева: для сохранения длины строки размер шрифта уменьшен до 12 пикселей Verdana и 14-пиксельной Georgia, что усложняет чтение. Справа: 13-пиксельная Verdana и Georgia 17 пикселей позволяют улучшить «читабельность», хотя длина строки теперь и не является идеальной.
Притворяйся, пока это не станет правдой
Стоит упомянуть, что иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в пункты, например, 3х, а на самом деле, он 2,61х, а сам исходник масштабируется в 3х для удобства. Так поступает, например, iPhone Plus. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920.
Создавайте дизайн под iPhone Plus так, как если бы он был 3x. Телефон сам отмасштабирует его в 87%
Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно — линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шанс, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.
Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не слишком качественно.
Такое масштабирование нежелательно, так как все, что вы хотите сделать четким, станет размытым из-за интерполяции. К сожалению, по мере того, как плотность пикселей доходит до 4x и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат.
Разрешение печати
Собственно, загвоздка заключается в том, что при печати у нас появляется новая переменная, с которой не знаком среднестатистический пользователь — разрешение печати. Лишь узкий специалист, занимающийся полиграфией, рекламой, фотопечатью и т.п., может без труда назвать минимально необходимое разрешение для создания физического изображения на огромный биллборд, небольшую визитку или футболку с принтом. Мы же в этом материале остановимся на распространенных примерах печати, с которыми каждый из нас может столкнуться в повседневной жизни (печать на листы формата А4, А3, A2, A1, A0), а также выведем простую формулу для расчета необходимого разрешения для любой поставленной задачи.
Сколько нужно пикселей для качественной печати
Естественно, параметр DPI не имеет ровно никакого значения, пока изображение остается на вашем мониторе, зато критически важным показателем является разрешение исходного файла. Вы не сможете качественно распечатать фотографию на листе A4 с качеством 300 DPI, если исходное изображение на экране имеет разрешение 1024 × 768 пикселей.
Стандартные величины DPI используемые в печати
Разрешение 75 DPI — для текстовых документов;
Разрешение 150 DPI — минимальное качество для печати изображений;
Разрешение 300 DPI — общепринятое качество для печати фотографий.
Чтение — сложный процесс
Существует три основных сценария чтения текста в интернете, однако этим особенности чтения в сети не ограничиваются. Исследователи выяснили, что пользователи не читают все слова на странице, вместо этого они используют свое центральное зрение для того, чтобы сфокусироваться на конкретном слове, а периферическим зрением воспринимают сопутствующую информацию:
Пользователи не читают все слова на странице
При чтении используется периферическое зрение
Кроме того, известно, что посетители не фиксируют взгляд на одном слове, а осматривают сразу несколько (глаза описывают небольшие круги, называемые «саккадами»). Чаще всего так поступают пользователи, которые просматривают страницу в поисках нужной информации или просматривают ее для того, чтобы понять, интересен ли контент.
Кроме того, во время чтения одной строки текста пользователи обычно охватывают взглядом и следующую строку. Поэтому взгляд не только перемещается горизонтально, но и немного «подергивается» по вертикали. Из-за этой борьбы вертикального и горизонтального движения и возникают F-образные фигуры на тепловых картах.
PT и DP
Конечно, это все актуально не только для устройств Apple. Каждая операционная система — десктопная или мобильная — поддерживает экраны с высоким ppi/dpi. В Google придумали свою независимую от пикселей единицу измерения для Android, которая называется DIP — пиксель, не зависящий от плотности, сокращенно «dp». Это не эквивалент пунктам в iOS, но идея похожа. Это универсальные единицы измерения, которые можно конвертировать в пиксели с помощью масштабного множителя устройства (2x, 3x ).
Возможно, вас интересует физический размер пункта. На самом деле, дизайнеры интерфейсов не должны об этом думать, так как у них нет контроля над аппаратными особенностями экранов разных устройств. Дизайнерам нужно знать, какие плотности пикселей принял производитель для своих устройств, и позаботиться о подготовке интерфейсов в 1x, 2x, 3x и так далее.
В устройствах Apple нет единой плотности пикселей, которая представляет один пункт — это зависит от конкретного устройства (см. «Восприятие масштаба» ниже). В iOS пункт варьируется от 132 точек на дюйм до 163 точек на дюйм. На Android DIP всегда равен 160 ppi.
Размер шрифта и чтение
Для хорошей читабельности текста важна не только длина строк, но и размер самого шрифта. Это хорошо известный факт, однако при использовании адаптивного дизайна, когда страница с одним и тем же контентом, может быть представлена в различных вариантах, шрифт часто получается или слишком большим или слишком маленьким.
Контролируемый хаос
На ранних порах развития мобильных устройств с высоким разрешением плотность пикселей была просто 1х или 2х. Но сейчас все иначе — есть масса пиксельных плотностей, которые должен поддерживать интерфейс. В Android есть отличный пример: на момент написания этого поста разные производители поддерживают шесть разных плотностей пикселей. Это означает, что иконка, которая имеет одинаковый размер на всех экранах, на самом деле должна быть выполнена в шести разных вариациях. Для Apple актуально два или три разных исходника.
Большие устройства и размер шрифта
При разработке адаптивных сайтов следует помнить о том, что размер шрифта и длина строки текста важны не только в случае мобильных устройств. Большинство пользователей все еще открывает сайты с ноутбуков и настольных компьютеров. Часто адаптивная верстка подразумевает наличие одной колонки, которая расширяется с увеличением экрана устройства.
Это решение может быть элегантным и эффективным, но также может провоцировать возникновение проблемы с шрифтами — в какой-то момент символы могут стать слишком большими. Воспринимать информацию, представленную подобным образом, не очень удобно — крупный шрифт занимает больше пространства по горизонтали, что усложняет привычный паттерн чтения, при котором пользователи воспринимают часть текста периферическим зрением.
Слишком крупный текст заставляет пользователей замедлять чтение и прилагать большей усилий к усвоению информации — горизонтальное чтение становится неудобным, что провоцирует человека на то, чтобы начать бегло просматривать страницу, взглядом придерживаясь ее левого края.
Когда шрифт становится слишком крупным, читатель все равно пытается использовать привычный ему «горизонтальный ритм». Это вынуждает человека читать слова частями, а не целиком, снижая скорость чтения и прилагая к этому больше усилий.
Лаура Франц говорит, что создателям сайтов не следует гнаться за идеальной длиной строки текста на странице — сохранение идеальных величин будет провоцировать увеличение шрифта для более крупных экранов, а это может сделать контент нечитабельным.
На практике гораздо более эффективным методом является сохранение общей «читабельности» текста с простым выравниванием по ширине. Если же этого не делать и увеличивать шрифт с сохранением идеальной длины строки, то читать такой текст на большом экране не очень удобно. Пример подобной ошибки — сайт проекта A List Apart, текст на котором хорошо считывается на маленьком экране мобильного устройства, но становится слишком большим на экране ноутбука.
Размер формата A2 (420 × 594 мм) в пикселях
при DPI = 75, разрешение формата А2 имеет 1240 × 1754 пикселей;
при DPI = 150, разрешение формата А2 имеет 2480 × 3508 пикселей;
при DPI = 300, разрешение формата А2 имеет 4961 × 7016 пикселей.
Размер формата A0 (841 × 1189 мм) в пикселях
при DPI = 75, разрешение формата А0 имеет 2483 × 3511 пикселей;
при DPI = 150, разрешение формата А0 имеет 4967 × 7022 пикселей;
при DPI = 300, разрешение формата А0 имеет 9933 × 14043 пикселей.
Материалы по теме
Мы только что обсудили массу сложностей, с которыми сталкиваются дизайнеры. К счастью, в разработке интерфейсов используются единицы, которые не зависят от плотности (как pt или dp).
По мере развития технологий увеличивается как размер экранов, так и плотность пикселей. Казалось бы, качество изображений должно расти, утомляемость при длительной работе — уменьшаться, но в какой-то момент всё пошло не так. И да, если взять современный совсем большой монитор и навороченную среду разработки с тысячей панелей – не факт, что будет комфортно. Попробуем разобраться почему.
Давным давно в одной далёкой галактике размер мониторов был 14", стандартный текстовый режим — 80*25 и работать было вполне приятно. Когда появилась Windows и графический режим 800*600 то буквы в средах разработки, меню, полях ввода и т.п. стали существенно меньше — ведь так их гораздо больше влезет на экран! Потом появились большие разрешения, стандартный монитор вырос до 17”, потом соотношение сторон стало 16*9, разрешение и размер всё росли… В какой-то момент я понял, что стандартная схема Windows 7 даже с масштабом в 125% как-то мелковата что ноутбуке 14” c FullHD, что на большом мониторе, уже не говоря о настройках по умолчанию в IDEA.
– Это старость, подумал Штирлиц.
– А я то тут причём ?? подумал агент Старость.
Вооружившись ГОСТ Р ИСО 9241-3-2003, рулеткой и школьным курсом алгебры с геометрией, я решил проверить, так ли я неправ, выбирая крупные шрифты для кодирования (сейчас мой фаворит – Roboto Mono Light 20 от Google), и сильно увеличивая масштаб документа при работе с офисными пакетами.
Исходные данные: в соответствии с ГОСТ комфортный угловой размер символа по высоте – 20’-22’ (угловые минуты). Угловой размер – штука универсальная, но неудобная. В том же ГОСТе приведена номограмма зависимостей расстояния от монитора – размер символа – комфортный размер, но пользоваться ей в реальности тяжело – символы мелкие, линейка крупная, картинка нечёткая. Наш путь – простой калькулятор, куда можно ввести легко доступные и общеупотребительные меры и понять, правильно соответствует ли размер символа требованиям стандарта.
Для расчёта необходимы диагональ монитора, его разрешение по X и Y, расстояние, с которого смотрим и высота контрольного символа в пикселах. Все данные, кроме расстояния, можно получить не отходя от того же самого монитора, с расстоянием тоже не сложно – лист А4 имеет размеры 21*29,7 см, так что можно прикинуть с достаточной точностью. Высоту пикселя монитора можно рассчитать исходя из его диагонали и разрешения, угловой размер символа – зная его размер в пикселях и расстояние просмотра. Калькулятор временно живёт в Excel по ссылке ниже.
Проверка 1: монитор ноутбука 14” FHD, стандартная схема Windows 125%, высота заглавной буквы в меню Excel 2010 – 9 пикселов, расстояние просмотра – 45 см, угловой размер буквы – 11’, что в два раза меньше требуемой стандартом. Проверка 2: монитор аж 27”, но уже 2560*1440, расстояние – 60 см, Результат чуть лучше – 12’, но всё равно плохо (минимум – 20’).
Чтобы стало лучше – нужно увеличивать размер шрифта либо уменьшать расстояние просмотра. Проверяем: для размера той же буквы в 21’ нужно смотреть в ноутбук с расстояния (спонсор расчёта – опция Подбор параметра в Excel) – 34,4 cм, но во первых, так болит спина, а во вторых, не забываем про минимальное расстояние из ГОСТ – 40 см. Размер комфортного для меня шрифта для кодирования в IDEA (Roboto Light 20, буква “S” 15 пикселей высотой) для большого монитора как раз вписался в стандарт, пусть и по нижней границе — 20’. Масштаб документа в Word (реально крупный масштаб), в котором я пишу эту статью, откинувшись на спинку стула, также почти попал – 75 сантиметров до монитора, символ в 18 пикселей высотой – итого 19’.
* ГОСТы пишутся не просто так :);
* В первую очередь нужно доверять своим ощущениям комфорта, а не настройкам по умолчанию;
* Проверяйте размеры шрифтов на устройствах, которыми вы пользуетесь подолгу.
Главная › Инструкции › Какой размер в пикселях имеют листы формата А4, А3, A2, A1, A0 в зависимости от DPI?
Практически каждый современный пользователь ПК и мобильных гаджетов примерно ориентируется в разрешениях чего бы то ни было и в состоянии отличить по количеству пикселей камеру с лучшей матрицей, монитор с лучшей картинкой и видеоролик с лучшим качеством. Однако при переносе контента с «цифры» на живую бумагу у многих возникают проблемы.
Что такое DPI
Итак, разрешение печати измеряется в DPI (dots per inch), то есть, в количестве точек на квадратный дюйм (1 дюйм = 25,4 мм). Легче всего объяснить этот параметр на примере принципа работы такого устаревшего устройства, как матричный принтер — в данном случае DPI соответствует количеству ударов иголок с краской в область площадью 1 × 1 дюйм.
Размер формата A1 (594 × 841 мм) в пикселях
при DPI = 75, разрешение формата А1 имеет 1754 × 2483 пикселей;
при DPI = 150, разрешение формата А1 имеет 3508 × 4967 пикселей;
при DPI = 300, разрешение формата А1 имеет 7016 × 9933 пикселей.
Читайте также: