window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-22241525-4'); 10 نکته ی مفید برای بهبود تایپوگرافی وبسایتتان

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

اگر بخواهیم توضیح مختصری در مورد تایپوگرافی بدهیم به این صورت می شود : تایپوگرافی در طراحی وب به زبان ساده کار با حروف و کلمه ها است بطوری که ماهیت و معنی های خود را از دست ندهند و خوانا بمانند که معمولا مدیران سایت ها از تایپوگرافی غافل می شوند و باعث می شوند هم به طراحی سایت و هم خوانا بودن سایت صدمه بزنند.در زیر ۱۰ نکته ی مفید برای بهبود تایپوگرافی در سایت رو توضیح داده ایم.

Typography

۱  – ارتفاع خط مناسب

باید همیشه مراقب باشید که خط ها و سایز فونت ها با هم تداخل پیدا نکنند ، برای این کار یک راه حل ساده استفاده می کنیم به این صورت که سایز فونت شما هر چقدر بود ۷px بهش اضافه می کنید و آن را Line-Height قرار می دهید.

بطور مثال:


body{
 font-size:14px;
 line-height:21px; /* 14px + 7px */
}

۲ – حاشیه ی عنوان ها را درست انتخاب کنید

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

برای اینکه وبسایتتان خوانا و حرفه ای باشد شما نباید بیشتر از ۳ فونت در سایتتان استفاده کنید.هر چقدر تعداد فونت های کمتر باشد سایت شما خواناتر می شود برای کاربر.بطور مثال می توانید از یک فونت برای heading ها و یک فونت برای متن محتوا و یک فونت برای لوگو استفاده کنید.
۴ – از فونت های تک فاصله ای برای قطعه کد ها استفاده کنید

فونت تک فاصله ای چیست ؟ به فونتی گفته می شود که فضای افقی اشغال شده ی لغات و کاراکتر های آن یکی باشد.بهترین فونت برای استفاده در قطعه کد ها در حال حاضر Courier هست ولی شما می توانید از اینجا فونت های دیگری را نیز مشاهده کنید.
۵ – به کنتراست اهمیت دهید

حتا اگر سایت شما تایپوگرافی بسیار خوبی هم داشته باشد باز باید به کنتراست اهمیت دهید. بطور مثال اگر رنگ پشت زمینه ی ویساتتان خاکستری (#۹۹۹۹۹۹) می باشد پس از رنگ خاکستری تیره (#۳۳۳۳۳۳) برای متن استفاده نکنید زیرا قابلیت خواندن آن خیلی سخت می شود مخصوصا برای آن هایی که مسن هستند و یا مشکل بیناییدارند.پس از رنگ روشن برای پس زمینه و رنگ تیره برای متن استفاده کنید.

نمونه ی یک وب سایت با رعایت تایپوگرافی و خلاقانه

۶ – Underline را برای لینک فقط استفاده کنید

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

بهتره برای صفحات خاص استایل های خاص درست کنید مثلا برای صفحه ی ۴۰۴ یا صفحه های مشابه استایل های بخصوص درست کنید.
۸ – برای عناوین و متن هایتان مقدمه چینی بزارید

برای اینکه به خوانا بودن وبسایتتان کمک کنید می توانید مقدمه ای از مطلب خود را بیان کنید که کاربر راحت تر بتواند به مطلب مورد نظر خود در سایتتان برسد.
۹ – از فضای خالی نترسید

فضای خالی فضای غیر قابل استفاده نیست بلکه می تواند به خوانا بودن و مرتب و ساده بودن سایت شما کمک کند خیلی ها سایت Apple.Com را به همین دلیل دوست دارند.
۱۰ – از علائم درست استفاده کنید

از علائم نگارشی بدرستی استفاده کنید مثلا برای زیبایی وب سایتتان برای نقل قول کردن می توانید از “Hello„ (یا همون نقل قول در وردپرس) بجای “Hello” استفاده کنید.

منبع

بابک حبیبی @http://twitter.com/babakhabibi

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

View Comments

Comments are closed.

Share
Published by
بابک حبیبی @http://twitter.com/babakhabibi
Tags: Font Typography Webdesign تایپوگرافی طراحی سایت طراحی وب فونت

Recent Posts

  • اخبار سایت

شروعی دوباره برای زوپیرنت

با سلام. با عرض پوزش فراوان بدلیل غیبت طولانی ما که دلیل‌های ریز و درشتی داشت. خیلی خلاصه و سریع…

5 سال ago
  • اندروید

چگونه حافظه ی داخلی اندرویدتان را آزاد کنید

اکثر موبایل هایی که سیستم عامل اندروید بر رویشان نصب هست دارای حافظه داخلی محدودی هستند و بعد از مدتی…

6 سال ago
  • توییتر
  • فایرفاکس
  • فیس بوک

مدیریت تمام اکانت های شبکه های اجتماعیتان در یک برنامه

وقتی که فعالانه به زندگی مجازی بپردازید کم کم تعداد سایت های که عضو میشید زیاد خواهد شد مخصوصا سایت…

6 سال ago
  • PHP برنامه نویسی

آموزش PHP – حلقه ها – جلسه هفتم

در ادامه مبحث آموزش PHP امروز به آموزش حلقه ها می رسیم که با ذکر مثال دستوراتن While , for…

7 سال ago
  • بازی

چرا در هنگام بازی در ویندوز دچار مشکل می شوید؟

شاید برای شما پیش آمده باشد که بالاترین کارت گرافیک و قطعات سخت افزاری خوب دیگه ای را داشته باشید…

7 سال ago
  • ویکی پدیا

پربازدیدترین صفحات فارسی در ویکی پدیا ۲۰۱۲

با تمام شدن سال میلاد 2012 آماری از پر بازدید ترین صفحات ویکی پدیا در زبان ها مختلف ارائه شده…

7 سال ago