типографские шаблоны или хорошая практика - PullRequest
Новая
       5

типографские шаблоны или хорошая практика

1 голос
/ 06 марта 2011

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

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

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

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

Спасибо

1 Ответ

2 голосов
/ 06 марта 2011

Эта статья может быть полезна: http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

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

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

  • Контрастность : Если ваш текст представлен на фоне цвета, который его не очень хорошо контрастирует, он будет выглядеть плохо. На самом деле настолько плохо, что его можно считать «недоступным». Вы можете использовать такой инструмент, как Проверка контрастности цвета , чтобы убедиться, что ваш текст соответствует Правилам доступности веб-контента .
  • Цвет : вы, вероятно, обнаружите, что большинство сайтов, которые вам нравятся, не имеют действительно черного текста. Чистый черный цвет обычно не встречается в природе, а черный текст на белом фоне - самый высокий контраст, который вы можете получить, который может выглядеть немного резким. Большинство сайтов смягчают его, делая черный текст слегка серым, например, css color: rgb(30,30,30);
    Если вы хотите использовать цвета, попробуйте выбрать те, которые хорошо работают вместе, используя базовую теорию цвета . Либо так, либо выберите хороший темный цвет и придерживайтесь черного.
  • Визуальная иерархия : В основном, используйте более крупные шрифты для более важных заголовков. Таким образом, h1, скорее всего, будет вашим самым большим фрагментом текста, каждый размер которого уменьшается до h6, а все остальное в тегах p должно приблизительно соответствовать размеру текста, который вы видите здесь. Webdesign Tuts недавно опубликовал статью о визуальной иерархии , которая была довольно хорошей.

Надеюсь, это поможет!

...