Совет Делаем красивые шрифты на сайте WordPress

[NetStar]

NetStar опубликовал новую статью:

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

Подробнее об этой статье ...

 

[lusia]

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

 

[Попай]

@lusia, Тут тока тестировать надо понравившийся шрифт и смотреть во всех браузерах нормально или нет.

 

[lusia]

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

 

[Попай]

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

 

[Васявася]

Приветствую!

А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.

И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?

Спасибо!

 

[Попай]

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

Конечно в премиум темы шрифты не поддерживаемые кириллицу. Удобнее заменять их на шрифты от гугла https://fonts.google.com/

 

[Di Ost]

Приветствую!

А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.

И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?

Спасибо!

Так ну начну по порядку:

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

Определить шрифт. - Определить шрифт можно через CSS сайта, для этого следует:

1. На странице открыть её код ( Сочетание Ctrl + U во всех браузерах )
2. Найти главный файл стилей ( В коде выглядит примерно так: <link type="text/css" rel="stylesheet" href="Ссылка_на_CSS_файл_формата.css"/> )
3. Перейдя в CSS посмотреть какие шрифты зарегестрированы ( @font-face { текст с ссылками на файлы шрифта. } )
4. Стянуть с сайт нужный шрифт.

Кросбраузерность шрифта. - Я из бородатого поколения, когда следовало поддерживать ИЕ6, да и в принципе учитывая истеричность ослика, рекомендую в CSS подключать шрифт в 2х форматах .eot и .ttf, случается так, что шрифт подключен правильно, но он не отображается в каких либо браузерах, и как показала "съеденная собака", некоторые форматы шрифтов браузеры не поддерживают.
Сейчас сталкивался с тем. что пихают на сайты форматы: woff2, woff, svg. На счет крайнего скажу да это действительно круто использовать шрифты SVG да и вообще все. чо с ним связано, но для визитки достаточно тех форматов, что привел выше.
У меня к примеру регистрация шрифта выглядит так:
[CSS]@font-face { font-family: 'gothic'; src: url('css/gothic.eot#') format('eot'), url('css/gothic.ttf') format('truetype'); font-weight: normal; font-style: normal;}[/CSS]
И далее я использую вызов зарегистрированного шрифта:

body { font-family: 'gothic';}

Локализация шрифта. - Бывало такое, находите на буржуйском сайте клевый макет, вытаскиваете из него шрифт.. а он на русском обычный Times new roman \ Calibri, так вот, к чему это я, есть урезанные шрифты, то есть если погуглить по названию, можно найти полную версию с кириллическими буквами. Если совсем шрифт не имеет русскоязычных аналогов следует поискать альтернативный шрифт.
Лично я проверяю написав русский и английский алфавит, устанавливаю шрифт и применяю его на написанное т.к. встречал, что некоторых букв нет и я долго воевал с кракозяброй в шрифте пока не понял, что это не ошибка кодировки, а ошибка в шрифте.

Советы по читабельности. - Ряд рекомендаций, которые следует применять при создании страницы сайта:

• Длина строки должна варьироваться в предела 80 символов. ( Человек ленивое существо и если интуитивно видит много букв в строчку, он не будет читать, даже если там ценная информация. )
• Белый фон, серые буквы - до сих пор остается идеальным сочетанием, пригодным для чтения. И как бы я не любил создавать темный дизайн, белый шрифт на черном фоне читается менее охотно. ( Серые буквы - имеется в виду чисто черный он давит, но стоит от идеально черного #000000 отойти в серую сторону и шрифт с цветом #1E1E1E будет приятно читаться. )
• Два основных размера - избегайте радугу размеров шрифта, на сайте должно быть два основных размера, большой который используется для заголовков и обычный читабельный.
• Группа стандартов шрифта - что бы не вдаваться во все нюансы разделю шрифты на художественные ( которые красивые но сложночитаемые ) и технические ( легко читаемые но более простые ). Для сайта следует использовать технические.
• Междустрочный интервал - следует устанавливать свой интерлиньяж, я обычно ставлю чуть больше чем стандартный, и текст сразу получает объем. ( line-height: 1.1; )
• Красная строка - каждый абзац должен иметь небольшую красную строку, текст воспринимается совсем по другому. ( p { text-indent: 20px; } )
• Грамматика - отслеживайте грамматические и синтаксические ошибки в тексте

 

[roman001]

Приветствую!

А как определить, что за шрифты УЖЕ стоят? Допустим, мне понравился какой-то шрифт установленный на одном сайте по умолчанию, и я хочу его применить на другом.

И ещё вопросик. Часто вместо красивых буржуйских шрифтов в премиум темах при попытке написать по-русски проявляется только Тайм Нью Роман. Есть ли какая-то таблица совместимости/заменяемости аглицких шрифтов с кириллическими?

Спасибо!

Для Google Chrome - Type Sample
Для Google Chrome, Safari, Firefox и Яндекс-браузер - WhatFont

Все эти дополнения к браузерам легко определят название шрифта и его размер.