11 jQuery плагинов, которые помогут вам улучшить типографику сайта

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

Ниже приведен список самых лучших плагинов JQuery, обслуживающих широкий спектр целей, связанных с веб-типографикой. Т.е. вы сможете настраивать все, начиная от @font-face и заканчивая более удобным юзабилити и функциональности шрифтов сайта.

1. Lettering.js


Пример

jQuery плагин Lettering.js, специально заточен для работы с типографикой сайта, он позволяет дизайнерам создавать динамичную и привлекательную типографику, которую не сделать или трудно сделать обычными средствами. Цель Lettering.js состоит в том, чтобы дать вам полный контроль над веб-страницой, вплоть до управления каждой буквой.

2. jMetronome


Пример

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

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

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

3. FitText

FitText поможет вам в верстке, особенно, если вы верстаете сразу под все устройства (responsive web design). Плагин автоматически масштабирует ваш текстовый элемент в зависимости от размера окна браузера. Зачем это нужно?

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

4. FontEffect


Пример

FontEffect — jQuery плагин, который позволяет дизайнерам применять различные визуальные эффекты к любому текствому элементу. Это означает, что FontEffect применяет данные эффекты без использования изображений. Да такие эффекты можно построить и с помощью CSS3, но если вы предпочитаете JS, то FontEffect будет полезен.

5. jQuery Approach


Пример

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

6. jqIsoText


Пример

Плагин jQuery jqIsoText — очень простой плагин, который делает всего одну вещь: накладывает на текст псевдо-изометрический эффект. Что это такое? Это такой эффект, в котором символы представляют собой основу для отображения графики волны или волн. Зачем это нужно? Чтобы привлечь внимание пользователя.

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

7. Airport

Плагин jQuery Airport — это плагин текстовой анимации. Он имитирует старые мерцающие информационные щиты, которые стоят в аэропортах, вокзалах, автобусных станциях и т.д.

8. jQuery Glow


Пример

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

9. jQuery sIFR Plugin

Плагин jQuery sIFR — плагин реализующий технологию sIFR.

sIFR использует старый метод рендеринга текста. Помните, что он основан на Flash. Хотя в сети набирает популярность технология @font-face, но и у нее есть свои ограничения, поэтому ее заменой может быть и sIFR. (Хотя и у sIFR есть свои ограничения (; )

10. jQuery Text Resizer Plugin


Пример

Плагин jQuery Text Resizer дает возможность управлять размером шрифтов на вашей странице. По умолчанию, плагин добавляет три пользовательские команды на страницу (увеличение размера шрифта, уменьшение и сброс на нормальный размер).

Хотя большинство браузеров позволяют управлять размером текста, но некоторые пользователи могут не знать об этом. Поэтому и был создан этот плагин.

Кроме того Text Resizer работает в тандеме с плагином Cookie, что позволяет запоминать пользовательские настройки для страницы (если у пользователя включены cookies).

11. BigText


Пример

Плагин jQuery BigText автоматически подстраивает размер шрифта текста под размеры его родителя. Что очень хорошо для выравнивания текста по ширине.


Оставить комментарий