ابزار و منابع برای تایپوگرافی وب

بسیاری از شرکت ها سعی می کنند یک تجربه عالی برای مشتریان ایجاد کنند. اما تعداد اندکی تمایل دارند تا تغییرات لازم برای تحقق این وعده را انجام دهند. در حقیقت اکثر آنها حتی نمیدانند که تجربه آنها چگونه بد است. به همین دلیل ما یک کتاب جدید به نام “تجربه انقلاب”، یک طرح عملی نبرد برای قرار دادن کاربر در قلب شرکت شما ساخته ایم.

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

با این حال، انتشار در وب به سرعت در حال وقوع است و جزئیات جزئی اغلب نادیده گرفته می شود، که دلسوزانه است، زیرا آنها نه تنها به چشم خشنودند، بلکه باعث بهبود تجربه خواندن نیز می شوند.

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

 

ایجاد ریتم بصری

 

تنظیم شبکه خط پایه

تایپوگرافی طراحی سایت اغلب فاقد این حس طراحی است که تایپوگرافی در چاپ از آنجایی که یوهانس گوتنبرگ چاپگر را بیش از ۵۰۰ سال پیش اختراع کرده است، بهره ای نبرده است. برای بازگرداندن تایپوگرافی معنی دار، کیت Starter Kit Web Typography Gutenberg یک شبکه پایه را ایجاد می کند تا یک ریتم عمودی مناسب ایجاد کند که همه عناصر را به هم متصل می کند. این مجموعه براساس Sass است و دارای دو تم از پیش تعریف شده بر اساس فونت های گوگل Merriweather و Open Sans است، اما گزینه های سفارشی به شما اجازه می دهد تا بارکد های سفارشی را نیز بارگیری کنید.

 

محاسبه یک مقیاس مدولار

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

 

ماشین حساب مقیاس مدولار پایه مقیاس خود را (به عنوان مثال اندازه متن بدن خود) را با یک نسبت به تولید یک مقیاس از اعداد که نسبتا مرتبط است، را افزایش می دهد. (نمایش نسخه بزرگ)

 

یک چارچوب پس از ساختن

برای شروع کار تایپوگرافی خود را به درستی، همچنین ممکن است بخواهید به کیت Starter Kit نگاهی بیندازید. این سبک های پایه جامد، مدولار و انعطاف پذیر، نشانه گذاری مناسب را می دهد که می توانید به میل خود گسترش دهید. کتابخانه مربوط به انتخاب طراحی زیبایی شناخته نشده است، اما به شما بلوک های ساختمان را برای ایجاد چارچوب تایپوگرافی خود می دهد. فایل CSS در تنها ۱۰KB وزن، Sass در ۱۸KB وزن دارد و یک بسته Bower نیز موجود است.

 

مراقبت از جزئیات

 

کلاه های کوچک، لیگاتور ها و دیگر لوازم خانگی آسان ساخته شده است.

مراقبت از جزئیات چاپی خوب، اغلب با نزولی روبرو می شود: معمولا یک CSS پیچیده وجود ندارد. نوع Utility Type کنت اورمنددی این کار را پایان می دهد. ۱٫۷۵KB فایل CSS کوچک آن کلاس های ابزار CSS را برای ویژگی های پیشرفته تایپوگرافی مانند لیگاتورها، کلاهک های کوچک، انواع شمارا و دیگر ویژگی ها فراهم می کند، و آن را آسان برای اعمال به عناصر خود و <span> S به عنوان استفاده با جسور و کج. برای صرفه جویی در مقدار زیادی از کارهای تعمیر و نگهداری، آبشارهای نوع بازه قابل پیش بینی. این کروم، فایرفاکس و اینترنت اکسپلورر ۱۰+ را پشتیبانی می کند و در جای دیگر با شکوه به راحتی می افتد.

یک پیش پردازنده HTML برای خوانایی بهتر

نقطه گذاری معکوس واقعی، حاشیه نگاری نوری، نشانه گذاری و جایگزینی فضا، خطوط نرم – این جزئیات کوچک است که به طور قابل توجهی باعث بهبود تجربه خواندن می شود. اما، متأسفانه، ما اغلب به آنها توجه زیادی نمی کنیم، زیرا آنها سزاوار آن هستند. این همان جایی است که Preprocessor HTML Typeset.js وارد می شود. این مراقبت از همه این ظرافت های تایپوگرافی است، بنابراین در طول راه از دست نمی روند.

متن با Typeset.js فعال است. توجه کنید که جزئیات چگونه از نقطه گذاری معلق، تبدیل کوچک کوچک و جایگزینی فضای بهبود خوانایی نسبت به تصویر زیر است که Typeset.js را فعال نکرده است. (نمایش نسخه بزرگ)

همان متن بدون Typeset.js. این احساس تنگ تر و خواننده را با لنگرهای بصری کمتری برای هدایت آنها از طریق متن فراهم می کند. (نمایش نسخه بزرگ)

 

معامله با واژه های طولانی در CSS

ممکن است وبسایت های انگلیسی زبان بیش از حد مشکل نداشته باشند، اما برخی از زبان ها، آلمانی ها، به عنوان مثال، دارای کلمات بسیار، بسیار طولانی هستند. پس چگونه با آنها در طراحی وب پاسخگو بدون شکستن طرح بندی و ایجاد کلمات کلیدی مقابله کنیم؟ مایکل Scharnagl یک راه حل را پیدا کرده است: ترکیب overflow-wrap با بسته شدن کلمه و خط ها که در مرورگرهایی که از آن پشتیبانی می کنند را نشان می دهد و خطوط را در مرورگرهای دیگر شکست می دهد. خوب است بدانیم

 

ساختن پانویسها کاربر پسند تر

خواندن طولانی اغلب نیاز به پانوشت ها و سینت ها دارد. با این حال، راه حل مشترک برای ارائه آنها به وب، کاملا به جریان خواندن منحرف می شود: شما با کلیک بر روی تعداد کمی و پرش به پایین صفحه. کریس سویو راهی سادهتر برای غنی سازی متن با اطلاعات اضافی پیدا کرد. پلاگین جی کوئری Bigfoot.js پلاگین و محتوای محتوا را تشخیص می دهد، لینک را به یک دکمه ی محجوب تبدیل می کند و هنگامی که خواننده روی دکمه کلیک می کند، باز می شود.

 

راهنما و Cheatsheets

 

یک راهنمای تایپوگرافی کاربردی

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

تایپوگرافی Cheatsheet

نقل قول های هوشمند، نقل قول های خفیف، خطا، خطاهای – آیا شما به سختی می گوئید که از هم جدا شده اند؟ سپس Cheatsheet Typewolf Typography یکی برای نشانکهای شماست. این همه سوالات شما در مورد استفاده مناسب آنها را پاسخ می دهد و کلید های میانبر مک و ویندوز و اشیاء HTML و همچنین برخی از کاراکترهای مفید دیگر مانند ریاضیات و غیر انگلیسی را به یاد می آورد. دستی

انتخاب فونت راست

قبل از اینکه آن را بخرید، قبل از آن یک نوع خط را امتحان کنید

معمولا، تنها تصور شما از یک نوع از فونت قبل از خرید آن نمونه در وب سایت نوع ریخته گری است. از این قطعه کوچکی از متن پیش فرض، آنچه که در متن طراحی شما ظاهر خواهد شد، به تخیل زیادی نیاز دارد. بنابراین اگر پیش نمایش برای شما کافی نیست، Font Stand دارای یک مدل صدور مجوز است که ممکن است بیشتر به نفع شما باشد. این به شما این امکان را می دهد که هر فونت را به صورت رایگان در هر یک از برنامه های خود برای یک ساعت – مناسب برای برخی از نمونه اولیه سریع استفاده کنید. شما همچنین می توانید فونت را به صورت ماهیانه اجاره کنید و پس از ۱۲ ماه به طور خودکار به شما می شود. در حال حاضر ۶۳۵ خانواده از ۳۲ ریخته گری را انتخاب می کنند. یک نکته کوچک: این سرویس تنها برای کاربران مک در دسترس است.

ترکیب فونت الهام بخش

ترکیب دو فونت می تواند یک چالش باشد. چه چیزی کار می کند، چه چیزی نمی کند؟ Do-Hee پروژه ۱۰۰ روزه فونت کیم یک منبع عالی برای الهام تازه است. او یک ترکیب دیگر از دو فونت گوگل را هر روز برای ۱۰۰ روز طراحی و کد گذاری کرد. چشمگیر.

 

چقدر فونت گسترده است؟

Arial، Helvetica Neue، Verdana – این ها هنوز سه قلم بسیار مورد استفاده در وب هستند (حداقل اگر شما میلیون ها وب سایت را در نظر بگیرید). اگر می خواهید فونت گسترده ای را قبل از استفاده از آن در پروژه خود ببینید، خوب، Font Reach به شما می گوید. این سایت اسکن صفحات فونت از وب سایت های برتر را به محبوبیت رتبه بندی می کند. شما همچنین می توانید فونت خاصی را جستجو کنید تا ببینید کدام وب سایت از آن استفاده می کند. یک ابزار خوب بدون توجه به اینکه آیا می خواهید یک انتخاب منحصر به فرد داشته باشید یا قصد داشته باشید با روند فعلی بروید.

وب سایت بارگذاری فونت و عملکرد

بارگذاری فونت طراحی سایت از طریق بسیاری از تکرارهای گذشته گذشته است: از URI های داده ها تا استفاده از کلاس های محدوده. تکرار بعدی: FOFT انتقادی. این روش بر روی فلش فاکس متنی (FOFT) با استفاده از فرآیند بارگذاری دو مرحله ساخته می شود. به جای بارگذاری فونت کامل وب روم در مرحله اول، یک زیر مجموعه کوچک از آن را بارگذاری می کند (فقط برای مثال های حروف بزرگ و کوچک) و بنابراین مرحله اول به طور قابل توجهی کاهش می یابد. Zach Leatherman یک نوشتن جامع انجام داده است که این تکنیک را دقیق توصیف کرده و عملکرد آن را با سایر تکنیک های بارگذاری فونت مقایسه می کند.

0 دیدگاه برای “ابزار و منابع برای تایپوگرافی وب”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*