Как выбрать шрифт для крайне ограниченного пространства, т. Е. Будет соответствовать наиболее READABLE текст в самом маленьком пространстве?

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

Вот пример: имейте в виду, что это всего лишь пример, так как существует много раз ограниченное пространство, например, когда вам нужно выжать миллион столбцов в отчет и т. д.

Диаграмма с ограниченным пространством

95 голосов | спросил Richard DesLonde 3 FebruaryEurope/MoscowbThu, 03 Feb 2011 01:09:52 +0300000000amThu, 03 Feb 2011 01:09:52 +030011 2011, 01:09:52

13 ответов


86

Это действительно зависит от множества факторов, таких как частота определенных символов , которая вы ожидаете и какие шрифты вам доступны.

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

Результаты, о которых я помню, состояли в том, что Segoe UI и Tahoma были лучшими в отношении использования пространства и удобочитаемости для целей пользовательского интерфейса при 10pt и 9pt. В краткосрочной перспективе мы остановились на Tahoma, так как пользовательский интерфейс Segoe не доступен для операционных систем под Windows Vista. Если вам не нужно поддерживать Windows XP или более позднюю версию ОС Windows или другой ОС, отличной от ОС, то я бы определенно пошел с пользовательским интерфейсом Segoe, иначе я поеду с Tahoma, если он будет доступен, и если все остальное не поможет, попробуйте Verdana. См. этот список для линейки доступных шрифтов Windows, а также информацию о лучших использования каждого из них.

Имейте в виду, что теперь, начиная с Windows Vista, Microsoft рекомендует использовать шрифт 9pt вместо шрифта 10pt для элементов пользовательского интерфейса, поскольку шрифт пользовательского интерфейса Sego отображается намного яснее, чем другие шрифты с низким разрешением, особенно на плоских панельных дисплеях .

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

Что касается вашего конкретного примера, который вы указали: для этого конкретного графика я бы рекомендовал его поворачивать, чтобы текст, который, скорее всего, был прочитан, был горизонтальным для более естественного чтения. Я бы также поместил номер так, чтобы он находился внутри каждого столбца гистограммы, когда он будет соответствовать цвету, который выделяется против любого цвета фона, тем самым увеличивая пространство для других вещей, таких как метки. Выравнивание столбчатой ​​диаграммы по строкам упростило бы чтение, а также при необходимости напечатало бы на нескольких страницах. Если макет строки невозможен, то создание отдельного ключа для каждого элемента на графике, вероятно, будет разумным, и таким образом каждый бар может быть расположен ближе друг к другу, а также для экономии места. Ключ позволял бы каждый маркер маркироваться, например, A, B, C ... или 01, 02, 03 ... например, и клавиша (выстроенная в других местах) давала бы более подробную информацию о каждом из них.

Помните, что диаграмма или диаграмма в основном полезны для получения быстрой визуальной информации. Если это становится слишком большим бременем для пользователя /читателя, возможно, вам лучше всего его упростить, объединив некоторые детали диаграммы или просто предоставив более сырые данные в более табличной форме.

Вот простой список, показывающий шрифты Arial, Segoe UI и Tahoma разных размеров. Обратите внимание, что относительное пространство, занимаемое каждым шрифтом, отличается при разных размерах точек. введите описание изображения здесь>> </p>

<p> <strong> Обновление: </strong>. Я добавил еще одно сравнение ниже, которое показывает более полный список общих символов, включая буквы капитала и строчные буквы в каждом из упомянутых ранее шрифтов с добавлением Verdana и MS Sans Serif (шрифт UI по умолчанию в Windows до Windows 2000). К сожалению, и в ответ на рекомендацию bobsoap по использованию Verdana, довольно ясно, что Verdana хуже всего по сравнению с другими шрифтами в 9pt, но имейте в виду, что это может быть не верно для других размеров точек. Кроме того, размер не обязательно всегда является самой важной деталью, иногда более важно, чтобы шрифт читался с небольшими размерами, чем компактнее относительно другого шрифта. </p>

<p> <img src =

ответил jpierson 3 FebruaryEurope/MoscowbThu, 03 Feb 2011 06:00:34 +0300000000amThu, 03 Feb 2011 06:00:34 +030011 2011, 06:00:34
34

Вы делаете это неправильно.

Как правило, есть «другой способ». Ответы на этот вопрос велики, но, честно говоря, вы должны посмотреть на все разные варианты. Сжатие как можно большего количества текста как можно меньше места всегда означает, что вы нарушили предыдущий выбор дизайна.

  • Возможно, вам стоит перевернуть их на горизонтальные полосы, что даст вам больше возможностей для работы.
  • Возможно, вам не следовало уходить с гистограммой, или, по крайней мере, не должны были иметь диаграммы.
  • Возможно, проблема заключается в фактических данных, и вам, возможно, пришлось разделить ее еще больше!
  • Боковая панель или легенда /индекс могут помочь
  • Hovers может работать для онлайн-версии

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

Да, это обычно означает использование большего пространства. Но это не плохо. Для человека, который потребляет данные, потребуется меньше усилий для быстрого сканирования нескольких страниц, заполненных хорошо структурированной информацией, чем для того, чтобы выяснить, что означает этот бар для этой одностраничной страницы. Подумайте о старом члене совета, набирая его очки для чтения, передавая бумагу человеку рядом с ним: «Я не могу прочитать это - что он говорит?»

Извинения за суровость и слабое название, но я вижу, что главный ответ и просто считаю, что часть «нужен другой подход» нуждается в дополнительной разработке.

.edit:

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

Во-первых, это не вопрос UX, это графический дизайн или вопрос о типографии.

В этом вопросе есть предположения, самым большим из которых является то, что «правильным решением» этой проблемы UX является небольшой текст. Но это не так. Малый текст становится нечитаемым, проблема усугубляется планшетами и другими мобильными устройствами. Что делать, если у вашего пользователя плохое зрение? Что, если это показано на более старом мониторе с более низким разрешением? Что, если есть блики от солнца или света? Так много причин, по которым маленький текст может быть нечитаемым.

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

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

TLDR: Я рассматривал этот вопрос так, как Генри Форд обращался с призывом к более быстрым лошадям. (Отказ от ответственности: я не Генри Форд)

ответил Dirk v B 29 Jam1000000amWed, 29 Jan 2014 03:26:29 +040014 2014, 03:26:29
22

Coda

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

Lastname, Firstname

Я использую достаточно большой шрифт, 18pt Tahoma (открыть изображение на новой вкладке, чтобы просмотреть полный размер), что отрицательное письмо-пространство в порядке.

ответил James Crook 26 Mayam11 2011, 00:12:27
12

Предполагая, что вы ссылаетесь на экранное использование на обычном дисплее (~ 96 DPI), а не на что-то вроде дисплея Retina, и у вас есть система с субпиксельным сглаживанием, что вы ищете это шрифт с потрясающим пикселем подсказка . Подсказка - это искусство принятия векторных кривых, предназначенных для использования в печати, и настройки их формы для разных точечных размеров, как правило, для того, чтобы основные части шрифта совпадали с сеткой пикселей. Это вопрос компромиссов между тем, как должен выглядеть шрифт (его характер, если хотите) с жесткой и неумолимой сеткой пикселей. Эти компромиссы становятся все более серьезными, чем меньше вы получаете, поскольку сетка пикселей обеспечивает последовательное количество пикселей для заполнения.

Многие шрифты явно предназначены для использования на экранах компьютеров (обычно называемые экранные шрифты ) , Набор шрифтов Мэтью Картера; Verdana , Tahoma , Грузия и др. - отличные примеры; они были разработаны с самого начала с учетом решетки пикселей. Это делает их по своей сути хорошими для использования при меньших размерах (но, как правило, они выглядят немного неудобно в печати).

В общем, при небольших размерах точек (помните, что размеры точек относятся к height ), я бы рекомендовал Verdana , потому что он имеет очень высокий x-height , который предоставляет широкий открытый счетчики . Это сделает его более широким, чем некоторые другие шрифты, чего вы не ищете (на основе ваших примеров).

Шрифты, такие как Segoe UI , Tahoma и MS Sans Serif , разработаны как универсальные экранные шрифты (являющиеся шрифтами по умолчанию для Windows Vista /7, Windows XP и более ранние версии Windows соответственно), поэтому они являются хорошими универсальными решениями (при этом пользовательский интерфейс Segoe является единственным, разработанным с учетом подпикселя и являющимся самым современным выбором).

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

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

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

ответил Kit Grose 15 J0000006Europe/Moscow 2012, 06:27:44
8

Важно указать, какое измерение вы пытаетесь оптимизировать. Вы хотите уменьшить размер по горизонтали (короткие строки) или также по вертикали? Если вы хотите оптимизировать горизонтальную ширину, вы должны искать конденсированный шрифт. Arial Narrow и Helvetica Condensed - два очевидных варианта, но я не считаю их очень удобочитаемыми, и они оторвались от дешевых вещей.

Для sans-serifs, подобных 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 являются лучшими для чтения с минимальной шириной в 9px-11px. Обратите внимание, что эти шрифты обрабатывают размеры по-разному, поэтому часто требуется смещение размера для справедливого сравнения.

Lato также может работать хорошо. Asana использует Proxima Nova, которая очень открыта и читаема при небольших размерах, но не выглядит великолепно в большем размере, так как они ее используют.

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

сравнение шрифтов при 10px

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

Мои личные предпочтения для Arial на экране, и если я ищу менее нейтральный внешний вид или мне нужно оптимизировать ширину, я могу посмотреть на Source Sans Pro или Segoe UI.

ответил terrace 7 PM00000090000001831 2012, 21:34:18
5

Я всегда любил пользовательский интерфейс Segoe, но недавно должен был признать, что Arial на самом деле более читабельна (задыхается) во многих случаях. Если вы не верите мне, сравните 12px Arial с 12px Segoe UI в сетке, полной числовых данных. Кажется, что Ариал сияет. Даже образец текста, показанный в исходном ответе, ясно показывает, что Arial легче читать. Это уродливо, но более читаемо. Многое из этого - просто тонкая разница в размере.

Кроме того ... Когда вы берете Segoe до 13px и выше, цифры действительно начинают казаться странными. В конечном итоге большинство приложений основаны на данных. Создайте сетку, полную данных. Переключитесь между ними и попросите нескольких людей, которые легче читать ??? Хммм ..

Если вы читаете прямой текст (без цифр) в 11px, я думаю, что Segoe легче читать. Но кто бы ни выбрал Segoe UI, все вокруг легче читать шрифт, чем arial ... Я хотел бы посмотреть, где они получили эти данные. Я спросил нескольких людей, и все думают, что Arial более читабельна для данных в 12px (9pt) (включая меня).

Есть много интракаций со шрифтами в отношении цвета шрифта. Segoe выглядит лучше немного легче ... (# 333333 или # 212121), как правило, хорошо. Arial кажется слишком трудным для чтения в этих цветах и ​​обычно лучше всего на сплошном черном. Интерфейс Segoe имеет слишком большой контраст и имеет тенденцию выглядеть занятым сплошным черным.

Я считаю, что Arial может быть более читаемым, чем персонаж Тахомы. Если вы просто говорите о прямой читаемости. Тахома может выглядеть лучше в интерфейсе Windows, но это эстетическая вещь.

Интервал, цвет шрифта и размер шрифта меняют все. Не позволяйте никому говорить, что пользовательский интерфейс Segoe - лучший шрифт. Это лучше для некоторых случаев, но не для всех. Это, безусловно, привлекательно.

ответил KingOfHypocrites 14 J0000006Europe/Moscow 2012, 22:03:31
3

 Различные шрифты разных размеров

Arial Narrow и Tahoma кажутся лучшими.

ответил Fubz 14 PMpThu, 14 Apr 2016 22:32:09 +030032Thursday 2016, 22:32:09
1

Arial Узкий. Забавно, никто не упоминал об этом (беглым взглядом в ответ). Я использовал его в хорошем качестве во всех приложениях MS. Neeraj.

ответил Neeraj 8 J0000006Europe/Moscow 2014, 05:25:25
1

Я столкнулся с проблемой, когда оптимизация пространства шрифтов была важным фактором с некоторым программным обеспечением, которое я использую на Mac (Soundminer, OS X Mavericks 10.9.5, но я думаю, что это может быть полезной информацией для другого программного обеспечения Mac и будущих версий OS X). Программа перечисляет метаданные файлов с строками фиксированной высоты и позволяет пользователю выбирать высоту строки и размер шрифта. Word Wrap - это опция, но высота строки не будет настроена на автоматическое соответствие содержимого каждой ячейки.

Пройдя через все несколько сотен шрифтов в системе, тот, который соответствует самым символьным данным в наименьшем количестве пространства, хотя и остается разборчивым, был (удивительно) Символами Apple . Если размер шрифта установлен на 12 и высота строки 22, я могу с комфортом подогнать две строки текста и больше символов, чем с любым другим шрифтом (такого же размера или меньше), сохраняя при этом удобство чтения с позиции до 3 'или так на дисплее.

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

ответил EarHax 9 FriEurope/Moscow2016-12-09T08:58:49+03:00Europe/Moscow12bEurope/MoscowFri, 09 Dec 2016 08:58:49 +0300 2016, 08:58:49
0

Большинство ответов здесь следует использовать только в качестве предложений о возможных шрифтах для использования. После читаемости это вопрос вкуса. (В комментарии, в котором говорилось, что Verdana явно худший вариант, мне понравилось это лучше всего.) Я часто пробую 8 или 10 разных шрифтов, а затем решаю, какой из них выглядит лучше всего. Выбор также зависит от контекста. Я уверен, что каждый будет использовать разные шрифты для визитных карточек для магазина нижнего белья и сталелитейного завода. Вся BS о засечке и без засечек - пустая трата времени. Просто используйте то, что хорошо выглядит, независимо от того, что это такое.

Я согласен с тем, что цель не должна заключаться в том, чтобы вставлять в текст столько информации, сколько может поместиться. Большинство людей не будут читать все это или даже многое из этого. Они будут искать ключевые моменты, и если они интересны, они могут прочитать оставшиеся части или, еще лучше, обратиться за дополнительной информацией.

ответил c.j. 31 MarpmThu, 31 Mar 2016 18:38:31 +03002016-03-31T18:38:31+03:0006 2016, 18:38:31
0

Я считаю, что Verdana идеально подходит для небольших размеров шрифта (не для больших). Или, если можно, вы можете использовать пиксельный шрифт.

ответил bobsoap 4 FebruaryEurope/MoscowbFri, 04 Feb 2011 05:12:35 +0300000000amFri, 04 Feb 2011 05:12:35 +030011 2011, 05:12:35
-2
Робото, было бы прекрасно. Он может использоваться для любого размера с соответствующей видимостью.

ответил Gaurav Arora 9 FriEurope/Moscow2016-12-09T10:03:38+03:00Europe/Moscow12bEurope/MoscowFri, 09 Dec 2016 10:03:38 +0300 2016, 10:03:38
-4

Основываясь на моем документе, я бы сказал, что Bodoni MT Condensed дал мне большинство персонажей на странице с шрифтом 12 pt. Это кажется довольно разборчивым. По сравнению с другими шрифтами, упомянутыми выше, мой документ, который был длиннее 30 страниц с двойными линиями, оказался всего на 23 страницах с шрифтом Bodoni MT Condensed. Были и другие шрифты, которые фактически уменьшали количество страниц, но шрифты были только малыми.

ответил Lawyerman1000 19 Maypm14 2014, 22:36:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132