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

آرایش ساده ترین حروف نیز نوعی تایپوگرافی است. امروزه، حروفچینی عنصری است که ما هر روز و در همه جا می‌بینیم. (چاپ، کتاب ها، روزنامه ها و نامه ها، تلویزیون و وب سایتها) حتی مهمترین وب سایت ها نیز اهمیت تایپوگرافی را دریافته‌اند و برای بهبود آن تا آنجا که ممکن است با منابع موجود تلاش می‌کنند.

تایپوگرافی در وب

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

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

سلسله مراتب

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

مسائل مربوط به فاصله گذاری

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

leading size ابزاری است که به شما اجازه می دهد تا فاصله بین خطوط رو کم و زیاد کنید .در این لینک می توانید ببینید که چگونه با کم و زیاد کردن این فاصله می توان خوانایی متون را بالاتر برد. Kerning فرایند تنظیم فاصله بین کاراکترها در یک فونت با هدف دستیابی به یک نگاه بصری لذت بخش تر است. با استفاده از ابزار Tracking نیز، تقریبا همان اثر را به دست می آید، تنها تفاوت بین Tracking و Kerning فضای تولید شده است. در حالی که Tracking مقداری مساوی فضای بین هر یک از کاراکترها تولید میکند،kerning فضای را بر اساس جفت کاراکتر تنظیم میکند.

رنگ ها و پالت رنگ

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

شما همچنین می توانید با آزمایش اندازه بزرگتر تایپوگرافی (که به عنوان تایپوگرافی ماکرو نامیده می شود) به نتایج بهتر دست یابید، ماکرو تایپوگرافی استفاده از متن بزرگتر است. به همین دلیل مهم است که برای حفظ آن از عناوین کوتاه و صحیح استفاده کنید.

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

Purple Bunny

Matt Hall

VS

جفت شدن فونت

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

کنتراست از اندازه / وزن

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

فونت جایگزین مواد و روش ها

گذشته ها گذشته ! ، زمانی که طراحان تنها مجبور به استفاده از فونت های موجود بر روی کامپیوتر و یا حتی متون تصویری بودند. شما میتوانید از ابزاری مانند HTML5 یا فلش استفاده کنید که امکانات بیشتری را به شما میدهد.

استفاده از @font-face

این روش که با استفاده زا یک خصیصه در css انجام می شود راحت ترین راه برای الحاق فونت های دلخواه به صفحه است . در این صورت فونت توسط مرورگر در صفحه بارگذاری خواهد شد و حتی اگر روی رایانه کاربر موجود نباشد ، فونت به شکلی صحیح نمایش داده می شود. نمونه ای از روش استفاده آن در ایـــن لینک موجود است

بیفون (Bifon)

بیفون ابزاری است برای نمایش متون فارسی به همراه انگلیسی با فونتی غیر از فونت های استاندارد در صفحات HTML . این ابزار مکملی است بر روی Cufon و بدون هیچ وابستگی به پلاگین امکان نمایش هر فونتی را در تمامی مرورگر ها فراهم می کند .

بیفون شامل دو بخش می شود:

۱ – Bifon Font Generator
این نرم افزار با دریافت یک فونت برای متون فارسی و یک فونت برای متون انگلیسی فایل خروجی ای به صورت javascript که همان فونت مورد استفاده در Bifon است را تولید می کند.
برای استفاده از این نرم افزار نیاز به داشتن آخرین نسخه Adobe Air است می توانید آن را از طریق www.Flashplayer.ir دریافت کنید .

۲ – Bifon Text Converter
این بخش شامل یک ابزار به صورت javascript است که وظیفه تبدیل متن را قبل از نمایش توسط Cufon داراست.

فونت گوگل

اگرچه گوگل بخش فونت خود را در سال ۲۰۱۰ منتشر کرد، اما در حال حاضر حدود ۵۰۰ خانواده فونت را داراست. گوگل فونت در واقع API است که به طور گسترده استفاده می شود.

Typekit

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

Font Squirrel

بهترین چیزی که در مورد FontSquirrel میتوان گفت، این است که تعداد زیادی از فونت ها را به طور گسترده ای و کاملا رایگان در دسترس قرار داده است.

امیدواریم مطلب برایتان مفید بوده باشد.

منبع