۱۰ فریم‌وورک و کتابخانه تایپوگرافی وب معروف

دوره‌ای بود که تایپوگرافی به سادگی عبارت بود از گرد هم آوردن فونت‌های جدید. حال طراحی وب مدرن تا جایی تکامل یافته است که ما از متن انتظار داریم کار بیشتری را انجام دهد. ما می‌خواهیم متن در قبال صفحه یک کاربر پاسخگو باشد، به طور خودکار در فضاهای تعیین شده جای گیرد و مقداری عملکرد پیشرفته را فراهم کند.

با کمک چند فریم‌وورک و کتابخانه برجسته، شما می‌توانید به تعدادی افکت تایپوگرافی جذاب دسترسی داشته باشید. در اینجا برخی از موارد مورد علاقه ما را مشاهده می‌نمایید.

Baffle.js

Baffle.js یک افکت تاریک شدن و پدیدار شدن جالب را به متن مطلوب شما اضافه می‌کند. در نگاه اول، این افکت به هم ریخته به نظر می‌رسد. سپس یک توالی پویانمایی شده، رشته متن مورد نظر را پدیدار می‌کند. چندین استفاده تزئینی می‌توان از آن برد، اما این افکت به نظر یک پایه عالی برای بازی‌ها می‌آید.

Fitty

یکی از گرایش‌هایی که ما در تایپوگرافی به کار می‌گیریم، این است که متون را قادر سازیم تا به طور خودکار در محفظه والد خود جای بگیرند. Fitty یک اسکریپت کوچک است که این عملکرد را به وبسایت شما اضافه می‌کند. این اسکریپت از فونت‌های وب و متون چند خطی پشتیبانی می‌کند. Fitty همچنین همینطور که دید کاربر تغییر می‌کند هم به طور خودکار تنظیم خواهد شد.

Textillate.js

Texillate.js دو کتابخانه متون پویانمایی شده (animate.css و lettering.js) را ترکیب می‌کند تا یک مجموعه بسیار قوی از افکت‌های متن را تشکیل دهد. عملا هر نوع انیمیشنی که شما به دنبال آن باشید، در یک پلاگین jQuery با قابلیت استفاده آسان، در دسترس است.

React Text Gradient

با استفاده از React Text Gradient، تصاویر افت حرارتی زیبایی را به وبسایت خود اضافه کنید. این کامپوننت React بررسی می‌کند تا ببیند که آیا background-clip در دسترس است یا نه. اگر بله، یک تصویر افت حرارتی با استفاده از CSS به آن اعمال می‌شود. در غیر این صورت یک تصویر افت حرارتی SVG به عنوان یک پشتیبانی مورد استفاده قرار می‌گیرد.

jQuery.auto-text-rotating

نام jQuery.auto-text-rotating خیلی راحت در زبان نمی‌چرخد، اما این پلاگین jQuery بسیار جالب است. شما می‌توانید متن موجود در یک رشته را با استفاده از افکت‌های انیمیشن چندگانه که در دسترس هستند، ‌تغییر دهید. شما همچنین قادر خواهید بود تا در صورت تمایل، چندین کلمه را در یک خط مشابه تغییر دهید.

ShareSelectedText.js

استفاده از ShareSelectedText.js، یک پنجره به اشتراک گذاری متن به مانند وبسایت Medium را به هر وبسایتی اضافه می‌کند. تنها کاری که کاربر باید انجام دهد، این است که مقداری متن را انتخاب کند،‌ و سپس یک منوی آیکون ظاهر می‌شود و شما را قادر می‌سازد تا آن را بر روی هر کدام از خدمات پشتیبانی شده (Facebook، Twitter، Reddit، LinkedIn، Tumblr و...) که دوست دارید، به اشتراک بگذارید. این ابزار برای این که کاربران را قادر سازید تا بخش‌هایی از محتویات شما که برای آن‌ها مهم‌تر هستند را به اشتراک بگذارند، بسیار کاربردی است.

React Reveal Text

React Reveal Text یک کتابخانه کوچک است که متن را با انیمیشن ظاهر می‌سازد. این کتابخانه از transitionهای CSS استفاده می‌کند،‌ که یعنی پیکربندی آن در واقع ساده است. React Reveal Text می‌تواند به مانند هر عنصر دیگری بر روی وبسایت شما استایل‌بندی شود. این می‌تواند یک افکت بسیار کاربردی برای بارگذاری ورودی صفحه باشد.

Lettering.js

Lettering.js یک پلاگین jQuery است که شما را قادر می‌سازد تا کنترلی به ازای هر حرف بر روی رشته داشته باشید. این پلاگین بسیار ساده است. اسکریپت مربوطه را فراخوانی کرده، و یک کلاس یا آی‌دی CSS که متناظر متن مورد نظر شما است را تعریف کنید. هر حرف داخل آن کلاس تعریف شده، تبدیل به یک عنصر span در HTML با کلاس مختص خود می‌شود. از CSS برای استایل‌بندی هر حرف تا حداکثر استفاده کنید.

Text-balancer

Text-balancer توسط New York Time توسعه داده شده بود و هدف این اسکریپت ساده، این است که پنجره‌های تایپوگرافی را از محتویات شما حذف کند. شما می‌توانید این اسکریپت را فقط بر روی برخی انتخاب کننده‌های CSS خاص، یا به طور عمومی‌تر و با استفاده از کلاس .balance-text اجرا کنید.

Typed.js

Typed.js رشته‌های متن را ساخته و آن‌ها را در مرورگر تایپ می‌کند، حذف می‌کند و به رشته بعدی منتقل می‌کند. استفاده از آن بسیار ساده است و راه خوبی برای گفتن یک داستان می‌باشد. شما می‌توانید هر تعداد رشته متنی که می‌خواهید را به همراه سرعتی که تایپ می‌شوند، و برخی گزینه‌های کاربردی دیگر (در داخل خود اسکریپت یا با استفاده از انتخاب کننده‌های CSS) راه‌اندازی کنید

با قدرت اسکریپت‌هایی به مانند موارد بالا، تایپوگرافی وب قادر است تا به فراتر از معمول برود. حال ما می‌توانیم یک کنترل کامل بر روی ظاهر متون و توابع داشته باشیم. عملکرد آن توسط ابزاری که توسعه دهندگان را قادر می‌سازند تا یک تجربه کاربری بهتر و دوستانه‌تر را بسازند، تسریع یافته است.

برای پروژه بعدی خود، کمی فکر کرده، تا تصور کنید که چگونه می‌توانید تایپوگرافی را بهتر پیاده‌سازی کرده،‌ و آن را بهبود بخشید. سپس، از یکی از این ابزار شگفت‌انگیز استفاده کنید تا آن را ممکن سازید.

منبع