Даже с относительно ограниченным набором опций в CSS, typography может сильно различаются с использованием чистого синтаксиса CSS.Засечками или без засечек?Большой или маленький шрифт?Высота линии, интервал, размер шрифта и padding… Список можно продолжать и on.
Чтобы найти типографских шаблонов проектирования, которые распространены в современном веб-дизайне и решить некоторые общие проблемы, типографские, мы провели обширное исследование на 50 популярных веб-сайтов, на которых типография имеет большее значение, чем обычно (или, по крайней мере, должны значат больше, чем обычно).We’ выбрали популярных газет, журналов и блогов, а также различные типографии связанных websites.
We’ ве тщательно проанализировали их типографику и таблицы стилей и искали сходства и различия.Мы также собрали таблица из study который отображает websites’. Различные значения (например, отношение высоты линии и линии длиной)
В конечном счете, мы определили 13 общих типографских problems и вопросы, связанные с типографский дизайн и попытались найти ответы на них через наших исследований:
- Как популярных засечками и без засечек шрифты в копии тела и заголовков
- Какие шрифты используются наиболее часто
- Что такое средний размер шрифта
- Что такое среднее соотношение между размером шрифта заголовков и основного текста
- Что такое средняя высота линии тела копию
- Что такое среднее соотношение между высотой строки и размер шрифта в основном тексте
- Что такое среднее соотношение между линией высоту и длину линии в основной текст
- Что такое средняя величина расстояния между пунктами
- Что такое среднее соотношение между абзацами, чтобы высота строки в основной текст
- Как будут ссылки стиль
- Сколько символов в строке распространены в основном тексте
- Как часто ссылки подчеркнул
- Как часто замены шрифта (SIFR и т.д.), используемых
Мы закончили с твердыми данными, которые мы оценивали и подготовлены к этой статье.Судя по статистическим данным, мы определили несколько “ правила thumb” для работы с типом.Пожалуйста, обратите внимание, что эти правила часто, но не всегда, считается лучшим practice.
1.Serif против Sans-serif
Ли дизайнеры должны использовать шрифт с засечками или без засечек шрифты для основного текста является одной из самых обсуждаемых и нерешенных вопросов о наборе в Интернете.Некоторые дизайнеры предпочитают давать их заголовки засечками (которые являются короткими, декоративные линии в конце письма ударов), чтобы дать им больше привлекательности.Основной причиной выбора шрифта с засечками для заголовков в том, что на большой size, шрифты с засечками легко читаются и выглядят отлично. contrast между шрифт с засечками для заголовков и шрифт без засечек для основного текста может быть интересно,too.
Некоторые дизайнеры предпочитают шрифты с засечками для основного текста, потому что они считают, что строки в конце письма ударов помочь руководство читателей от одной буквы к другой, делает сканирования и чтения более comfortable.
По данным нашего исследования, без засечек шрифты все еще более популярны, чем шрифты с засечками для заголовков, хотя они, кажется, упали в популярности в последние years.
- 60% сайтов используют шрифты без засечек для заголовков, в основном, Arial, Verdana, Lucida Grande и Helvetica.Среди них:. CNN ArsTechnica Slate BBC и NewScientist
- Только 34% сайтов используют шрифт с засечками для основного текста.Среди них:. Нью-Йорк Times Typographica Time AIGA и Newsweek
- Самые популярные шрифты с засечками для заголовков являются Грузия (28%) и Baskerville (4%)
- Самые популярные шрифты с засечками для основного текста являются Грузия (32%) и Times New Roman (4%)
- Самые популярные шрифты без засечек для заголовков Arial (28%), Helvetica (20%) и Verdana (8%)
- Самые популярные шрифты без засечек для основного текста являются Arial (28%), Verdana (20%) и Lucida Grande (10%)
Два thirds веб-сайтов опрошенных нами использована без засечек шрифты для основного текста.Главная причина, наверное, потому что, несмотря на растущую популярность передовых замены шрифта методов, таких как Cufón, большинство дизайнеров придерживаются основных веб-шрифтов, которые по существу дать им только два жизнеспособных вариантов: Грузия и Times New Roman.И из-за стигматизации Times New Roman (что часто делают современные веб-сайте выглядят устаревшими), they’ Re осталось только Грузия.Рубленые шрифты предлагают широкой variety варианты Web.
2.Какой шрифт является самым популярным
Удивительно, но, несмотря на растущую популярность методов замены шрифта и растущей доступностью новых предварительно установленных шрифтов (например, Windows Vista и Mac шрифты), проекты в нашем исследовании используется в основном традиционные, основные веб-шрифты, за исключением лишь Lucida Grande (который приходит установлена только на Маках), Helvetica и Baskerville.
Как и следовало ожидать, Arial, Грузии и Verdana используются для большинства тела копию сегодня.В нашем исследовании, около 80% сайтов использовали один из этих трех шрифтов.Для остальных 20%, designers’ любимой Helvetica является популярным выбором, как Lucida Grande.
С опции, такие как Verdana и Arial доступны как падение спиной, дизайнер действительно не имеет никаких оснований не указывать другие нестандартные шрифты для достижения наилучшего эффекта.Вы можете узнать больше о стеки передовые CSS шрифт в Nathan Ford’ S статье Лучше CSS шрифт Stacks и CodeStyle’ S построить лучшую CSS шрифт Stacks.
Jon Tan использует засечек Baskerville для заголовков и засечек Грузии для тела copy.
Verdana используется минимально для заголовков.Только 10 веб-сайтов использовать его для основного текста с самого начала, и только в четырех использовать его для заголовков.Основной причиной является то, что Verdana ставит много расстояние между буквами, что делает его не столь опрятно, чтобы читать в больших размерах.Если вы собираетесь использовать его для заголовков, вы можете воспользоваться CSS letter-spacing собственность.Грузия и Arial являются самые популярные fonts для headings.
Наконец, отметим, что “ alternative” шрифты используются гораздо больше для заголовков, чем для основного текста.Дизайнеры кажутся более готовы experiment с заголовками, чем с основным корпусом.Если вы хотите, чтобы принести типографских изменения в свой следующий проект, заголовков может быть проще всего start.
3.Светлый или темный фон
Нам было любопытно узнать, в какой степени дизайнеры были готовы экспериментировать с темными цветами фона.Мы смотрели для любой типографии ориентированных сайтов, которые были темные цветовые схемы и были удивлены, обнаружив ни одного one.
Новый Yorker имеет светлых тонах, с Times New Roman используется для заголовков и тела copy.
Чистый белый background для основного текста одержал полную победу.Тем не менее, многие из проектов избежать высокой контрастности белого на чисто черный; цвет текста часто делается немного легче, чем чистый черный цвет.Дизайнеры четко сосредоточиться на четкость и избежать экспериментировать с цветом фона.Контраст черного цвета на белом легко читается и, по крайней мере, среди этих веб-сайтов, статус quo.
4.Средний размер шрифта для Headlines
Конечно, выбор размера шрифта заголовка зависит от шрифта, используемого в дизайне.В любом случае, в нашем исследовании на сегодняшний день является самым популярным размером шрифта от 18 до 29 пикселей, с 18 до 20 пикселей и 24 на 26 пикселей является наиболее популярным choices.
Наше исследование didn’ T дают никаких явных победителей.Средний размер шрифта для заголовков составляет 25,6 пикселей.Но учтите, что любой размер между 18 и 29 пикселей может быть эффективным, оно зависит, в конце концов, о том, как ваши заголовки соответствуют общий дизайн вашей website.Тем не менее, вы можете попробовать экспериментировать с большими размерами, так как дисплеи всегда становится больше, как и дисплей resolutions.
Очевидны выброса является Wilson Miner (скриншот ниже), который использует массивный размер шрифта 48 пикселей за его заголовки.Его веб-сайт представляет собой особый случай, хотя, потому что все его сообщения имеют очень короткие названия, всего в нескольких words.
