|
Шрифты в веб-дизайне
|
|
Суббота, 04.06.2011, 20:56
Заблокированные
1. Итак, первая слегка неприятная новость. В вебе пока нельзя использовать нестандартные шрифты. Забудьте о них вообще. Люди заходят на сайт не посмотреть красоту текста, а почитать сам текст, для этого существует набор стандартных шрифтов, которые хорошо справляются со своей задачей.
2. Не смешивайте много разных шрифтов на странице.
Выбирайте один шрифт для заголовка, другой для тела текста, но не смешивайте более 2 шрифтов в теле текста. Кроме того, нужно грамотно подбирать сочетания шрифтов. Здесь могу посоветовать сайтик http://www.typetester.org/
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, то ваш макет будет выглядеть как минимум неаккуратным, как максимум – говном
Смотрим
Источник |
|
Суббота, 04.06.2011, 21:04
Проверенный
| Спасибо , может и пригодиться ;] |
Всем пока , было с вами приятно пообщяться |
|
Понедельник, 13.06.2011, 01:56
Проверенный
Очень хорошие советы! Спасибо!  |
Заказать рерайт, копирайт, сео-копирайт по низким ценам!
http://u.to/UkQbAg |
|
Понедельник, 13.06.2011, 02:37
Проверенный
Это зачет  5+ узнал немного полезного. |
Делаю рипы ucoz dle, верстаю макеты, пишу модули для dle, правки кода, верстка отдельных частей. АСЬКА В ПРОФИЛЕ |
|
Понедельник, 18.07.2011, 11:41
Пользователь
| Спасибо узнал много полезного, небуду теперь делать ошибок) |
|
Воскресенье, 24.07.2011, 11:00
Проверенный
Статья очень полезна. Одна из лучших в разделе.
Спасибо за старания. |
|
Вторник, 09.08.2011, 22:07
Пользователь
| Огромное спасибо автору! |
Я:И они верят в то, что миру 10 000 тысяч лет?!
-А как же остатки динозавров?
Они:Их бог создал,чтобы проверить нашу веру.
Я:Нет парень, это тебя бог создал,чтобы проверить мою веру. |
|
Четверг, 11.08.2011, 01:23
Проверенный
спасибо не знал.
я обычно arial, times new и verdana использую |
[qc][spoiler="Услуги"]Рисую макеты от 400р.[/spoiler][/qc] |
|
