Как продемонстрировать свой текст так, чтобы он сиял: 3 трюка со стилем CSS

Ваше письмо является центральным элементом вашего блога.

Контент — король, верно?

Это то, что привлекает людей и заставляет их читать ваш блог.

Но что также не менее важно, так это то, как вы на самом деле демонстрируете свое письмо. Визуально то есть.

Ваш контент может быть отличным, но если кому-то его трудно читать, возможно, вы теряете больше читателей, чем думаете.

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

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

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

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

Три трюка, чтобы стилизовать ваш контент, чтобы продемонстрировать ваше письмо

1. Украсьте свои абзацы

Чтобы убедиться, что ваши абзацы легко читаются, вот несколько советов, о которых следует помнить. Здесь мы будем стилизовать тег p (абзац).

• Выберите шрифт, приятный для глаз. Старайтесь использовать шрифт с засечками или без засечек, а не рукописный.

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

В то же время выбирайте не слишком толстый шрифт. Вы хотите, чтобы он имел достаточный контраст с любым жирным шрифтом.

При выборе шрифта убедитесь, что вы используете системный шрифт, шрифт, который вы загрузили в файлы своего блога, или шрифт Google. Я предлагаю использовать шрифт Google, потому что они бесплатны, имеют наибольшее разнообразие и просты в использовании. Чтобы узнать больше, узнайте, как использовать крутые шрифты в своем блоге.

Когда вы выбрали свой шрифт, вы перейдете к своей пользовательской таблице стилей и добавите этот код:

<пред>
п {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
}
</pre>

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

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

<пред>
п {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
размер шрифта: 16px;
}
</pre>

• Используйте правильную высоту строки (интерлиньяж). Правильная высота строки также помогает улучшить читабельность, потому что она дает передышку вашим абзацам. Хорошая высота строки — 1,5, другими словами, в 1,5 раза больше размера текста (высота строки 2 будет двойным интервалом).

<пред>
п {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
размер шрифта: 16px;
высота строки: 1,5;
}
</pre>

• Избегайте чисто черного текста на белом фоне. Это тяжело для глаз. Вместо этого выберите темно-серый (мне нравится #333333) для вашей копии, чтобы немного уменьшить контраст.

<пред>
п {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
размер шрифта: 16px;
высота строки: 1,5;
цвет: #333333;
}
</pre>

• Избегайте выравнивания абзацев по центру. Центрирование основного текста выглядит непрофессионально и затрудняет чтение. Почему? Каждый раз, когда ваш взгляд переходит на новую строку, ему приходится с трудом находить начало следующей, потому что он никогда не бывает на одном и том же месте. Выравнивание по центру следует оставить для стихов, подписей или коротких фрагментов привлекающего внимание текста и выбрать левое. выравнивание или оправдание ваших обычных абзацев. Выровненный текст размещается таким образом, чтобы левая и правая стороны абзаца были прямыми.

<пред>
п {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
размер шрифта: 16px;
высота строки: 1,5;
цвет: #333333;
выравнивание текста: по ширине;
}
</pre>

<pre>выравнивание текста: по левому краю; </pre> — это поведение по умолчанию, и его не нужно указывать, если вам не нужно переопределить предыдущий стиль.

• Наконец, добавьте пробел. Вам понадобится достаточное пустое пространство между абзацами для оптимальной читабельности. Хорошее эмпирическое правило — добавлять поля под каждым абзацем, примерно равные удвоенному размеру шрифта.

<пред>
п {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
размер шрифта: 16px;
высота строки: 1,5;
цвет: #333333;
выравнивание текста: по ширине;
нижняя граница: 32px;
}
</pre>

2. Использовать иерархию

Вы используете иерархию, когда описываете свои посты, используя заголовки и подзаголовки.

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

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

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

• заголовки h6 = 16 пикселей (обычно того же размера, что и текст абзаца, но выделены жирным шрифтом и на отдельной строке)
• заголовки h5 = 18px
• заголовки h4 = 22px
• заголовки h3 = 26px
• заголовки h2 = 30px
• Заголовки h1 (заголовки ваших сообщений в блоге) = 36px

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

<пред>
h1, h2, h3, h4, h5, h6 {
семейство шрифтов: ВСТАВИТЬ НАЗВАНИЕ ШРИФТА;
размер шрифта: 36px;
вес шрифта: полужирный;
}
</pre>

Далее вы добавите некоторые переопределения CSS, чтобы изменить размеры для каждого уровня заголовка:

<пред>
ч2 {
размер шрифта: 30px;
}

h3 {
размер шрифта: 26px;
}

h4 {
размер шрифта: 22px;
}

h5 {
размер шрифта: 18 пикселей;
}

h6 {
размер шрифта: 16px;
}
</pre>

3. Используйте ссылки

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

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

<пред>
а {
цвет: розовый;
оформление текста: подчеркивание;
}
</pre>

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

<пред>
а: наведите {
цвет синий;
текстовое оформление: нет;
}
</pre>

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

<пред>
а: посетил {
цвет синий;
}
</pre>

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

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

Какими еще способами вы оформляете свои сообщения в блоге, чтобы сделать их легко читаемыми для ваших пользователей?

Хотели бы вы узнать больше о том, как вы можете использовать CSS, чтобы сделать свой блог более привлекательным для ваших читателей и по-настоящему продемонстрировать свои тексты? Потрясающий! Тогда я бы хотел, чтобы вы присоединились ко мне на бесплатном видео-тренинге по CSS. Он скоро начнется, так что зарегистрируйтесь сейчас.

Изображение предоставлено Pixabay