Вольный перевод статьи на замечательном сайте Webdesignerwall, с моими комментариями и замечаниями.
Итак, что бы ваш текст было удобнее читать, нужно превратить его из серой однородной массы в “золушку”, а именно использовать цвета, шрифт, пространство между строк, чтобы визуально выделить основные элементы и сделать чтение комфортным. Все это, как вы уже догадались, приведет к повышению уровня юзабилити сайта.
Правило 1. Используйте разный размер шрифта.
Для заголовков это теги h1 h2 и font-size не меньше 20px. Увеличиваем размер ( и толщину соответственно) заголовка – делаем его важнее. Самые главные заголовки выделяют тегом h1.
Уменьшаем – делаем менее значимым.
Правило 2. Тип шрифта.
Используйте разный тип шрифта. Например заголовок шрифтом с засечками, текст – без.
Набор шрифтом для web достаточно ограничен, поэтому можно использовать Photoshop и с помощью
- CSS вставить картинку с текстом в background, вместо самого текста
- Использовать Flash, Javascript+Flash = любой шрифт динамически.
Правило 3. Цвета
Используйте цвета, для букв, для ссылок, для заголовков.
Правило 4. Cases – или по-русски использование букв в верхнем регистре или просто больших букв.
подходит для небольшого текста, избегайте использовать для длинных фраз
Правило 5. Стиль и декорирование.
Не выделяйте текст подчеркиванием, это путает пользователя. Ведь он привык видеть подчеркнутыми ссылки. Можно выделить курсивом текст, можно увеличить шрифт, использовать тег <strong>.
Правило 6. Использование цитаты.
Для цитирования есть тег blockquote. Его можно применять как по прямому назначению, вставить цитату, так и для выделения важной части параграфа визуально, с помощью цвета и отступов.
Правило 7. Использование пространства – между букв, строк, параграфоф.
- Расстояние между блоками – регулируется padding, margin
- Расстояние между параграфами – регулируется padding, margin
- Расстояние между букв (Tracking) –
letter-spacing - Расстояние между строк (Leading)-
line-height - Отступы (Indentation) -
paddingormargin, blockquote
В итоге общая картинка должна выглядеть так
Related posts:
Хорошая статейка, я в принципе этих правил и придерживаюсь, может конечно и не полностью, но тем не менее. Шрифт с засечками это как понимать?
Казалось бы прописные истины. Но когда смотришь на последнюю картинку, что это действительно золушка, а не серая масса.
Хорошие советы, почаще бы им следовали люди было бы интереснее читать многие блоги. Я бы ещё добавил использование графики в умеренных масштабах.
to Заводской раб
Засечки – это штрихи, обычно в начале или в конце буквы, например у шрифта типа Arial засечек нет , а у Georgia есть. Попробуйте в html редакторе посмотреть, разницу сразу увидите.
Thanks for this article, it’s very informative. I like reading about this subject, keep up the good work!
I do agree with all the ideas you have presented in your post. They are very convincing and will definitely work. Thanks for the post.
Your feeds are fed into other blogger’s RSS feeders, making it syndicated or putting in another way, people out there will subscribe to them and receive online copies of your text.
Dorset@live.com
thanks for the post. I am very happy to read this post. . . . .
I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work.
Been looking for this article for long time ago and finally found here. thanks for sharing this post. appreciate!
I am really thankful to the author of this post for making this lovely and informative article live here for us. We really appreciate ur effort. Keep up the good work. . . .