А он, как Вы уже догадываетесь, является не маловажный аспектом для успешного продвижения сайта.

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

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

Аксиомы типографики, или Правила, которые лучше не нарушать.

у добство чтения прежде всего!

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

Выбирайте оптимальный размер шрифта

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

Буквы должны иметь высокую различимость

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

Цвет - важная составляющая типографики

Существует несколько версий оптимального цветового решения в выборе фона и шрифта.

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

Для книг - зеленый или желто-зеленый (эта рекомендация для электронных книг). Но по-прежнему главный параметр в выборе пары фон-шрифт это контрастность. А дальше уже на ваш вкус.

Например, такое сочетание лучше не использовать:

Нужна ли шрифту засечка?

В интернет-пространстве - определенно «нет». Засечки будут лишний раз отвлекать глаза, заставляя «спотыкаться» на слове без видимых на то причин. Оставьте шрифты с засечками для бумажных носителей - там они пригодятся гораздо больше.

Сколько видов шрифтов уживется на странице?

По итогам исследований, редкий текст выдерживает сочетание более двух шрифтов.

Разумеется, вы можете провести опыты на своих текстах, а можете просто прислушаться к мнению тех, кто неоднократно проводил этот эксперимент.

А теперь давайте поговорим про колонки, строки, заголовки - все то, что придает текстам формы и очертания.

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

Если не можете выбрать оптимальную величину колонки самостоятельно, поставьте минимально возможную: до 8 слов.

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

Текст сразу начнет «дышать», и читатель с легкостью будет воспринимать смысл написанного.

В заголовках же не забывайте о принципе «матрешки»

Главный заголовок будет самым большим, подзаголовки - меньше, а сам текст - написан стандартным кеглем. Отдельные важные слова можно выделить полужирным шрифтом, но и тут желательно не переусердствовать, так как долгое чтение такого текста утомляет зрение и… уводит читателя с вашего ресурса.

Но не шрифтом единым жив текст! А еще и версткой!

Так называется специальный код страницы.

Он позволяет пользователю видеть один и тот же материал одинаково через разные браузеры, а поисковикам ­- проще индексировать сайт.

Чтобы сверстать веб-страницу, надо разбить дизайн на элементы, перевести их в формат HTML, а затем отформатировать. Можно использовать и дополнительные средства, например, таблицы стилей CSS.

Когда видам верстки придумывали названия, мудрить не стали. Так появилась резиновая верстка, при которой макет сайта растягивается в зависимости от заданных размеров окон (причем обязательно должна быть указана минимальная и максимальная ширина).

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

Технические особенности верстки

Современным стандартом предусмотрена кодировка UTF-8: она применяется во всех файлах HTML, CSS, JS.

Тип текущего документа, или DOCTYPE, при верстке следует выбирать строго HTML для корректного отображения страницы. Не забывайте и про кроссбраузерность ресурса, синхронизирующую данные в Google Chrome, Internet Explorer (последней версии), Firefox, Opera, Safari.

Назвать страницу сверстанной невозможно без ее валидности то есть кода, доступного для всех поисковых систем, обладающего чёткой структурой и обеспечивающего верное отображение во всех распространенных браузерах и стандартных разрешениях выше 1024: 1024×768, 1280×1024, 1680×1050 и 1920×1080.

При добавлении или убавлении текста правильно сверстанная страница не тянется, не теряет внешнего вида и не «разваливается».

Структурируйте сайт при помощи заголовков H1 и H2 - позвольте поисковым системам правильно воспринимать информацию. Кроме того, этим вы сделаете тексты комфортнее для пользователей.

Помните про шрифты всегда!!!

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

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

И не забывайте проводить тестирование.

Подойдет и простое A/B, где вы можете выбрать два оптимальных варианта и отправить на суд читателю. Но можно использовать и более точное, мультивариативное тестирование: страниц для исследования загружаем больше, трафика используем также больше, но зато и результат будет гораздо точнее.

Хотите по-настоящему надежную верстку?

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

Однако, так думает SeoPult.

И я такого же мнения что Шрифт для сайта…. важно!

16 px – это оптимальный размер шрифта для веб-страниц.

На первый взгляд это утверждение может показаться странным и даже провокационным. Основной шрифт у большинства веб-страниц не превышает 12 пикселей и многие веб-дизайнеры убеждены в том, что это – оптимальный размер для шрифта. Эта статья призвана убедить вас в обратном.

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

Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.

Доход сайта и привлечение читателей

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

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

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

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

4 факта о чтении, которые должен знать веб-дизайнер

1) После двадцати лет качество зрения у людей снижается , в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.

2) У 9% американцев есть проблемы со зрением , а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.

3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.

4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства , это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.

16px текст на 24" мониторе и 12pt текст в книге

16px текст на 15,4" мониторе и 12pt текст в книге

Плохие шрифты снижают посещаемость сайта

Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.

Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.

Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?

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

Не напрягайте читателя лишний раз, иначе до него не дойдет смысл прочитанного (если он даже прочитает ваш текст, а не покинет сайт сразу).

Не отпугивайте посетителей неудобными шрифтами, ведь чем больше у вас посетителей – тем выше доход принесет сайт в конечном итоге.

Не заставляйте пользователя думать!

Многие дизайнеры считают, что «проблемы утопающих – дело рук самих утопающих», и если у пользователя возникают проблемы с чтением шрифта на сайте, то он должен обратиться к функции приближения, которая позволяет увеличить текст. Но с точки зрения пользователя, легче поискать необходимую информацию на другом сайте, чем настраивать под себя неудобный интерфейс веб-ресурса. А многие пользователи даже не знают о существовании такой функцией, и, сталкиваясь с текстом, который невозможно прочитать, не долго думая нажимают кнопку «Назад».

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

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

16 px – это удобно

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

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

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

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

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

Каких основных правил стоит придерживаться при размещения текста на сайте?

• Шрифт, который прочитает пользователь вашего сайта, в первую очередь, должен быть удобным для чтения. Не всегда красивые и оригинальные шрифты удобны и понятны для читателя.
• Шрифт должен дополнять текст, а не замещать его. После прочтения написанного, посетитель должен запомнить суть текста, а не интересную типографику.
• При использовании нескольких шрифтов в одном тексте нужно помнить, что контрастность должна делать шрифты разными, но при этом сохранять в них какую-то одну общую черту.
• Простота – залог успеха. Ваш текст не должен превратится в выставку разнообразных типов шрифтов.
• Выбирайте шрифт исходя из запросов рынка. Проанализируйте конкурентов в своей нише и поймите, нужен Вашему сайту, к примеру, строгий, крупный или достаточно формальный шрифт.
• Обращайте внимание на пробелы между словами и буквами. Они должны быть в меру широкими.
• Не нужно использовать заглавные буквы в начале каждого слова. 90% текстов в Интернете написаны строчными буквами и прекрасно читаются пользователями.
• Длина строки не может быть очень короткой, чтобы не нужно было перескакивать на начало строки постоянно, что само собой понятно вызывает неудобство для пользователей. Но и слишком длинной строку также не стоит делать. Ищите “золотую середину”.
• Не забывайте о плотности слов, у пользователя не должно возникать ощущения, что все слова свалены как-нибудь на одну кучу.

По статистике популярными и распространёнными считаются шрифты: Times New Roman, Georgia, Verdana, Arial Black, Courier, Trebuchet MS, Comic Sans или Impact.

Выбор размера шрифта, цвета шрифта и фона для него.

Размер шрифта имеет весомое значение, но с его выбором предугадать сложно. Ведь некотрым нравится крупный шрифт, некоторым более мелкий. Стандартом принято считать размер в 14 пикселей (именно он применяется для написания государственных дипломных и курсовых работ). Выбранный размер шрифта должен соответствовать лишь одному правилу – посетителю вашего ресурса просто необходимо удобно читать размещенный текст.

Принято считать, что черный текст на белом фоне – идеальное сочетание. Но люди проводящие много времени за ПК утверждают, что все-таки комфортнее читать черно-серый текст на чуть сероватом фоне. Дело в том, что при таком сочитании глаза не так устают. Ведь белый фон более резкий и яркий по сравнению с немного сероватыми его оттенками.

Где берут качественные веб-шрифты? Существует множество полезных ресурсов, на которых можно найти шрифты на любой вкус. Среди таких сайтов особое внимание следует обратить на Fontsquirrel, Myfonts, Fonts.com, Typekit, Typecast, WebFont.ru.

В каких форматах должны быть файлы шрифта? Шрифты должны быть одновременно в нескольких необходимых форматах. А именно: TTF или OTF – файл шрифта, но подгружаемый с сервера на время просмотра сайта; WOFF - незащищенный архив исходника OTF или TTF, важный формат (поддерживается большинством популярных браузеров); EOT - внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer ; SVG - для поддержки Safari.

Как использовать шрифты для сайта? Несколько рекомендаций, которыми пользуются веб-специалисты.

1. Делайте на странице сайта несколько блоков текста. Это создает дополнительные “зацепки” для читателей.
2. Виберите оптимальные параметры позиционирования и выравнивания шрифта. Делайте выбор параметров позиционирования, включая обтекание, минимальную и максимальную ширину и высоту, обращая внимание на элементы дизайна и оформления страницы.
3. Подбор шрифтов делайте в зависимости от характера вашего продукта/услуги или бренда. Например, плавные линии, избегание использования углов и легкие буквы самым лучшим образом указуют на женский продукт.
4. Проверьте действительно ли ваш текст читабельный. Ставьте ставки на легкий шрифт для сайта.
5. Используйте оптимальный размер шрифта, при этом включайте в текст несколько шрифтов разных размеров. Например, можно делать заголовки/подзаголовки/маркированные списки шрифтом крупнее чем сам текст.
6. Используйте Caps Lock для привлечения внимания. К примеру, так можно выделить короткие слоганы или заголовки. Но не переусердствуйте.
7. Правильно выбирайте интервал между буквами. Большой интервал облегчает визуальное восприятие, и наоборот маленький делает текст более насыщенным, но тяжелым для восприятия.
8. Использование разных пар шрифтов лучше при дизайне полиграфической продукции, баннеров, инфографики.
9. Позаботьтесь об удобном расположении текста на странице.
10. Уменьшайте объем текста на рекламной полиграфической продукции, баннерах, слайдах презентаций.

Надеемся, наши советы помогут Вам определиться с выбором шрифтов для Вашего онлайн-ресурса! Компания ГиперХост всегда рада предложить для ваших сайтов стабильный и качественный

5 января 2012 в 19:05

Мнение: основной текст в 16px

• Веб-дизайн

Не так давно во всеми любимом SmashingMagazine была опубликована статья, в которой автор приводит свою теорию о 16 пикселях как размер для основного текста, и приводит доводы в её защиту. Статья вызвала довольно горячее обсуждение, и сегодня мы выкладываем её перевод.

Перевод предоставлен блогом о веб-дизайне Naikom

Для основного текста все, что меньше 16 - ужасная ошибка

Я знаю, о чем вы сейчас думаете: «Он только что сказал 16 пикселей? Для основного текста? Ужасно много! 12 пикселей идеально подходит для большинства веб-сайтов».
Я бы хотел убедить вас в обратном.

Юзабилити-эксперт Оливер Рейхенштейн (Oliver Reichenstein) в статье «The 100% Easy-2-Read Standard » сказал:
«16 пикселей - не много. Это размер текста в браузере по умолчанию. Браузеры были предназначены показывать этот размер… На первый взгляд кажется многовато, но как только вы попробуете, вы сразу поймете, почему все разработчики браузеров выбрали этот размер текста по умолчанию.»

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

Видите ли, в большинстве случаев, если вы создаете веб-сайт с размером шрифта между 10 и 15 пикселей, вы тратите деньги клиента . И вот почему.

Читатели это доход

Если вы создаете сайт для кого-то - даже для себя - скорее всего, вашей целью является заработать деньги.

Может быть, продать товар напрямую, или предложить услугу, или просто для получения кликов. В любом случае, это бизнес-актив, и в конечном итоге он должен окупить ваши инвестиции. Он должен приносить доход.
Таким образом, каждый элемент должен быть рассчитан на достижение этой цели. В том числе и текст. Особенно текст - потому что текст убеждает посетителей сделать то, что вы хотите.
Подумайте об этом. Если вы не объясните, что люди должны делать, и почему они должны это делать, то они, конечно, и не станут этого делать. И единственный способ, чтобы сказать им это - текст. А текст подразумевает прочтение.

Важные факты о чтении

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

Факт: Большинство пользователей ненавидят «обычный» размер шрифта

Позвольте мне спросить: какой процент ваших читателей составляют люди за 40? Чтобы прочитать текст, их глаза должны работать в два раза больше , чем глаза 20-летнего. Если их возраст приближается к 60, глаза должны работать в четыре раза больше.
Почти 1 из 10 ваших читателей имеют проблемы с глазами. И даже тем, у кого проблем нет, все равно придется напрягаться, чтобы прочитать текст размером меньше чем 16 пикселей , даже если они не замечают, что они делают это. (Как часто вы замечаете, что прижались к экрану?) И если им придется наклоняться, то, скорее всего, им будет неловко и неудобно. Естественная поза перед компьютером - по крайней мере, на расстоянии вытянутой руки от экрана!
Короче говоря, среднестатистического пользователя чтение напрягает.
Чем сложнее прочитать ваш текст, тем меньше смысла будет понято. 10 пикселей будут бесполезны. 12 пикселей - все равно слишком мало для большинства читателей. Даже 14 пикселей могут отпугнуть посетителей, которые бы в противном случае остались.
Таким образом, можно сделать вывод, что если вы хотите добиться максимального числа читателей, то вам необходимо установить его минимальный размер 16 пикселей.

«Но пользователи могут увеличить текст»

«Если вы сделаете правильный код, люди с проблемами зрения всегда могут использовать функцию приближения, чтобы увеличить текст» - так говорил один веб-дизайнер в споре по этому вопросу. На самом деле это не так. Пользователи, которым необходимо изменить настройки, как правило, не умеют этого делать. А те, которые умеют… скорее всего, они изберут более легкий путь, просто нажав кнопку «Назад». Само собой разумеется, что мы не должны использовать деньги наших клиентов, чтобы создавать неудобный для пользователей дизайн. Наши личные вкусы не должны ставиться выше удобства использования.

Веб-дизайн - это не только то, что нравится дизайнерам. Речь идет о том, чего хотят пользователи, и что поможет вам достичь целей наших клиентов.

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

16 пикселей - это не много

Наши дизайнерские вкусы и эстетические предпочтения более гибкие, чем мы думаем. Что нам нравится - в значительной степени результат того, что мы уже видели у других дизайнеров и того, что мы ожидаем.
К сожалению, на большинстве веб-сайтов тексты крошечные, потому что когда-то экраны были крошечными, и дизайнеры еще не оставили эту привычку.
Оригинал этой статьи написан шрифтом размером 19px. Этот размер был выбран, поскольку даже 16-18 пикселей показались слишком мелкими: если устроиться поудобнее в кресле, на расстоянии 70 см от экрана, можно обнаружить, что приходится щуриться, чтобы рассмотреть текст. Если бы я использовал шрифт Georgia или Verdana, 16 пикселей, может быть, и подошли бы: эти шрифты были разработаны с большой высотой букв, и поэтому на экране выглядят больше.

Теперь взгляните на футер и проверьте, не приходится ли вам наклоняться вперед к экрану, щуриться или морщиться, чтобы рассмотреть текст. Ведь его размер 11 пикселей. Если после всего этого я вас все еще не убедил, объясните мне причины в комментариях.

Теги:

• размер шрифта
• типографика

Добавить метки