چگونه فونت ها را واکنشگرا(ریسپانسیو) کنیم

تایپوگرافی (Typography) از مهم‌ترین جنبه‌های طراحی وب‌سایت پاسخ‌گو است و اگر مایل هستید مطالبتان در تمام اندازه‌های صفحه نمایش جذاب به نظر برسد، بهینه‌سازی فونت‌های مورد استفاده‌ی شما، برای دستگاه‌های تلفن همراه یک ضرورت مطلق خواهد بود. خوشبختانه، روند ساخت فونت‌های انعطاف‌پذیر چندان دشوار نیست. هنگامی که در مورد انعطاف‌پذیری (که موضوع اصلی این دوره است) صحبت می کنیم، نباید از انتخاب اندازه‌ی مناسب برای فونت‌ها که با هدفِ تطابق در وب‌سایت‌های پاسخ‌گو انجام می‌گیرد، غفلت کنیم. ممکن است از مقیاس‌های متفاوتی از جمله pixel-ها، em-ها، rem-ها و یا درصد برای این منظور استفاده کنیم. انتخاب معیار و واحد مناسب، برای طراحی یک رابط (interface) پاسخ‌گوی نرم و قابل انعطاف، امری حیاتی است.

واحد اندازه‌گیری Pixel

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

همان‌طور بیشتر خوانندگان این دوره ممکن است بدانند، زمانی که شما ابعاد را برای آیتم «والد» تعیین کنید، این ابعاد از طریق وراثت، به‌طور خودکار به هر یک از عناصر «فرزند» نیز اعمال خواهند شد. (به همین دلیل است که CSS، شیوه‌نامه‌ای «آبشاری» (cascading) نام گرفته است.) به عنوان مثال، تعیین یک مقدار pixel ثابت برای فونتِ بدنه‌ی اصلیِ صفحه (body)، تقریبا بر تمامی عناصرِ دیگرِ طراحی نیز اثر خواهد گذاشت؛ در این صورت، هنگامی که توسعه‌دهنده بخواهد به هر عنصر در صفحه استایلی جداگانه بدهد، نیاز دارد به‌صورت دستی استایلی جدید برای هریک تعریف کند تا جایگزین مورد‌ قبلی شود.

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

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

واحد اندازه‌گیری Em

بیایید بحث را با پرداختن به واحد em ادامه دهیم. واحد em برابر با اندازه‌ی فونت‌ تعریف شده (به پیکسل) در قانون CSS است. به‌طور مثال، اگر ما یک

بسازیم که شامل متنی با اندازه‌ی فونتِ ۱۶ پیکسل باشد، ۱em به‌معنای ۱۶ پیکسل، ۲em به‌معنای ۳۲ پیکسل خواهد بود و الی آخِر. عنصری که اندازه‌ی قلمِ آن بر اساس واحد em داده شده باشد، در تمامی مرورگرها تغییر اندازه می‌دهد و نیاز نیست به تک‌تکِ عناصر (المنت‌ها) به‌صورت دستی اندازه اختصاص دهیم؛ زیرا با اختصاص دادنِ اندازه به عنصر «والد»، به‌کمکِ خاصیت آبشاری بودنِ CSS، این ویژگی به عنصرهای «فرزند» که مربوط به این والد باشند به‌ارث خواهد رسید.

بدیهی است استفاده از em مزایا و معایب خاص خود را دارد که باید آن‌ها را درنظر داشته باشید. اگرچه استفاده از آن، تعمیر و نگهداری سایت را ساده‌تر می‌کند (به دلیلی که در بالا اشاره شد، چراکه تمامی تغییرات به‌صورت خودکار بر تمامی محتوا اعمال خواهد شد)، اما این امر ممکن است یک توسعه‌دهنده را که به ذنبال آن است تا بتواند اندازه‌ی قلم‌های مورداستفاده‌اش را خود تعیین و پیش‌بینی کرده و خواهان کنترل دقیق آن‌ها باشد، با موانعی روبرو کند. خوشبختانه این مشکل با استفاده از به‌کارگیری واحدهای اندازه‌گیری مشابه برای بیشتر محتوا و اعمال این مقیاس تنها بر بخش‌های خاص مانند header و footer حل خواهد شد.

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

این واحد نیز در صورتی که برای فونت‌ها استفاده شود، درست همانند em، قابلیت تغییراندازه را به آن‌ها خواهد داد و  به ارث نیز خواهد رسید. ازنظز تئوری تفاوت زیادی بین درصد و em وجود ندارد؛ آن‌ها هردو واحدهایی قابل انعطاف برای اندازه‌گیری هستند. اما چه‌چیز مهمی بین این دو واحد تفاوت دارد (هرچند کوچک) که شما را وادار کند یکی را بر دیگری ترجیح دهید؟ مطمئناً شما مایل نیستید برای بخشی از عناصر از درصد و برای بخش دیگر از em استفاده کنید. یک راه ساده برای کنار گذاشتن درصدهای استفاده شده، قانون CSS زیر است:

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

واحد اندازه‌گیری Rem

برخی از شما ممکن است بدانید، واحد دیگری نیز وجود دارد که موجب انعطاف‌پذیری فونت می‌گردد؛ واحد rem (که بر پایه em ایجاد شده است). رفتار آن شبیه به واحد em است که در بالا درمورد آن صحبت کردیم، البته با یک تفاوت؛ مقدار آن وابسته به عنصر ریشه است (که در HTML این عنصر، می‌باشد)، نه عناصر دیگری که مرتبط با آن هستند. این تفاوت مهم، موجب رفع شدن بسیاری از مشکلاتی که به‌دلیل وجود عناصر تودرتو رخ می‌دهند، می‌شود. چراکه بیشتر طراحان به این امر واقفند که بیشترِ طراحی‌های آن‌ها، از عناصر تودرتو تشکیل شده‌اند؛ مانند انسان‌ها که بیشتر آن‌ها «والدینی» دارند و خصوصیاتی مشخص را از آن‌ها به ارث می‌برند.

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

جمع‌بندی

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

مسلماً واحد em، تعیین مقیاس قلم را ساده‌تر می‌کند و درنتیجه تعمیر و نگهداری سایت نیز به‌طور قابل‌ملاحظه‌ای آسا‌ن‌تر خواهد بود. مثلاً اگر تصمیم بگیرید که اندازه‌ی قلم‌ها را به‌طور درصدی افزایش دهید، تنها باید درصد اندازه‌ی اعمالی به عنصر body‌ را تغییر دهید و دیگر هیچ! تعمیر و نگهداری، یک مشکل قابل توجه و بزرگ است که ارزش آن را دارد تا در مرحله‌ی طراحی به‌آن توجه زیادی شود. چه خوب خواهد بود که کمی از امور تکراری نظیر تعمیر و نگهداری روزمره و سادگی شیوه‌نامه‌ها رهایی پیدا کنیم و تمرکز بیشتری بر امور زیبایی‌شناسی و عملکردی داشته باشیم. اما جدا از فرآیند طرح‌ریزیِ خلاقانه و اصیل، یک طراح خوب باید بخش زیادی از توجه خود را به اولویت دادن کاربردپذیری (utility) و جنبه‌ی عملی (pragmatism) بر یکدیگر باتوجه به شرایط متمرکز کند.

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

منبع: آی تاتس