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

Question

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

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

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

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

Благодарности

Answer 1

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

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

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

• Контраст: Если текст представлен на фоне такого цвета, который не противопоставлять это хорошо, это будет выглядеть плохо. На самом деле так плохо, что его можно считать «недоступным». Вы можете использовать такой инструмент, как Colour Contrast Check, чтобы убедиться, что ваш текст соответствует Web Content Accessibility Guidelines.
• Цвет: Вы, вероятно, обнаружите, что большая часть вашего сайта не имеет действительно черного текста. Чистый черный обычно не встречается в природе, а черный текст на белом фоне - это самый высокий контраст, который вы можете получить, что может показаться немного суровым. Большинство сайтов смягчают его, делая свой черный текст слегка серым, с css, например color: rgb(30,30,30);
  Если вы хотите использовать цвета, попробуйте выбрать те, которые хорошо работают вместе, используя basic color theory. Либо это, либо выбрать хороший темный цвет и придерживаться черным.
• Визуальная иерархия: В принципе, используйте более крупные шрифты для более важных заголовков. Таким образом, h1, скорее всего, будет вашим самым большим фрагментом текста, каждый размер которого будет доходить до h6, а все остальное в тегах p должно быть примерно размером с текст, который вы видите здесь. Webdesign Tuts недавно опубликовал an article on visual hierarchy, что было довольно неплохо.

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