مقالات طراحی سایت

حتما شما متوجه شده اید که برای font-size واحدهای مختلفی استفاده میشود. ممکن است با خودتان فکر کنید برای پروژه های خود از کدام واحد استفاده کنید؟ در این مقاله من سه واحد px، em، و rem را بررسی میکنم.

px

پیکسل ها اولین واحد سنجش هستند که میتوانید از آن استفاده کنید. اما یک مشکل دارد. فرض کنید از واحد px در پروژه خود استفاده کرده اید و براساس پیکسل مدیا کوری نوشته اید. اگر کاربر اندازه فونت پیشفرض مرورگر خود را تغییر داده باشد چه اتفاقی می افتد؟ فونت سایز شما ثابت خواهد بود (مثلا 20px)، اما تنظیمات کاربر برای فونت اعمال نخواهد شد. این حالت باعث میشود تا کاربر تجربه خوشایندی از سایت نداشته باشد. بنابراین پیکسل میتواند برای فواصل و لی اوت مناسب باشد ولی برای اندازه فونت واحد مناسبی نیست.

مطالعه بیشتر: پنج اشتباهی که در طراحی تجربه کاربری یک وب سایت ممکن است رخ دهد

مطالعه بیشتر: تئوری رضایت کاربر: چرا کاربرد پذیری اساس یک تجربه لذت بخش است

em

em بر اساس font-size المان پدر محاسبه می شود. برای مثال، اگر المان div اندازه فونت 16px داشته باشد، برای آن div و فرزندانش 1em = 16px میشود.

مطالعه بیشتر: درک واحد em در CSS

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

برای مثال اگر اندازه فونت المان پدر 20px باشد، و بخواهیم اندازه فونت المان فرزند 30px باشد، em به این صورت محاسبه میشود:

30 / 20 = 1.5

اندازه فونت المان فرزند برابر با 1.5em است.

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

rem

مقدار rem بر خلاف em اندازه خود را از المان پدر به ارث نمیبرد، بلکه مقدار خود را براساس المان رووت html محاسبه میکند. برای مثال، اگر المان رووت اندازه فونت 16px داشته باشد، برای برای تمامی المان ها 1em = 16px میشود. اگر برای المان رووت اندازه فونت تعریف نشده باشد، مقدار پیش فرض اندازه فونت المان رووت توسط مرورگر مشخص میشود (معمولا 16px میباشد).

من به شخصه برای فاصله گذاری و اندازه فونت rem را ترجیح میدهم. زیرا rem برخلاف em برای محاسبه اندازه فونت از المان رووت استفاده میکند و به المان پدر وابسته نیست.

فرض کنیم که font-size: 10px برای المان رووت در نظر گرفته شده است. در تمامی صفحات وب 1rem برابر با 10px است. از آنجایی که 1px = 0.1rem محاسبه آن راحت میشود. اما اختصاص دادن اندازه فونت بصورت پیکسل مشکلی را که در بخش مربوط به پیکسل اشاره کردم را به همراه دارد.

راه حل آن مشکل درصد است. معمولا اندازه فونت در مرورگرها 16px است. اختصاص دادن font-size: 100% باعث میشود تا 1rem برابر با 16px شود. اگر میخواهید اندازه فونت 10px شود (برای راحتی در محاسبه) font-size: 62.5%. زیرا 62.5% از 16px برابر با 10px است.

به نقل از: Medium