تایپوگرافی بخشی جدایی ناپذیردر طراحی وب سایت است. تایپوگرافی و قلم هایی که استفاده می کنید در جنبه های مختلف طراحی وب سایت نقش بزرگی دارند. بر عواملی مانند خوانایی ، تجربه کاربری و حتی در طول درک یک مقاله یا صفحه تأثیر می گذارد.
بسیار مهم است که طراحان وب با استفاده از تایپوگرافی به درستی می توانند هدف وب سایت و محتوای آن را منتقل کنند و از زوایای مختلف باعث سود رسانی به وب سایت ما شود.
تقریباً در هر قسمت از طراحی وب ، ابزارهای مختلفی نیز هستند که به شما کمک می کنند تا سایت شما را زیباتر کند.
در این مقاله ، ما به دنبال کتابخانه ها / پلاگین های JS برای تایپوگرافی در ایجاد صفحات وب هستیم.
1- FlowType.js
پلاگین FlowType به شما کمک می کند تا اندازه قلم را به طور خودکار بر اساس عرض یک صفحه تغییر اندازه دهید. برای اینکه متون وب سایت قابل خوانایی بیشتر باشد ، باید تقریباً 45 تا 75 حرف در هر خط وجود داشته باشد. اما برای اکثر صفحاتی که با CSS طراحی شده است دستیابی به این مسئله دشوار است.
Flowtype پلاگین اندازه قلم شما را تنظیم می کند تا اطمینان حاصل کند که تعداد کاراکترهای مناسب در هر خط بدون توجه به نوع صفحه یا مرورگری که خواننده استفاده می کند ، وجود دارد.
2- Typed.js
پلاگین Typed.js که هم به صورت جاوا اسکریپت و هم جی کوئری قابل استفاده است جملات را در مرورگر تایپ می کند ، حذف می کند و به رشته بعدی می رود. استفاده از این ابزار بسیار آسان است و می توانید تعداد نامحدودی رشته ایجاد کنید. این کتابخانه برای ایجاد یک متن با شماری کاراکتر بسیار ساده و زیبا است
3- FitText
یک پلاگین jQuery است که برای عناوینی کاربرد دارد که می خواهید در تمام زرولوشن ها عناوین بولد و با اندازه بزرگ نمایش داده شود . این افزونه ، آن را به طور خودکار مقیاس بندی می کند تا عرض عنصر اصلی را پر کند. این افزونه تضمین می کند بدون توجه به نوع مرورگری که استفاده می کنید ، طرح صفحه شکسته نمی شود.
4- Lettering.js
این افزونه کنترل کامل را به شما ارائه می دهد. پلاگین lettering.js ابزاری است ساده اما کاربردی و موثر در زمینه تایپوگرافی وب. کاری که این پلاگین انجام می دهد بطور کلی بدین صورت است که هر کاراکتر از یک رشته را جدا می کند و روی هر کدام از آنها می توان بطور مجزا افکت های موردنظر را اعمال کنیم و برای هریک استایل های مشخصی تعریف کنیم.
پلاگین ساده برای ایجاد انیمیشن های متنی CSS3 است. این پلاگین کتابخانه های مختلفی را برای کمک به کاربرد انیمیشن های CSS3 در هر متن ترکیب می کند. برای استفاده از آن ، تنها کاری که باید انجام دهید افزودن textillate.js و وابستگی های آن به پروژه شما است. انیمیشن های زیبایی را به المان های متنی صفحات وب اعمال کند.
Arctext.js یک پلاگین jQuery است که به شما امکان می دهد متن را با استفاده از CSS3 و jQuery منحنی بصورت کمان (Arc) کنید. می توانید متن را تا شعاع 300 منحنی کنید ، جهت متن را تغییر دهید ، حروف غیر چرخشی ایجاد کنید و متن را تنظیم کنید. این افزونه چرخش مناسب هر حرف را محاسبه کرده و در نهایت استایل های css3 را روی آنها اعمال می کند
اسکریپتی است که به متن ها اجازه می دهد در یک ردیف (container) قرار بگیرند. به جای مقیاس بندی اندازه قلم برای متناسب کردن متن ، Font-To-Width یک نوع عرض یا عرض را انتخاب می کند و سپس امکان تنظیم حروف و کلمات را در صورت لزوم فراهم می کند. توجه داشته باشید که این اسکریپت برای عناوین یا متن های کوتاه ساخته شده است.
برای متن چند خطی مناسب نمی شود. همچنین در مرورگرهایی که از فاصله زیر پیکسل مانند Chrome پشتیبانی می کنند ، بهترین عملکرد را دارد.
8- SlabText
Slab Text یک پلاگین jQuery است که به شما کمک می کند تیترهای بزرگ و پررنگ ایجاد کنید. همچنین می توانید عرض ویوپورت خود را تغییر اندازه دهید تا بدون در نظر گرفتن سایز بندی ، ترکیب کلمات موجود در عنوان در همان خط باقی بمانند.
