Кращі шрифти для покращення досвіду читання


13

Я будую веб-сайт, головна мета якого - подавати вміст (законодавчий орган), і я хочу надати користувачам найкращий досвід читання. Ви можете подивитися на прикладі сторінки за адресою:

http://iura.cl/cc/44

Як бачите, я зняв усе, що зараз використовую веб-шрифт Telex. У мене також є варіант для нічного читання, який повинен зменшити відблиски:

http://iura.cl/cc/44?estilo=nocturno

Цікаво, що мені слід врахувати щодо шрифту, який я вибрав, щоб переконатися, що він є розбірливим, якщо є якийсь посібник, якого слід дотримуватися?


2
"Який шрифт ви рекомендуєте" - це просто занадто широке питання, щоб ми могли відповісти. Також зауважте, що хоча шрифт, безумовно, є основною частиною того, як щось читається ", існує також безліч інших змінних (ширина стовпців, інтервал між рядками, колір, натяк, компонування тощо)
DA01

@ DA01, можливо, є посібник, який ви можете порекомендувати?
Дан


1
Питання мені здається прекрасним - це не "Який шрифт ви рекомендуєте", це "Як вибрати шрифт з високою читанністю для веб-сайту " - безліч критеріїв.
користувач56reinstatemonica8

Відповіді:


10

Насправді є кілька досить простих принципів, якщо критерій номер один - це шрифт, який можна прочитати на веб-сайті .

  1. Подумайте мейнстрім. Завдяки @font-faceвам ви можете вибрати один з тисяч і тисяч шрифтів, але менш популярні або новіші шрифти часто мають проблеми з рендерінгом між браузерами та операційними системами, іноді навіть коли вони надходять із поважних установ. Якщо читабельність - ваш пріоритет, і ви не хочете робити велику кількість крос-браузерних тестів для перехресних ОС, можливо, ви захочете відтворити його безпечно і використовувати надійний, перевірений шрифт. Старі веб-безпечні шрифти люблять Verdanaі Georgiaє безпечними ставками, оскільки вони настільки широко використовуються, що вони будуть перевірені навіть у більш рідкісних програмах браузера / ОС. Плюс знайомство сприяє читанню.
  2. Висока висота x та широка. Ви не знаєте, яка якість та щільність пікселів екрана вашого читача, тому, якщо ви надаєте пріоритет для читабельності, переконайтесь, що важливі відмінні риси букв є надзвичайно чіткими. Шрифти, розроблені для читання в Інтернеті, як-от Verdanaі Georgiaвикористовують якомога більше своїх пікселів для висоти x, де є ключові реквізити листа, а також використовувати мінімальні пікселі на висхідних або низхідних значках, у яких одного-двох піксельних ударів достатньо, щоб легко скажіть а bз а oчи а p.
  3. Не надто легкий. Світловий тип чудово виглядає на екранах друку або з високою щільністю пікселів - але є вагома причина, чому його рідко використовували на екранах до ios7, і тоді було суперечливим: якщо глядач не переглядає в оптимальних умовах, як високоякісний екран у стабільному режимі освітлення в приміщенні, це загрожує читабельністю. Перейдіть за шрифтом з гарною твердою регулярною вагою - я згадав Verdanaі Georgia?

Існує безліч шрифтів, які відповідають цим критеріям, окрім, Verdanaі Georgia, звичайно, і ці два іноді вважаються трохи нудними, оскільки до 2009 року або близько того, коли @fontface набув широкого поширення, вони були шрифтами для переходу на більшу частину Інтернету .

Але ви дійсно не можете помилитися з ними - вони були розроблені для читання в Інтернеті, і кожна комбінація веб-переглядачів і операційної системи буде протестована для їх відображення.


Edit: Коли webtype продавці і foundaries дійсно йдуть в проблему тестування для гарної читаності, вони , ймовірно , кричати про це в своєму маркетингу. Наприклад, веб- серіал "Читання краю" (підказка шапки до Кріса Бертона, який тут згадував ). Все-таки робіть тест широко.


1
Я не дизайнер, і у мене є деякі питання з очима. Мені подобається читати текст законодавчого органу, але я думаю, що бразильський сайт іноді болить, тому я взяв вашу пропозицію (Verdana) і вклав плагін під назвою Стильний , з 1,5 лінійної висоти, розміром шрифту 16 пікселів і кольором чорного кольору. Зараз мені це дуже комфортно.
Фабіо Монтефусколо

5

Гаразд, я буду йти вперед і думати про це. Немає кінцевого "найкращого шрифту", а також не може бути, тому що вибір шрифту залежить від багатьох різних аспектів. Що може бути "найкращим методом вибору шрифту".

Тож слід врахувати, що допоможе вибрати найкращий шрифт для вашого проекту;

Медіа: як відображатиметься шрифт, папір, полотно, онлайн, портативний пристрій тощо. Ви хочете переконатися, що ви вибираєте шрифт, відповідний медіа, на якому він буде відображатися, наприклад, блок Times New Roman може бути добре для друкованого документа, але на екрані (особливо на невеликому екрані) блок Times New Roman може бути досить важким для читання. Ви також хочете побачити, що вам доступне, якщо ви обмежені веб-шрифтами, тут можуть допомогти такі ресурси, як шрифти google . (З Вікіпедії: "Веб-безпечні шрифти Веб-безпечні шрифти - це шрифти, ймовірно, наявні в широкому діапазоні комп'ютерних систем. Використовуються авторами веб-контенту для збільшення ймовірності відображення вмісту обраним шрифтом. Якщо відвідувач веб-сторінки на сайті немає вказаного шрифту, їх браузер намагається вибрати аналогічну альтернативу, спираючись на вказані автором резервні шрифти та загальні сім'ї, або він використовує заміну шрифту, визначену в операційній системі відвідувача. ")

Аудиторія: подумайте, хто це читатиме. Маленькій дитині може бути краще без шрифту, заснованого на серіфі, або однієї історії "а" на відміну від подвійної історії "а" . Однак якби було сказано запрошення на весілля, тоді шрифти, такі як Едуардський скрипт, є дуже популярними в цьому контексті, тому що давайте поглянемо, що чим більше Serif, тим декоративніше, тим краще - на думку деяких наречених, що є;), хоча навіть все-таки декоративні речі є використовується в основному для заголовків, а не цілого контенту. Як мудрий ол

Контраст / Колір: Знову це варто враховувати з точки зору вашого проекту. Звичайно, ви не хочете осліплювати людей через надзвичайно високий контраст або не давати їм зморшок від примруження до чогось, що має надзвичайно низький контраст - ця частина очевидна. Але залежно від вашої кольорової гами, можливо, ви захочете поспілкуватися з налаштуваннями яскравості та контрасту. Ви помітите, що, наприклад, GD.SE не зовсім чорний і зовсім білий (про що тут і питають відповіді ) - він має менший контраст, ніж це, отже, досить просто дивитись на цей веб-сайт протягом дуже тривалих періодів часу порівняно дивитися на щось із значно вищим контрастом - ваші очі втомлюються!

Вага: В цілому більш легких вагових шрифтів десять , щоб бути трохи більш розбірливим , ніж деякі важчі, це обговорюється тут , поряд з іншими аспектами розбірливості , які можуть виявитися корисними.

Скільки: залежно від медіа, аудиторії та вмісту ви можете вибрати кілька шрифтів. З цього я пропоную бути обережними. Ви, звичайно, не хочете плутати вміст. Вся суть шрифту полягає в тому, щоб щось повідомляти, те, що ви шукаєте, це спосіб зробити це найбільш ефективно. Занадто багато шрифтів можуть заплутати, хоча один шрифт іноді може бути нудним. Як правило, це змішується з точки зору жирного шрифту / курсиву та розміру з, можливо, двома шрифтами. Сполучення шрифтів обговорюється трохи більше тут .

Ось деякі аспекти, які вам слід звузити, якщо ви збираєтеся з порожнього шиферу, але хоча є багато, що слід врахувати, коли він дійсно зводиться до нього, це не так вже й погано. Значення вибору правильного шрифту / шрифтів на ранній стадії проекту не має порівняння! Більше про фактори, які слід враховувати при виборі шрифту тут.

Хороша аналогія полягає в тому, що це як одягатися, проста концепція, про яку тут йдеться .

Оскільки, звичайно, впав формат моєї відповіді, ви хочете спершу розібратися, для кого це і що він повинен сказати - тоді ви хочете розібратися в засобах комунікації, який шрифт :), і оскільки це не було б Jenna-Відповідь без ряду посилань, це далі обговорюється тут .

Я настійно пропоную прочитати надані мною посилання, вони дуже корисні та допоможуть вам вибрати правильний шрифт для вашого проекту, саме це покращить читацький досвід. Шрифт сприяє не лише розбірливості, а й усьому контексту, не кажучи вже про естетичний, адекватно розбірливий шрифт може відірвати від дизайну цілком тоді, коли і настільки ж розбірливий, але більш підходящий може залишитися непоміченим, а тому зробити дизайн та інформація про найвизначніші речі. На мій погляд, час для цього зробити досить важливо.

Сподіваюсь, я допоміг і не надто сильно розігнався, я трохи захоплений правильним шрифтом :) Удачі з вашим проектом.


2

Я вважаю, що шрифти Serif, як правило, простіші для очей протягом більш тривалого періоду читання. Для кращого досвіду читання, я думаю, шрифт із засічками, як Adobe Garamond, працює добре. Це не так "бла", як Times. У серіфах є кілька цікавих кривих, що допомагає зробити її трохи більш «чистотою», наскільки шрифти засічок.

введіть тут опис зображення

Ось стаття на цю тему, з якою я схильна погоджуватися:

Серіф проти Санс: фінальний бій


1
Немає переконливих доказів того, що серіфіфічні обличчя - це більш-менш читабельні, ніж обличчя без серифів. Єдиний виняток буде на екрані, де дисплеї з нижчою роздільною здатністю можуть ускладнити візуалізацію деталей серіального обличчя.
DA01

1
Гарамонд може бути досить гарним, але його низьке співвідношення колишнього колишнього може погіршити розбірливість, якби його використовували як шрифт тіла. Шрифти із серіальними шрифтами з щедрішими колишніми висотами включають Грузію, Бітстрім Хартія та Харіс СІЛ.
Гевін Р. Путланд

@ GavinR.Putland Не могли б ви детальніше розглянути питання про співвідношення колишніх / em? Це може погіршити читабельність лише в тому випадку, якщо міжрядковий інтервал занадто малий = неправильний. Рекомендується принаймні 140% міжрядкового інтервалу.
Михайло V

@ DA01 Я помітив тенденцію, коли люди згадують деякі "доказові" аргументи. Як експерт, я можу сказати, що шрифти, подібні до Гарамонда, є найбільш читабельними, і те саме вам скажуть інші фахівці з друкарства. Це не для вас "докази"?
Михайло V

@MikhailV це не докази. Така думка. Які там є докази (які є мінімальними), як правило, схиляються до "найбільш читабельних облич - це обличчя, які людина найвідоміше читає"
DA01

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.