типографика для веб-дизайнера

Типографика

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

В этой статье, я поделюсь своим опытом и переведу пару статеек на тему “типографика”

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

2. Не смешивайте много разных шрифтов на странице.

Выбирайте один шрифт для заголовка, другой для тела текста, но не смешивайте более 2 шрифтов в теле текста. Кроме того, нужно грамотно подбирать сочетания шрифтов. Здесь могу посоветовать сайтик http://fleek.org/fleekaj/WBVNEgxMS08RT0pNGBJcRVxGEFcTG1oXUxg=/

3. Не мешайте вместе serif и sans-serif шрифты.

Чтобы вкратце объяснить, покажу рисунок

 

Т.е. это шрифты с засечками и без.(serif переводится как засечка, sans – без)  Т.е. используйте на странице или те, или другие.

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

Основные рубленые шрифты(т.е. без засечек): Arial, Impact, Lucida, Verdana, Tahoma, Trebuchet.

Шрифты с засечками: Times, Georgia, Garamond.

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

Лучше всего задавать относительный размер в ems. Я считаю, что самым лучшим способом является прописание в классе body размер в 62,5%. А дальше шрифты указывать в ems. Если будете использовать этот путь, то 1 ems будет равен 10 пикселям. Также советую выбирать размер основного текста 14-15 пикселя(т.е. 1,4-1,5 ems), а заголовков 18-24 пикселя

5. Правильное междустрочное расстояние

Если вы работаете в фотошопе, то выставляйте для основного текста “antialiase: none” а междустрочное 16-18 пикселей(или 120% от размера текста).

6. Цвет шрифта

Ну здесь думаю понятно. Должен быть контраст с фоном и не вздумайте использовать ядовитые кислотные зеленные или красные оттенки.

7. Расположение текста

Весь текст должен быть выровнен относительно заранее подготовленной сетки или grid system. Как включать её в шопе думаю знаете. А вот я хотел бы вас познакомить с сервисом 960. Это сервис, где можно скачать готовые направляющие сетки c версткой.

А вообще дизайн в шопе должен выглядеть так

8. Пространство внутри элементов

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

Плохо

 

 

Лучше

9. Расстояние между элементами.

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

Плохо

Хорошо

10. Последовательность в промежутках

Если вы делаете отступы в одной колонке 10 пикселей, а в другой 50, а в третей – 20, то ваш макет будет выглядеть как минимум неаккуратным, как максимум – говном

Смотрим

 

Удачи в типографике

Постовой.

Все еще долбитесь над вопросом как заработать на своем сайте

А вообще когда делать нефиг, то можно поиграть в прикольные флеш игры

 

 

Похожие статьи:

• Кроссбраузерные техники css3 которые можно использовать уже сейчас
• Дизайн блогов – рекомендации, примеры, техники
• Взгляд на дизайн веб 2.0 по-фликовски
• Плагин и скрипт выезжающей панели на jquery
• В поисках идеального каркаса для сайта – гибридная ширина макета