Типографика является очень важным элементом красивого дизайна, но когда дело доходит до веб – то эта деталь частенько упускается из вида. Даже если вы обращаете тщательное внимание к типографике в своих проектах, HTML и CSS, зачастую, не дают вам полного контроля, который необходим для выполнения задуманного.
Если вы нуждаетесь в лучшем контроле над типографикой в своих проектах, тогда попробуйте использовать некоторые из следующих плагинов jQuery:
Lettering.js
Lettering.js используется для того, чтобы дать вам быстрый и точный контроль над каждой буквой из заголовка, автоматически добавляя диапазоны классов к каждому символу. В то время как возможности ограничены только вашим собственным творчеством, ниже перечисленны некоторые преимущества, которое позволяют быстро ориентироваться на отдельных буквах:
- Манипуляция и управление кернингом каждого отдельного текста
- Раскраска отдельных букв заголовков
- “Ералаш” вращения отдельных букв, для создания игривого эффекта
Пример кода
Вот небольшой пример того, как можно использовать плагин Lettering.js, чтобы добавить индивидуальность к вашим заголовкам:
При таргетировании заголовка, вам нужно использовать функцию “надписи” (lettering):
<script>
$(document).ready(function() {
$(".custom_title").lettering();
});
</script>Затем, добавьте использование custom_title класс для заголовка, который вам необходим:
<h1 class= "custom_title ">Ералаш</h1>
Функция “lettering” автоматически добавит спан к каждой букве custom_title заголовка, вроде этого:
<h1 class="custom_title"> <span class="char1">Е</span> <span class="char2">р</span> <span class="char3">а</span> <span class="char4">л</span> <span class="char5">а</span> <span class="char6">ш</span> </h1>
Теперь просто используйте стандартный CSS, в целях таргетирования отдельных спанов в заголовке:
h1.custom_title char1 {
/* здесь задаются параметры для первого символа и тд. */
}
Скачать здесь.
FitText
Когда вы делаете графический дизайн в Photoshop, то вы масштабируете строку текста по ширине родительского элемента, что является простой задачей. Если вы хотите сделать то же самое с вашей веб-типографикой, то тогда вам необходим FitText.
FitText будет действительно полезным, если вы создаете респонсив веб-сайт. Например, если вам нужен респонсивный текстовый логотип, то вы можете использовать FitText для создания такого рода логотипа, который будет масштабироваться под любой экран.
Пример кода
FitText чрезвычайно прост в реализации:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>В style.css, убедитесь, что у вашего заголовка задана ширина:
#responsive_headline {
display: block;
width: 100%
}Просто используйте указанный CSS элемент, чтобы выполнить fitText:
<h1 id= "responsive_headline">Заголовок</h1>
Скачать здесь.
ArcText
ArcText является jQuery плагином, который позволяет закрутить слова по криволинейной траектории. Он использует Lettering.js для автоматического расчета вращения для каждой буквы в слове, и гарантирует, что повернутые буквы будут распределены равномерно вокруг воображаемой криволинейной траектории. Фактическое вращение осуществляется с помощью трансформаций CSS3, и рассчитывается на основании радиуса, а также ширины текста.
Пример кода
Для получения изогнутого текста:
$example1.arctext({radius: 300})Модификация направления:
$example2.arctext({radius: 400, dir: -1})Как удалить вращения, чтобы буквы оставались выложенными над аркой:
$example3.arctext({radius: 500, rotate: false})
Скачать здесь.
SlabText
SlabText похож на FitText, за исключением, того что он работает на нескольких строках. SlabText позволяет вам сделать жирные (bold), привлекающие внимание респонсивные заголовки. SlabText позволяет создавать многострочные заголовки, которые подгоняются под размер любого браузера, разделив заголовки в строки, затем изменяя размер каждой строки для того, чтобы заполнить пространство по горизонтали окна.
Вы можете позволить SlabText автоматически создавать отдельные строки, или вы даже можете указать слова, которые вы хотите, чтобы оставались вместе на линии, с расчетной и заданной функцией словосочетаний.
Пример кода
Для работы плагина требуется следующие правила CSS:
.slabtexted .slabtext
{
display:-moz-inline-box;
display:inline-block;
white-space:nowrap;
}
.slabtextinactive .slabtext
{
display:inline;
white-space:normal;
font-size:1em !important;
letter-spacing:inherit !important;
word-spacing:inherit !important;
*letter-spacing:0 !important;
*word-spacing:0 !important;
}
.slabtextdone .slabtext
{
display:block;
}Добавьте slabtexed класс к body элементу, и используйте slabtextdone для заголовков, которые вы хотите изменить, это будет динамически изменять размер заголовка по умолчанию, с автоматической вставкой span class= “slabtext”.
Вы также можете задать слова для каждой строки вручную с помощью span class= “slabtext” обертки вокруг каждой строки.
<body class ="slabtexted"> <h1 class= "slabtextdone">The Rows Here Will Be Dynamically Resized Upon Browser Resize</h1> <h1 class= "slabtextdone"> <span class= "slabtext">The Rows Here</span> <span class= "slabtext">Are Resized</span> <span class= "slabtext">Based On The</span> <span class= "slabtext">Span SlabText Markup</span> </span> </h1> </body>
Скачать здесь.
Когда дело доходит до типографии, не забывайте, что форма должна следовать за функцией. В то время как эти плагины могут дать вам расширенные возможности, вашей конечной целью должен быть оптимально красивый и функциональный сайт. Помните, только потому, что у вас есть возможность достичь определенного эффекта – это не обязательно означает, что вы должны использовать его всегда и везде!
Высоких конверсий!
