چگونه تایپ خود را در وب جذاب تر کنید

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

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

احتمال زیادی وجود دارد که اکثر طراحان و طرح هایی که شما تحسین می کنید نمونه های خوبی از تایپوگرافی را به نمایش بگذارند.

چند قدمی را که در بهینه‌سازی نوع مجموعه انجام می‌دهم به شما نشان می‌دهم تا جذاب‌تر از سناریوهای پیش‌فرض تگ‌های 24 پیکسلی H1 به همراه 13 پیکسل تنظیم‌شده در Times New Roman باشد.

عنوان

 

به تنظیمات پیش فرض بسنده نکنید، همه این کار را انجام می دهند.

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

 

فونتی را انتخاب کنید که وزن بصری بیشتری با عنوان شما داشته باشد

اگرچه انتخاب فونت دقیقاً “تایپوگرافی” نیست، اما در واقع یک جزء اساسی برای کمک به نوع صفحه از سایر عناصر است. با شروع @font-face، تعداد زیادی از انتخاب ها در دسترس طراحان در هر نقطه است.

در اینجا من از فونت Extra Condensed Style Gothic استفاده کرده ام که به راحتی می توان آن را در یک سایت فونت رایگان مانند FontSquirrel.com پیدا کرد. اگر توقف کنیم و در مورد آن فکر کنیم، نام “Condensed” باید معنایی داشته باشد، زیرا در واقع متراکم تر از اعضای خانواده سبک کتاب معمولی است، که دقیقاً همان چیزی است که ما از یک عنوان می خواهیم: چیزی که کاربر را به داخل می کشاند. و واقعاً خود را از کپی بدنه جدا می کند. مطمئناً بهتر از نسخه اصلی توجه شما را جلب می کند، اما چند کار وجود دارد که می توانیم برای بهبود بیشتر متن انجام دهیم.

 

با دو خط CSS آن را جذاب تر کنید

تغییر فوری در حروف است. همه آنها در حال حاضر با حروف بزرگ نوشته شده اند، اما اکنون بین هر یک از حروف، هسته منفی دارند (تکنیکی که از طراحی روزنامه منتقل شده است).

هر دوی این ویژگی ها را می توان به راحتی از طریق CSS، {text-transform:uppercase; و فاصله حروف:-Xpx;}. با ایجاد تغییرات کدنویسی در این دو خط، منجر به بهبود عمده در وزن بصری، به ویژه نسبت به نسخه اصلی می شود.

 

آخرین ترفندهای کوچک را انجام دهید

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

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

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

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

 

بهترین نکات شما برای تایپوگرافی وب چیست؟ در نظرات به ما اطلاع دهید!