[Инфографика] Размер «текста мелким шрифтом» для 14 популярных приложений / Хабр
Условия использования: длина обычных цифровых контрактов
Вы ведь не особо спешите и внимательно читаете условия о предоставлении услуг, прежде чем согласиться на загрузку последней версии приложения или программного обеспечения?
Так ведь?
Ну, если уж честно, то…
Мир наводнён приложениями и интернет-услугами, которые просят потенциальных пользователей подмахнуть соглашение о предоставлении услуг. Большинство людей просто нажимают «Согласен» и переходят к следующему шагу. Чтение подобной документации вгоняет в сон, а ведь так хочется побыстрее заполучить желанную программу.
Вдохновившись арт-проектом дизайнера Димы Яровинского «Я согласен», сегодняшняя статья визуализирует длину соглашений о предоставлении услуг, подсчитывая слова и время, требуемое для ознакомления с каждым из них.
Перевод сделан при поддержке компании EDISON.Отзыв: 10 плюсов программистов из EDISON Диагностика хранилища документов Vivaldi
Все куда-то спешат
Средняя скорость чтения у большинства взрослых — 200-250 слов в минуту. Студенты колледжа, вероятно из-за того, что они очень прилежны и избегают поверхностности, увеличивают скорость до 300 слов в минуту. Для этого анализа мы взяли время считывания 240 слов в минуту.
Приложение/ сервис |
Количество слов |
Сколько минут на чтение? (240 слов/мин.) |
---|---|---|
Microsoft | 15 260 | 63.5 |
Spotify | 8 600 | 35.8 |
Niantic (Pokemon Go) | 8 466 | 35.![]() |
TikTok | 7 459 | 31.4 |
Apple (Media Services) | 7 314 | 30.5 |
Zoom | 6 891 | 28.7 |
Tinder | 6 215 | 25.9 |
Slack | 5 782 | 24.1 |
Uber | 5 658 | 23.6 |
5 633 | 23.5 | |
Bumble | 5 442 | 22.7 |
Snapchat | 4 935 | 20.6 |
4 346 | 18.![]() |
|
4 132 | 17.2 | |
3 459 | 14.4 | |
Amazon | 3 416 | 14.2 |
YouTube | 3 308 | 13.7 |
3 267 | 13.6 | |
Dropbox | 2 704 | 11.3 |
Netflix | 2 628 | 11.0 |
Соглашение от Microsoft занимает почётное первое месте в списке, на чтение уйдёт час с гаком — это чуть быстрее, чем насладиться шекспировской «Макбет». Справедливости ради заметим, талмуд от мелко-мягких, вроде бы, охватывает весь набор продуктов компании.
Эти соглашения представляют собой понимание того юридического тупика, который имеет место, когда речь заходит о регулировании использования этих приложений. Существует множество соглашений, которые ещё глубже погружаются в болото юридического крючкотворства. Среднестатистическому американцу по-хорошему понадобилось бы 250 часов, чтобы как следует изучить все цифровые контракты, которые он принимает при использовании онлайн-сервисов.
Несмотря на это, пользователи смутно подозревают, что тратят своё время на изучения такого договора, который невозможно не изменить, не отказаться от него — или, что более важно, не в силах даже понять.
Не все тексты одинаково читабельны: тест на лёгкость чтения
Видимо, тоже имея печальный опыт с подобными «простынями», доктор Рудольф Флеш заметил, что некоторые тексты, в особенности написанные юридическим языком, созданы как будто бы специально так, чтобы настолько максимально затруднить чтение, насколько это возможно.
Не в меру длинные предложения, обильно сдобренные загадочными терминами, затрудняют понимание простых вещей. Флеш решил измерить вариативность понимания прочитанного — и, изучая различные виды письма, разработал формулу для определения читабельности того трудноусвояемого чтива, которое нам скармливают юристы.
В тесте «Лёгкость чтения по Флешу» (Flesch Reading-Ease test) более высокие баллы соответствуют материалу, который проще читать. Меньшие цифры относятся к пассажам, которые сложнее для понимания. Формула для теста Flesch Reading-Ease Score (FRES):
Показатель читабельности использует две метрики:
- Количество слов в предложении
- Количество слогов в слове
Исходя из этой оценки, текст будет соответствовать определённому уровню образования.
Значение | Уровень | Слов в предложении (средн.-арифм.) |
Слогов на 100 слов |
---|---|---|---|
100-90 | 5 класс | 8 | 123 |
90.![]() |
6 класс | 11 | 131 |
90.0-70.0 | 7 класс | 14 | 139 |
70.0-60.0 | 8-9 класс | 17 | 147 |
60.0-50.0 | 10-12 класс | 21 | 155 |
50.0-30.0 | Колледж | 25 | 167 |
30.0-0.0 | Выпускник колледжа | 29 | 192 |
Оценим соглашения о предоставлении услуг в нашей выборке с точки зрения теста Flesch Reading-Ease:
Приложение /сервис |
Лёгкость чтения (по Флешу) |
Эквавалентно уровню |
---|---|---|
56 | 10-12 класс | |
56 | 10-12 класс | |
54 | 10-12 класс | |
54 | 10-12 класс | |
Microsoft | 54 | 10-12 класс |
Snapchat | 54 | 10-12 класс |
Dropbox | 51 | 10-12 класс |
Bumble | 50 | Колледж |
YouTube | 50 | Колледж |
48 | Колледж | |
Apple Media Services | 47 | Колледж |
Tinder | 46 | Колледж |
Amazon | 45 | Колледж |
Netflix | 45 | Колледж |
TikTok | 44 | Колледж |
Spotify | 44 | Колледж |
Zoom | 42 | Колледж |
Uber | 40 | Колледж |
39 | Колледж | |
Niantic (Pokemon Go) | 39 | Колледж |
Хотя эти соглашения не самые трудные для чтения, они определённо содержат достаточное количество юридическх терминов, которые явно не способствуют лёгкости восприятия. Длина и уровень сложности этих соглашений делает их практически бесполезными для обычного человека.
И это проблема. Ибо подрывается фундаментальная концепция информированного согласия. Пользователи отказываются от своих прав, даже не зная от каких именно.
Условия использования: на самом деле продукт — это вы
Эти приложения и программное обеспечение являются передовыми в сборе данных для многомиллиардной индустрии.
Индивидуальная активность и информация легко собираются и хранится, создаются громадные базы пользовательских данных. Маркетологи жадно пускают слюну на этот клондайк поведенческой информации, ибо он позволяет им ориентировать свои продукты на свою идеальную целевую аудиторию с гораздо меньшими затратами, чем в традиционной рекламе.
А вы в курсе, на какие условия подписываетесь не глядя?
Внешний вид (Appearance)
Внешний вид
Расположение в Deskbar: | Настройки (Preferences) | |
Расположение в Tracker: | /boot/system/preferences/Appearance | |
Настройки хранятся по адресу: | ~/config/settings/system/app_server/appearance ~/config/settings/system/app_server/fonts |
С помощью панели настройки Внешний вид вы сможете изменить некоторые свойства внешнего вида Haiku.
Haiku определяет 3 стандартных шрифта для различных целей. Вы можете установить простые, жирные и моноширинные типы шрифтов, а также размеры, которые будут использованы во всей системе. Кроме этого есть еще отдельная настройка для шрифта, использующегося в меню.
Установка новых шрифтов
Новые шрифты, не являющиеся частью стандартного пакета .hpkg, могут быть установлены путем их копирования в соответствующую папку non-packaged в зависимости от их типа (psfonts или ttfonts) (см. также раздел Структура файловой системы). Для шрифтов TrueType это:
/boot/system/non-packaged/data/fonts/ttfonts/ | для шрифтов, доступных каждому пользователю. | |
/boot/home/config/non-packaged/data/fonts/ttfonts/ | для шрифтов, доступных лишь вам. |
На вкладке Цвета вы можете изменять цвет различных элементов интерфейса. Метод drag&drop позволит вам указать нужный цвет из других программ, таких как WonderBrush, Icon-O-Matic или панели Фон.
Декораторы определяют внешний вид окон и всех элелементов пользовательского интерфейса. Сейчас Haiku имеет по умолчанию только один декоратор. Если Вы найдете и установите другие декораторы, Вы сможете выбрать их в данном меню.
Базовый декоратор Haiku позволяет вам настроить стиль стрелок у полосы прокрутки: либо одна стрелка с каждой стороны, либо две (как у BeOS), позволяющие потенциально уменьшить движение мыши при горизонтальной или вертикальной прокрутке.
Вторая вкладка, Сглаживание, позволяет настроить способ отображения текста на экране.
Уточнение
Включенный режим Уточнение выравнивает символы таким образом, что их вертикальные и горизонтальные границы будут располагаться между двумя пикселями. Результатом чего будет превосходная контрастность символов, особенно в случае черного текста на белом фоне. Текст становится более четким. Так же этот режим можно применить исключительно для Моноширинных шрифтов, что особенно полезно на устройствах с низким разрешением, таких как нетбуки. Когда уточнение включено, мелкие шрифты могут выглядеть довольно-таки плохо, но этот режим все же позволит получить выгоду от уточнения в текстовых редакторах и в Terminal.
Заметить разницу, вносимую уточнением, можно, сравнив эти увеличенные снимки экрана:
Уточнение: выключено | Уточнение: включено |
Следует отметить, что текст во всех окнах Magnify на этой странице, разумеется, отображается с различными параметрами уточнения. То есть Вы можете сравнить результаты настройки на реальном примере: заголовок окна, набранный полужирным шрифтом, или же надпись «33 x 15 @ 8 pixels/pixel».
Тип сглаживания
Другой техникой улучшения отображения графики и текста является Сглаживание. Линии сглаживаются за счет смены цвета некоторых пикселей. Применяются два метода сглаживания:
Оттенки серого — меняет интенсивность цвета пикселя на границе.
Субпиксельное сглаживание, гораздо более эффективно, особенно на ЖК-мониторах (высокого разрешения). При таком сглаживании меняется не интенсивность цвета пикселя, а его оттенок, «устанавливающий» границу элемента на доли пикселя, за счет того, что ЖК-мониторы используют красную, зеленую и синюю компоненту для отображения каждого пикселя.
И снова сравним два этих метода на увеличенных снимках экрана:
Оттенки серого: включено, Уточнение: выключено | Субпиксельное сглаживание: включено, Уточнение: выключено |
Субпиксельное сглаживание добавляет цветные артефакты на границах объектов, что врядли кому-то понравится. Haiku позволяет вам одновременно использовать оба метода сглаживания — перемещая бегунок, вы сможете найти их приемлемое соотношение.
Субпиксельное сглаживание в комбинации с уточнением — вопрос патентирования ПО, поэтому такой режим недоступен по умолчанию. В зависимости от законодательства страны, в которой вы проживаете, вы можете получить разблокированную версию. Приносим свои извинения. Свяжитесь с вашим представителем.
Если вы активируете уточнение с субпиксельным сглаживанием путем модификации и перекомпиляции исходного кода, то сможете сравнить результат со сглаживанием оттенками серого:
Оттенки серого: включено, Уточнение: включено | Субпиксельное сглаживание: включено, Уточнение: включено |
В нижней части панели располагаются две кнопки:
По умолчанию | сбросить текущие настройки и установить их на значения по умолчанию. | |
Вернуть | вернуть настройки, которые были установлены до запуска панели настройки. |
Шрифты для мелкого текста | ТипВместе
Январь 2017 г.
Опытные дизайнеры знают, что размер шрифта играет решающую роль в его легкости чтения. Чем меньше текст, тем больше необходимо подчеркнуть его характеристики, чтобы он выглядел так же, как при нормальном размере чтения. Хорошая идея — иметь несколько начертаний для мелкого шрифта, и у нас есть то, что нужно.
Ранние перфораторы уже знали большинство приемов 500 лет назад: человеческий глаз всегда может немного помочь, когда дело доходит до очень мелкого текста. Вот почему их размеры агат, нонпарель и миньон отличались большой высотой x, широкими пропорциями, надежными засечками, низким контрастом и довольно свободным расположением букв. Они поняли, что эти характеристики улучшили распознавание слов и, следовательно, облегчили разборчивость.
Дело в том, что для большинства шрифтов разборчивость может резко ухудшиться, если они используются меньше 9 пунктов. Именно тогда четкость печати — или рендеринга — и хороший выбор дизайна глифов выходят на передний план, чтобы донести контент до читателя. Если глифы и их детали не сделать более четкими при таких размерах, читаемость сильно затруднена.
Если мы вдумаемся в это более внимательно, мелкая типографика встречается чаще, чем мы, вероятно, думаем. Он указан на оборотной стороне всех ваших счетов за коммунальные услуги и на упаковке любых лекарств, чистящих средств или пищевых продуктов, которые мы покупаем. Кроме того, на него распространяется гарантия всех потребительских электронных продуктов, и он используется для печати мелким шрифтом практически всего, что мы подписываем. Мелкий текст очень важен, и его использование выходит далеко за рамки телефонных справочников и рекламных объявлений.
В заключение, TypeTogether рекомендует перепроверить, что ваш мелкий шрифт действительно в порядке. В библиотеке шрифтов каждого дизайнера должно быть хотя бы несколько хороших шрифтов, специально разработанных для мелкого шрифта. Для этой цели мы выбрали три из нашего каталога: Cora, Lipa Agate и Edita. Читайте дальше, чтобы лучше понять, как эти семейства шрифтов делают мелкий шрифт прекрасным.
Cora — это шрифт без засечек от Барта Блабо, отличающийся удобочитаемостью за счет очень большой высоты по оси x, некоторого контраста штрихов и заглавных букв, вдохновленных классическим шрифтом. Поскольку буквы кажутся большими и слегка широкими, Cora остается четким при меньшем размере точек, придавая своему голосу немного больше громкости, поэтому у тех, кто находится в конце комнаты, нет проблем со слухом.
Созданная для того, чтобы хорошо выглядеть на экране, не теряя своей привлекательности при печати, прямолинейная природа форм Cora позволяет сгущаться или расширяться без серьезных искажений. Да, вы правильно прочитали: этот шрифт можно механически сжать. Он был построен для этого! Кора была удостоена первой премии за латинский текстовый шрифт на конкурсе шрифтов Granshan в 2008 году.
Получить семейство Cora (включает 6 шрифтов)
маленькая
Модель Edita от Pilar Cano гуманистична по своей концепции, но обладает современным ощущением, в котором очень важную роль играют мягкость и текучесть. Это семейство изначально предназначалось для использования в книгах и журналах, где текст размещается вместе с фотографиями и другими графическими элементами. Однако он достаточно универсален, чтобы его можно было использовать во многих других контекстах, от романов до рекламных материалов.
Так почему же мы рассказываем об этом в этой статье? Потому что Edita включает в себя два стиля, специально разработанных для небольших форматов, которые бросают вызов самой физике печати. Edita Small с более высоким x-высотой, более тяжелыми стержнями, сниженным контрастом и тщательно прорисованными чернильными ловушками гарантирует четкость при размерах до пяти пунктов. Эдита была выбрана для участия в выставке «Lletres de Barcelona» в 2010 году и представлена в Typography Served II. В 2011 году он получил награду Typography Award от Искусство общения .
Получить семейство Edita (включает 8 шрифтов)
липа агат
С ее выпуском в 2014 году Липа Агата Эрмина Медедовича переписала книгу по микротипографике, и она сделала это, установив четкий шрифт для текста с 4 точками. Lipa Agate делает гораздо больше, чем просто создает хороший и разборчивый текст в самом маленьком масштабе, он может делать то же самое на газетной бумаге, устанавливая планку для мелкого текста настолько высоко, насколько это возможно.
Lipa Agate имеет две основные версии, High и Low, которые отличаются высотой строчной буквы x и высотой надстрочного элемента, но сохраняют одинаковую ширину. Он также имеет три различных уровня уплотнения с четырьмя весами каждый для набора инструментов из 24 шрифтов, разработанных для обеспечения наилучшего качества мелкой печати. Lipa Agate выиграла серебро за оригинальный шрифт на European Design Awards 2014 и диплом Rutenia 2014. Он также был включен в три списка «Лучшее в 2014 году».
Получить Липа Агат семейство (включает 24 шрифта)
Как подобрать шрифт для крайне ограниченного пространства, т.е. уместится ли самый ЧИТАЕМЫЙ текст на самом маленьком пространстве?
спросил
Изменено 2 года, 11 месяцев назад
Просмотрено 641 тысяч раз
У меня часто бывает очень мало места при создании отчетов и информационных панелей для пользователей. Я обычно использую Arial или Arial Narrow, но пользовательский интерфейс не является моей областью знаний, поэтому я хочу знать, как вы определяете оптимальный шрифт для размещения наиболее читаемого текста в наименьшем пространстве?
Вот пример: Имейте в виду, что это всего лишь пример, так как во многих случаях пространство ограничено, например, когда вам нужно втиснуть в отчет миллион столбцов и т. д.
- шрифт
- размер шрифта
- переполнение
6
На самом деле это зависит от множества факторов, таких как ожидаемая частота появления определенных символов и доступные вам шрифты.
Я сделал элементарный шаг, создав программу, которая повторяла все доступные шрифты, которые я установил на моем компьютере с Windows в то время, и выводила на экран строку, содержащую каждый печатный символ ascii, в каждом из этих шрифтов. Я также повторил тест с разными размерами шрифта.
Результаты, насколько я помню, заключались в том, что Segoe UI и Tahoma были лучшими с точки зрения использования пространства и удобочитаемости для целей пользовательского интерфейса при размерах 10pt и 9pt. В краткосрочной перспективе мы остановились на Tahoma, поскольку пользовательский интерфейс Segoe недоступен для операционных систем ниже Windows Vista. Если вам не нужно поддерживать Windows XP или более старую ОС Windows или другую ОС, отличную от Windows, я бы определенно выбрал пользовательский интерфейс Segoe, в противном случае я бы выбрал Tahoma, если он доступен, и если ничего не помогает, попробуйте Verdana. В этом списке представлена линейка доступных шрифтов Windows, а также информация о том, как лучше всего использовать каждый из них.
Имейте в виду также, что, начиная с Windows Vista, Microsoft теперь рекомендует использовать шрифт 9pt вместо шрифта 10pt для элементов пользовательского интерфейса, поскольку шрифт Sego UI отображается намного четче, чем другие шрифты при низком разрешении, особенно на плоских дисплеях.
В зависимости от того, для какой платформы вы разрабатываете, вы также можете рассмотреть возможность изменения метрик шрифта, если это возможно. Я помню, что в .NET с WPF было довольно много способов изменить способ отображения текста, чтобы можно было сократить пространство между символами и сделать отдельные символы более узкими. Используя этот тип техники, вы можете придерживаться любого шрифта, который вам нравится, и просто настраивать его рендеринг, чтобы получить нужные вам результаты.
Что касается вашего конкретного примера графика, который вы предоставили: для этого конкретного графика я бы рекомендовал повернуть его, чтобы текст, который, скорее всего, будет прочитан, располагался горизонтально для более естественного чтения. Я бы также поместил число так, чтобы оно находилось внутри каждого столбца гистограммы, когда оно будет соответствовать цвету, который выделяется на фоне любого цвета фона, тем самым увеличивая пространство для других вещей, таких как метки. Размещение гистограммы в виде строк упростило бы чтение, а также, при необходимости, распечатку на нескольких страницах. Если макет строки невозможен, то создание отдельного ключа для каждого элемента на графике, вероятно, было бы разумным, и таким образом каждый столбец можно было бы разместить ближе друг к другу, а также сэкономить место. Ключ позволит пометить каждую полосу, например, A, B, C… или 01, 02, 03…, а ключ (разложенный рядами в другом месте) даст более подробную информацию о каждом.
Помните, что диаграммы или диаграммы в основном полезны для получения быстрой визуальной информации. Если это становится слишком тяжелым бременем для пользователя/читателя, вам, вероятно, лучше всего упростить его, объединить некоторые детали диаграммы или просто предоставить больше необработанных данных в более табличной форме.
Вот простой список шрифтов Arial, Segoe UI и Tahoma разных размеров. Обратите внимание, что относительное пространство, занимаемое каждым шрифтом, различно для разных размеров точек.
Обновление: Я добавил еще одно сравнение ниже, которое показывает более полный список общих символов, включая заглавные и строчные буквы, в каждом из ранее упомянутых шрифтов с добавлением Verdana и MS Sans Serif (шрифт пользовательского интерфейса по умолчанию в Windows до Windows 2000) . К сожалению, и в ответ на рекомендацию bobsoap по использованию Verdana, совершенно ясно, что Verdana является худшим по сравнению с другими шрифтами в 9pt, хотя имейте в виду, что это может быть не так для других размеров точек. Кроме того, размер не обязательно всегда является самой важной деталью, иногда более важно, чтобы шрифт был читабельным при небольших размерах, чем то, является ли он более компактным по сравнению с другим шрифтом.
7
Вы делаете это неправильно.
Вообще есть «другой путь». Все ответы на этот вопрос замечательны, но, честно говоря, вы должны смотреть на все разные варианты. Втиснуть как можно больше текста в как можно меньшее пространство всегда означает, что вы испортили предыдущий выбор дизайна.
- Возможно, вы должны были перевернуть их, чтобы они стали горизонтальными полосами, что дало бы вам НАМНОГО больше места для работы.
- Возможно, вам не стоило использовать столбчатую диаграмму, или вообще не следовало использовать диаграммы.
- Возможно, проблема в самих данных, и вам, возможно, пришлось разделить их еще больше!
- Боковая панель или легенда/указатель могут помочь
- Ховеры могут работать в онлайн-версии
Есть так много вариантов, убедитесь, что вы используете правильный. Втиснуть как можно больше информации в одну маленькую область всегда неправильный путь. Информации нужно пространство, чтобы «дышать», чтобы ее можно было прочитать, просканировать и распознать.
Да, обычно это означает использование большего объема памяти. Но это неплохо. Человеку, который потребляет данные, потребуется меньше усилий, чтобы быстро просмотреть пару страниц, заполненных хорошо структурированной информацией, чем выяснить, что означает эта полоса в этом одностраничном отчете. Подумайте о бывшем члене правления, который кладет в карман свои очки для чтения и передает газету человеку рядом с ним: «Я не могу это прочитать — что там написано?»
Извиняюсь за резкость и легкое насмешливое название, но я вижу этот лучший ответ и просто чувствую, что часть «нужен другой подход» нуждается в большей проработке.
.edit:
Поскольку это очень спорный ответ, который довольно сильно противоречит исходному вопросу, я чувствую, что должен уточнить причины его публикации.
Прежде всего: это не вопрос UX, это вопрос графического дизайна или типографики.
В этом вопросе есть предположения, самое большое из которых заключается в том, что «правильным решением» этой проблемы UX является мелкий текст. Но это не так. Мелкий текст становится нечитаемым, проблема усугубляется планшетами и другими мобильными устройствами. Что делать, если у вашего пользователя плохое зрение? Что, если это отображается на более старом мониторе с более низким разрешением? Что, если есть блики от солнца или света? Так много причин, по которым мелкий текст может быть нечитаемым.
Таким образом, этот ответ здесь, чтобы помочь следующему человеку, у которого возникла эта проблема, помнить о том, чтобы не совершать ту же ошибку .
… сказав это — я полностью понимаю, что у человека, задающего вопрос, просто нет ресурсов ни на что, кроме смены шрифта 🙂 Мы все были там, и мы все будем там снова!
TLDR: Я отнесся к этому вопросу так же, как Генри Форд отнесся к призыву к более быстрым лошадям. (Отказ от ответственности: я не Генри Форд)
14
Coda
Иногда меньший шрифт является хорошим выходом из затруднительного положения. В этом конкретном случае, по крайней мере, для показанной части проблемы, есть лучшее решение, которое и четче, и занимает вдвое меньше места, например:
Я использую достаточно крупный шрифт, 18pt Tahoma ( откройте изображение в новой вкладке для просмотра в полном размере), что отрицательный пробел в порядке.
4
Предполагая, что вы имеете в виду экранное использование на обычном дисплее (~ 96 точек на дюйм), а не что-то вроде дисплея Retina, и у вас есть система с субпиксельным сглаживанием, вы ищете шрифт с потрясающим пикселем , намекающим на . Подсказка — это искусство брать векторные кривые, предназначенные для использования в печати, и настраивать их форму для разных размеров точек, обычно для того, чтобы основные части шрифта выровнялись по пиксельной сетке. Это вопрос компромисса между тем, как должен выглядеть шрифт (если хотите, его характером) и жесткой и неумолимой пиксельной сеткой. Эти компромиссы становятся все более серьезными, чем меньше вы получаете, поскольку пиксельная сетка обеспечивает последовательно меньшее количество пикселей для заполнения.0005
Многие шрифты были специально разработаны для использования на экранах компьютеров (обычно их называют экранными шрифтами). Набор шрифтов Мэтью Картера; Verdana , Tahoma , Georgia и др. являются отличными примерами; они с самого начала разрабатывались с учетом пиксельной сетки. Это делает их изначально подходящими для использования в меньших размерах (но обычно делает их немного неуклюжими при печати).
Как правило, при небольших размерах точек (помните, что размеры точек относятся к высота ), я бы порекомендовал Verdana , потому что он имеет очень высокую высоту x , которая обеспечивает широкие открытые счетчики . Это сделает его шире, чем некоторые другие шрифты, а это не то, что вам нужно (на основе ваших примеров).
Шрифты, такие как Segoe UI , Tahoma и MS Sans Serif , разработаны как универсальные экранные шрифты (они являются шрифтами по умолчанию для Windows Vista/7, Windows XP и более ранних версий Windows соответственно), поэтому они хороший универсальный выбор (при этом пользовательский интерфейс Segoe является единственным, разработанным с учетом субпиксельных подсказок и являющимся самым современным выбором).
Есть два фактора, которые следует учитывать при выборе шрифта. если вы запускаете шрифт вертикально, субпиксельное сглаживание, естественно, отличается, и, как правило, хинтинг пикселей начинает выглядеть немного хуже (поскольку шрифтовые дизайнеры вряд ли проверяли свои лица вертикально). Если вы запускаете шрифты по диагонали или иным образом не по пиксельной сетке, все пиксельные подсказки выбрасываются из окна.
Для очень подробного объяснения хинтинга пикселей, растеризации и прочего нет лучшего справочника, чем этот удивительный сайт.
Если есть интерес, я добавлю абзац или два о выборе шрифта для очень мелкого шрифта, но кроме этой удивительно хорошей статьи я могу добавить немногое.
Важно указать, какое измерение вы пытаетесь оптимизировать. Вы хотите уменьшить размер по горизонтали (более короткие линии) или по вертикали? Если вы хотите оптимизировать ширину по горизонтали, вам следует искать сжатый шрифт. Arial Narrow и Helvetica Condensed — два очевидных варианта, но я не нахожу их очень читабельными, и они кажутся дешевыми.
Шрифты без засечек, похожие на Arial / Helvetica, но более узкие:
Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive и новый шрифт Adobe Source Sans Pro .
В сравнении, которое я провел с числами, я обнаружил, что Myriad Pro, Source Sans Pro, Segoe UI и Tahoma лучше всего подходят для чтения при минимальной ширине 9–11 пикселей. Обратите внимание, что эти шрифты обрабатывают размеры по-разному, поэтому часто необходимо учитывать смещение размера для корректного сравнения.
Лато тоже может работать. Asana использует Proxima Nova, который очень открыт и удобен для чтения в небольших размерах, но не очень хорошо выглядит в большем размере, когда они его используют.
Вот сравнение, которое я сделал со всем в 10px. Однако лучше всего поэкспериментировать с этим самостоятельно, так как изменение размера шрифта часто имеет нелинейный эффект при таких малых размерах.
Другие упомянули Verdana. Verdana очень удобочитаема при небольших размерах, но совсем не оптимизирует ширину. Тем не менее, широкий шрифт, читаемый при небольших размерах, оптимизируется по высоте, а не по ширине, и, возможно, это то, что вы ищете, но в Интернете, где вертикальная прокрутка более естественна, чем горизонтальная, это обычно не так. .
Лично я предпочитаю шрифт Arial на экране, и если мне нужен менее нейтральный вид или если мне нужно оптимизировать ширину, я могу посмотреть на Source Sans Pro или Segoe UI.
2
Мне всегда нравился пользовательский интерфейс Segoe, но недавно мне пришлось признать, что во многих случаях Arial на самом деле более удобочитаем. Если вы мне не верите, сравните 12px Arial с 12px Segoe UI в сетке, полной числовых данных. Ариал как будто сияет. Даже образец текста, показанный в исходном ответе, ясно показывает, что Arial легче читать. Это уродливо, но более читабельно. Во многом это просто тонкая разница в размерах.
Кроме того… Когда вы увеличиваете размер Segoe до 13 пикселей и выше, цифры действительно начинают выглядеть странно. В конечном счете, большинство приложений управляются данными. Создайте сетку, полную данных. Переключитесь между ними и спросите у нескольких человек, что легче читать??? Хммм..
Если вы читаете прямой текст (без чисел) с разрешением 11 пикселей, то я думаю, что Segoe читается легче. Но кто бы ни решил, что Segoe UI — это более удобный для чтения шрифт, чем Arial… Я хотел бы посмотреть, откуда они взяли эти данные. Я спрашивал нескольких человек, и все считают, что Arial более удобен для чтения при разрешении 12 пикселей (9 пикселей).п.) (включая меня).
Есть много внутренних ошибок со шрифтами в отношении цвета шрифта. Лучше всего Segoe выглядит немного светлее… (#333333 или #212121) обычно хорошо. Arial кажется слишком сложным для чтения в этих цветах, и обычно лучше всего подходит сплошной черный цвет. Пользовательский интерфейс Segoe имеет слишком большую контрастность и имеет тенденцию выглядеть перегруженным сплошным черным цветом.
Лично я нахожу шрифт Arial более читаемым, чем Tahoma. Если вы просто говорите о прямой читабельности. Tahoma может выглядеть лучше в интерфейсе Windows, но это эстетическая вещь.
Интервал, цвет и размер шрифта меняют все. Не позволяйте никому говорить вам, что шрифт Segoe UI лучше. Это лучше для определенных случаев, но не для всех. Хотя это, безусловно, привлекательно.
4
Arial Narrow и Tahoma кажутся лучшими.
По моему опыту, Avenir Next Condensed удивительно прозрачен, но при этом занимает очень мало места. По сравнению с Arial Narrow он занимает меньше места и его легче читать.
Я столкнулся с проблемой, когда оптимизация шрифтового пространства была важным фактором для некоторых программ, которые я использую на Mac (Soundminer, OS X Mavericks 10.9.5, но я полагаю, что эта информация может быть полезна для других программ Mac и будущих версии OS X). Программа выводит метаданные файла со строками фиксированной высоты и позволяет пользователю выбирать высоту строки и размер шрифта. Перенос слов является опцией, но высота строки не будет регулироваться для автоматического подгонки содержимого каждой ячейки.
После просмотра всех нескольких сотен шрифтов в системе тот, который умещал больше всего символов в наименьшем пространстве, но при этом оставался разборчивым, получил (на удивление) Символы Apple . С размером шрифта, установленным на 12, и высотой строки 22, я могу комфортно разместить две строки текста и больше символов, чем с любым другим шрифтом (того же размера или меньше), сохраняя при этом удобочитаемость с позиции до 3 ‘ или около того с дисплея.
Надеюсь, это окажется полезным для кого-то еще с такой же (или похожей) проблемой.
Ариал узкий. Забавно, об этом никто не упомянул (при беглом просмотре ответа). Я использовал его с хорошим эффектом во всех приложениях MS. Нирадж.
1
Большинство ответов здесь следует использовать только как предложения возможных шрифтов для использования. После удобочитаемости это дело вкуса. (В комментарии, в котором говорилось, что Verdana был явно худшим выбором, мне он понравился больше всего.) Я часто пробую 8 или 10 разных шрифтов, а затем решаю, какой из них мне больше нравится. Выбор также зависит от контекста. Я уверен, что все использовали бы разные шрифты для визитных карточек магазина нижнего белья и сталелитейного завода. Весь бред про засечки и без засечек — пустая трата времени. Просто используйте то, что выглядит хорошо, независимо от того, что это такое.
Я согласен, что цель не должна заключаться в том, чтобы втиснуть в текст как можно больше информации. Большинство людей не будут читать все или даже большую часть. Они будут искать ключевые моменты, и если они представляют интерес, они могут прочитать оставшиеся части или, что еще лучше, позвонить для получения дополнительной информации.
Я считаю, что Verdana идеально подходит для небольших размеров шрифта (но не для крупных). Или, если вы можете, вы можете использовать пиксельный шрифт.