تنظیم قلم و فونت CSS Styling Font

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

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

در CSS، نام یک قلم مشخص مانند Arial یا Times New Roman با نام یک خانواده عمومی تفاوت دارد. خانواده عمومی، دسته ای کلی از قلم ها را توصیف می کند؛ برای نمونه، serif به قلم هایی با زوائد انتهایی اشاره دارد و sans-serif برای قلم های بدون این زوائد استفاده می شود. monospace نیز قلمی است که فضای افقی اختصاص یافته به نویسه های آن یکسان است.

زمانی که یک نام مشخص را انتخاب می کنید، ممکن است آن قلم روی دستگاه همه بازدیدکنندگان نصب نباشد. برای همین، بهتر است پس از نام قلم دلخواه، چند گزینه جایگزین و در پایان یک خانواده عمومی بنویسید. برای مثال، اگر Times New Roman در دسترس نباشد، مرورگر می تواند سراغ Times و سپس یک قلم از خانواده serif برود.

نمونه زیر ترتیب انتخاب قلم ها را نشان می دهد. نام قلم هایی که فاصله دارند داخل کوتیشن قرار گرفته اند:

p {
  font-family: "Times New Roman", Times, serif;
}

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

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

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

قلم های sans-serif در نمایشگرها رایج هستند و ظاهر ساده ای دارند. قلم های serif نیز می توانند برای محتوایی با حال وهوای رسمی یا سنتی مناسب باشند. خانواده monospace معمولا برای نمونه کد و داده هایی کاربرد دارد که هم تراز بودن نویسه ها مهم است.

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

ویژگی font-style حالت ظاهری متن را تعیین می کند. مقدار normal نوشته را به صورت معمولی نمایش می دهد، italic حالت ایتالیک را درخواست می کند و oblique متن را به شکل مورب نشان می دهد. پشتیبانی از ظاهر دقیق این حالت ها ممکن است به قلم انتخاب شده وابسته باشد.

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

.normal-text {
  font-style: normal;
}

.italic-text {
  font-style: italic;
}

.oblique-text {
  font-style: oblique;
}

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

ویژگی font-size اندازه متن را مشخص می کند. اندازه مناسب به نقش هر نوشته بستگی دارد: تیتر اصلی باید از متن بدنه برجسته تر باشد و توضیحات فرعی نباید با عنوان های مهم رقابت کنند.

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

h1 {
  font-size: 30px;
}

h2 {
  font-size: 20px;
}

p {
  font-size: 14px;
}

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

برای ساختار معنایی محتوا از تیترهای HTML استفاده کنید و اندازه ظاهری آن ها را جداگانه مدیریت کنید. تگ های <h1> - <h6> برای عنوان ها و تگ <p> برای پاراگراف ها کاربرد دارند. درباره ساختار این تگ ها می توانید در بخش آموزش HTML بیشتر بخوانید.

برای تعیین اندازه متن می توانید از واحدهایی مانند px و em استفاده کنید. پیکسل اندازه مشخصی در CSS بیان می کند، در حالی که em بر اساس اندازه قلم عنصر مرجع محاسبه می شود. در نتیجه، تغییر اندازه عنصر والد می تواند روی اندازه محاسبه شده عناصر فرزند هم اثر بگذارد.

در نمونه زیر، مقدار 2.5em با فرض اندازه مرجع 16 پیکسل، برابر با 40 پیکسل محاسبه می شود. این رابطه برای درک مقیاس نسبی مفید است، اما اگر اندازه والد تغییر کند، مقدار نهایی نیز تغییر خواهد کرد.

h1 {
  font-size: 2.5em;
}

/* اگر اندازه مرجع 16px باشد:
   2.5 × 16px = 40px */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای تنظیم درست فونت در CSS، ابتدا خانواده قلم را با توجه به نوع محتوا انتخاب کنید و برای آن گزینه های جایگزین در نظر بگیرید. سپس با font-style حالت متن را مشخص کنید و با font-size اندازه ها را بر اساس نقش هر بخش تنظیم کنید.

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