آموزش طراحی وب

استفاده استاندارد از فونت ها

در این جلسه در مورد استفاده استاندارد از فونت ها ، فونت ها در وب ، استفاده صحیح از فونت ها ، اندازه های صحیح فونت ها و … صحبت خواهیم کرد .

GRAPHIC

سلام به همه شما همراهان همیشگی و دوست داران گرافیک وب ،

اول باید بگم که عذر خواهی میکنم بابت تاخیری که در نوشن این جلسه داشتم . بالاخره به عید نوروز نزدیک هستیم و مشکلات خاص خودش 🙂

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

خب ، بریم سراغ استفاده استاندارد از فونت ها 🙂

 

 فونت ها در وب

در چند سال پیش ما راهی برای استفاده از فونت های متفاوت در وب نداشتیم و یا مجبور بودیم از فونت های ساده ای مثل : Arial , Tahoma و … استفاده کنیم و یا مجبور بودیم از فونت های خاص در گرافیکمون استفاده کنیم ولی در زمان پیاده سازی اونو به صورت تصویر و به صورت Slice شده در کدنویسی استفاده کنیم . ولی خب الان با اتفاقی که در CSS2 و CSS3 رخ داده که من دوست دارم اسمشو تکنولوژی بزارم ، ما به واسطه @font-face ها میتونیم هر فونتی رو با هر شکلی در هر صفحه وبی استفاده کنیم . اگر دقت داشته باشید ما در وب سایت مدرسه مجازی ایرانیان هم از همین تکنولوژی استفاده کردیم و شما فونت Koodak رو به خوبی میبینید .

بهتر بدونین که ویژگی عالی استفاده از @font-face ها اینه که ما دیگه به این مسئله کاری نداریم که در سیستم مخاطبی که سایت رو میبینه ، فونت مورد نظر ما وجود داره یا نه ! چون که ما فایل فونت رو روی سرور وب سایت خودمون بارگزاری میکنیم و موقع لود شدن سایت توسط مخاطب ، اون فونت از سرور ما لود شده و فونت به شکل صحیح خودش به مخاطب نمایش داده میشه .

در جدول زیر میتونین پشتیبانی مرورگر های مختلف رو از @font-face ها مشاهده کنین :

Untitled-1

 

فونت های استاندارد فارسی

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

 

اندازه صحیح فونت ها

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

  • همیشه خوانا بودن نوشته ها رو به زیبایی فونت نوشته ها ارجح بدونید و از اندازه ای استفاده کنین که مشخص و واضح باشه .
  • سعی کنید برای فونت نوشته ها و متون طولانی از Tahoma و برای عنوان ها از فونت های مختلف به صورت @font-face استفاده کنین .
  • فاصله بین خطوط در نوشته ها رو اندازه ای قرار بدید که نوشته ها به راحتی قابل خواندن باشن و مخاطب خطوط رو با هم اشتباه نکنه .
  • اگر از @font-face ها استفاده میکنین دقت داشته باشین که از اندازه ۱۳ تا ۱۸ رو نباید استفاده کنین چون زمانی که طرح به کد تبدیل میشه و اندازه این فونت ها در این بازه قرار میگیره ، لبه فونت ها به صورت شکسته و مشکل دار نمایش داده میشه . پس بهتره از اندازه هایی تو این بازه خودداری کنین .

 

 واحد اندازه گیری صحیح

برای استفاده از فونت ها در گرافیک حتما از واحد اندازه گیری px یا همان پیکسل استفاده کنید . زیرا استفاده از واحد هایی مثل pt در کدنویسی مجاز و صحیح نیست و عموما از px یا em و یا % استفاده میشه . پس شما هم برای اینکه بتونید بیشتر شباهت طرح گرافیکی رو با کدنویسی نهایی مشخص کنین باید از ابعاد و واحد هایی استفاده کنید که در کدنویسی هم به همون شکل ظاهر میشن .

font

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

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

باز هم با ما همراه باشین 😉

تهیه شده در مدرسه مجازی ایرانیان

 

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۱

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین