انتخاب واحد و اندازه‌ی فونت برای طراحی صفحات وب

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

واحد pixel یا px ساده‌ترین و مناسب‌ترین واحد برای تعیین اندازه‌ی فونت در صفحات وب است. این گزینه هنگامی کاربرد دارد که بخواهید متن‌های با اندازه‌ی ثابت در مقایسه با تصاویر داشته باشید.
برای مثال اگر اندازه‌ی فونت یک عنصر html را “12px” مشخص کنید، نوشته‌ی شما در تمامی مرورگرها به همین اندازه نمایش داده می‌شود

واحد em واحدی نسبی است. بر اساس فونت پیش‌فرض در عنصر فعلی، واحد em معنی متفاوتی دارد. هر em با اندازه‌ی فونت فعلی برابری می‌کند. مثلا اگر اندازه‌ی فونت عنصری “12pt” باشد، “1em” برابر “12pt” و “2em” برابر با “24pt” خواهد بود.

واحد پرکاربرد بعدی point یا pt نام دارد. این واحد نیز واحدی نسبی است. شیوه‌ی محاسبه‌ی اندازه‌ی واقعی و پیکسلی وابسته به وضوح صفحه‌ی نمایش یا چاپگر مشخص می‌شود. بر طبق قرارداد، هر ۷۲ پوینت معادل یک اینچ تعیین شده است.
وضوح پیش‌فرض در سیستم‌عامل مکینتاش ۷۲ نقطه در اینچ است. در نتیجه تعیین اندازه‌ی فونت با پیکسل یا پوینت در آن یکسان است. ولی در ویندوز مقدار ۹۶ نقطه در اینچ عدد پیش‌فرض است و معنی آن این است که هر ۹۶ پیکسل با یک اینچ برابری خواهد کرد.
بنابراین اگر اندازه‌ی عنصری را “72pt” مشخص کنید، در مکینتاش با اندازه‌ی ۷۲ پیکسل و در ویندوز با اندازه‌ی ۹۶ پیکسل دیده خواهد شد.

برای ساده‌تر شدن محاسبات کافی است اندازه‌ی پوینت را به عدد ۷۲ تقسیم و نتیجه را در وضوح نمایش یا چاپ ضرب کنید.
مثلا محاسبه‌ی ۱۲ پوینت در ویندوز: ۱۲ را تقسیم بر ۷۲ و سپس در ۹۶ ضرب می‌کنیم که نتیجه عدد ۱۶ پیکسل خواهد بود.

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

این نوشته در CSS, برنامه‌نویسی ارسال شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

۵ دیدگاه برای انتخاب واحد و اندازه‌ی فونت برای طراحی صفحات وب

  1. علی می‌گوید:

    خیلی ممنون!خیلی بدردم خورد!

  2. sahar می‌گوید:

    ممنون از آموزشتون
    چرا در طراحی های جدید واحد em طرفدار بیشتری دارد؟
    لطفا در مورد این واحد و تبدیلهاش بیشتر بگید.

    • امیرمسعود ایرانی می‌گوید:

      علت اینکه واحد em واحد خوبی برای طراحی وب به حساب میاد اینه که بر اساس اندازه‌ی فونت عنصر والد می‌شه اندازه‌ی عنصرهای داخلی رو عوض کرد
      البته لازمه که اندازه‌ی عنصر اصلی یعنی body با واحدی غیر از em مشخص بشه و اندازه‌ی تمام عنصرهای فرزند وابسته به اندازه‌ای که برای body مشخص شده تغییر کنه
      این کار باعث می‌شه اگر بخواهیم اندازه‌ی فونت صفحه رو مثلا برای چاپ مقداری درشت‌تر یا ریزتر کنیم، فقط اندازه‌ی فونت عنصر body رو عوض کنیم و بقیه‌ی اندازه‌ها به صورت متناسب بزرگ و کوچک خواهند شد

  3. سعاده می‌گوید:

    سلامو ببخشید میخواستم بدونم هر ۱۲pt در فتوشاپ، معادل چه فونتی در آفیس است؟

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      pt یک واحد متغیر است. بسته به اینکه وضوح فایل psd شما چه مقدار باشد، نتیجه متغیر است
      برای بهتر متوجه شدن موضوع، مقاله را با دقت مطالعه بفرمایید

پاسخ دادن به sahar لغو پاسخ

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

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>