چگونگی نمایش متن در صفحه وب تعیین میکند که آن محتوا چقدر خوانا است و چقدر خواننده تمایل دارد آن را مطالعه کند. صفحهآرایی وب، هنر چیدمان متن است که درباره کنترل محتوا برای ارائه تجربهای خوشایند و کارآمد به خواننده در خواندن آن است.
این آموزش به شما میآموزد چگونه از ویژگیهای CSS که در چیدمان محتوای متنی مؤثرند، استفاده کنید. شما با ویژگیهایی مانند line-height، letter-spacing و text-transform همراه با متن نمونه کار خواهید کرد تا خوانایی را بهینه کنید و سلسلهمراتب محتوا را با برجسته کردن عناوین تعریف نمایید. این مفاهیم و روشها به شما کمک میکنند تا محتوا را بهتر در وبسایتتان ارائه دهید.
در این بخش، شما محتوای HTML را برای طراحی موارد مختلف آماده خواهید کرد. هدف از این HTML ارائه عناصر و موقعیتهای مختلف برای اعمال استایل و نیز ایجاد فایل CSS پایه است.
برای شروع، فایل index.html را در ویرایشگر متن خود باز کنید و HTML زیر را به آن اضافه نمایید:
سپس در تگ <head>، متاتگ تعیین مجموعه کاراکتر برای صفحه، عنصر عنوان صفحه، متاتگ تعریفی برای مدیریت صفحه در دستگاههای موبایل و فایلهای CSS لازم برای بارگذاری را اضافه کنید:
توجه کنید که فایلهای CSS شامل چند فونت از Google Fonts و فایل styles.css که در ادامه میسازید میشود.
اکنون محتوای HTML داخل تگ <body> صفحه را تنظیم کنید. این محتوا داخل تگ <article> قرار خواهد گرفت که شامل یک عنصر <h1>، چندین عنصر <h2> و <h3> و پاراگرافهای متعدد <p> است. متن این عناصر با استفاده از مولد متن Cupcake Ipsum پر میشود تا تمام آنچه برای اعمال استایل در این آموزش لازم است، آماده باشد.
این تغییرات را در فایل index.html اعمال و ذخیره کنید و آن را در مرورگر باز کنید تا هنگام نوشتن استایلها تغییرات را ببینید:
محتوا با فونت سریف و رنگ متن مشکی روی پسزمینه سفید نمایش داده میشود.
سپس فایلی به نام styles.css همنام با index.html ایجاد کنید و در ویرایشگر آن را باز نمایید.
دو خانواده فونت از Google Fonts بارگذاری خواهند شد. فونت اول به عنوان فونت پیشفرض صفحه استفاده میشود.
یک سلکتور برای body ایجاد کنید و ویژگی font-family را با استک فونت 'Public Sans', sans-serif تنظیم کنید تا این فونت به عنوان فونت جدید پیشفرض اعمال شود:
این کار فونت را برای عنصر body تنظیم میکند. تمام محتواها به ارث خواهند برد و لازم نیست هر کدام جداگانه فونت را تعریف کنند. نام فونت Public Sans است و اگر این فونت لود نشود، مرورگر فونت سانسسریف پیشفرض را نمایش میدهد. فونتها همیشه باید یک فونت جایگزین در استک فونت داشته باشند تا در صورت بارگذاری نشدن فونت اصلی، خوانایی حفظ شود.
حال برای عناصر تیتر h1، h2 و h3، فونت ویژهای به نام Quicksand تعیین کنید. یک سلکتور گروهی با این سه تگ ایجاد کنید و همین تنظیمات فونت را با فونت Quicksand اضافه کنید:
اینها را ذخیره کنید و صفحه را تازهسازی کنید. فونتهای سفارشی بارگذاری شده و متن با فونت جدید نمایش داده میشود:
در نهایت برای هر عنصر h1، h2، h3 و p، اندازه فونت (font-size) با واحد rem تعیین کنید:
- h1: 2.5rem
- h2: 1.875rem
- h3: 1.5rem
- p: 1.25rem
واحد rem به کاربر گزینه بهتری برای تغییر اندازه نسبت به پیکسل میدهد، چون نسبت به اندازه ریشه صفحه است.
بعد از ذخیره و تازهسازی صفحه، اندازههای متن تغییر کرده و ظاهری مشابه تصویر زیر خواهد داشت:
در این بخش، محتوای HTML و فایل styles.css خود را آماده کردید، فونتهای Google Fonts را به صورت کلی روی body و اختصاصی برای عناوین تنظیم کردید و اندازه فونتها نیز مشخص شد. در بخش بعدی به استفاده از ویژگی width برای کنترل طول خطوط متن میپردازیم.
یکی از جنبههای مهم صفحهآرایی متن طول خط خوانا است که اغلب نادیده گرفته میشود. هم از نظر دسترسی و هم خوانایی، طول خط تأثیر زیادی روی راحتی خواندن دارد. خطوط طولانی باعث میشود خواننده کنار گذاشتن جای خود در متن سختتر شود. خطوط کوتاهتر، خواندن و اسکن محتوا را آسانتر میکنند.
فایل styles.css را باز کنید و برای عنصر article ویژگی width با مقدار 90% تنظیم کنید و ویژگی margin را با مقدار 0 auto قرار دهید. این کار باعث میشود محتوا ۹۰ درصد عرض صفحه باشد و با استفاده از auto در margin، محتوا وسطچین شود:
وقتی تغییرات را ذخیره و صفحه را تازهسازی کنید، متن وسط صفحه قرار میگیرد اما خطوط به شدت طولانی خواهند بود:
طول خط ایدهآل بین ۴۵ تا ۷۵ کاراکتر است، طبق توضیحات Clarissa Peterson در ارائه خود درباره تایپوگرافی پاسخگو. خطوط طولانیتر از ۷۵ کاراکتر باعث گم کردن جای خط خواندن میشود و خطوط کوتاهتر از ۴۵ کاراکتر چشم را از حرکت زیاد خسته میکند.
میتوان با واحد ch (که عرض حرف صفر فونت را اندازه میگیرد) طول خط محدود کرد. پس ویژگی max-width با مقدار 70ch به سلکتور article اضافه کنید:
حداکثر عرض، برابر با عرض ۷۰ کاراکتر صفر فونت تنظیمشده در body خواهد بود.
بعد از ذخیره، صفحه را رفرش کنید و مشاهده میکنید محتوا تا ۷۰ کاراکتر عرض محدود شده است و هنگام تغییر عرض مرورگر، پهنای article بین ۹۰% و ۷۰ch تغییر میکند:
نکته: ابزار بوکمارکلت Chris Coyier از CSS Tricks برای هایلایت طول خط بین ۴۵ و ۷۵ کاراکتر وجود دارد.
در این بخش یاد گرفتید چطور با استفاده از ویژگیهای width و max-width خوانایی را با اندازه مناسب خط حفظ کنید. در بخش بعد، درباره تنظیم فاصله خطوط با line-height صحبت میکنیم.
ویژگی line-height فاصله بین خطوط متن را تعیین میکند. معمولاً در تیترها فاصله خطوط کمتر و در پاراگرافها بیشتر است تا خواندن آسانتر شود. خطوط خیلی نزدیک باعث گیج شدن چشم و خطوط خیلی فاصلهدار باعث خستگی چشم میشوند.
فایل styles.css را باز کنید و در سلکتور body ویژگی line-height را برابر ۱.۵ قرار دهید. این مقدار فاصله بین خطوط را مناسب میکند:
مقدار پیشفرض line-height برابر normal است که تقریبا ۱.۲ برابر اندازه فونت است.
اکنون در گروه سلکتور h1, h2, h3 مقدار line-height را ۱.۱۵ قرار دهید تا فاصله خطوط تیترها کمتر باشد و ظاهر بهتری داشته باشد:
بعد از ذخیره و رفرش صفحه، طول محتوا بیشتر میشود چون فاصله خطوط بیشتر شده است:
مقدار line-height بهتر است بدون واحد باشد چون به صورت ضریب اندازه فونت اعمال میشود.
در این بخش با line-height خوانایی را بهبود بخشیدید. در ادامه، فاصله بین عناصر با margin تنظیم میشود.
ویژگی margin برای تنظیم فاصله بین عناصر مختلف به کار میرود. ابتدا در سلکتور h3 مقدار margin را مانند زیر قرار دهید تا فاصله بالای متن بیشتر و پایین آن کمتر شود:
margin: 2em 0 0.5em;در اینجا فاصله بالا ۲ برابر اندازه فونت (مثلا ۴۸px) و پایین نصف اندازه فونت (۱۲px) است.
چون margin خارج از عنصر عمل میکند، در برخی موارد حاشیهها همپوشانی دارند. برای نمونه فاصله بین h3 و پاراگراف بعدی ممکن است توسط margin پاراگراف تعیین شود. برای این منظور از انتخابگر مناسبی با adjacent sibling combinator استفاده میکنیم:
h3 + p {
margin-top: 0;
}این یعنی اگر بعد از h3 بلافاصله پاراگراف باشد، فاصله بالای آن صفر است.
پس از ذخیره و تازهسازی مشاهده میکنید، فاصله بالای h3 زیاد و فاصله بین h3 و پاراگراف زیر آن نزدیکتر شده است:
در این بخش از margin و انتخابگر sibling برای فاصلههای دقیقتر استفاده کردید. در بخش بعد، با text-align جای قرارگیری متن را تنظیم میکنیم.
ویژگی text-align تعیین میکند متن روی خط به کدام سمت چیده شود. مقادیر: left، right، center و justify هستند. مقدار پیشفرض بستگی به زبان مرورگر دارد. مثلا زبانهایی که از چپ به راست خوانده میشوند، پیشفرض left است.
در سلکتور h3 مقدار text-align را برابر center قرار دهید تا متن تیترها وسطچین شود:
بعد از ذخیره و رفرش صفحه، تیترهای h3 وسطچین نمایش داده میشوند:
معمولاً بهتر است متن با تنظیم پیشفرض باشد اما تغییر موقعیت متن میتواند ظاهر متفاوت یا تمایز ایجاد کند.
در این بخش متن تیتر را وسطچین کردید. در ادامه به تغییر حروف با text-transform و فاصله بین حروف با letter-spacing میپردازید.
ویژگی text-transform حالت نوشتار متن را تنظیم میکند: uppercase برای حروف بزرگ، lowercase برای کوچک، و capitalize برای بزرگ کردن اولین حرف هر کلمه. ویژگی letter-spacing فاصله بین کاراکترها را تعیین میکند. ترکیب این دو میتواند نمای ظاهری خاص اما خوانا ایجاد کند.
در سلکتور h1 مقدار text-transform را برابر capitalize قرار دهید تا اولین حرف هر کلمه بزرگ شود:
بعد از ذخیره و تازهسازی صفحه، عنوان اصلی هر کلمه با حرف بزرگ نمایش داده میشود:
حالا در سلکتور h3 مقدار text-transform را برابر uppercase قرار دهید تا کل متن حروف بزرگ باشد:
مطابق شکل زیر، تیترهای h3 تماماً با حروف بزرگ نشان داده میشوند:
توجه: استفاده از uppercase در CSS ممکن است نحوه خواندن متن توسط ابزارهای صفحهخوان را تغییر دهد. مثلا کلمات سه حرفی به صورت مخفف خوانده شوند. برای رفع مشکل میتوان از aria-label در HTML استفاده کرد.
از آنجا که حروف بزرگ نزدیک به هم بنظر میآیند، فاصله بین حروف را با letter-spacing برابر 0.125em تنظیم کنید:
استفاده از واحد em باعث میشود فاصله نسبت به اندازه فونت متناسب باشد.
پس از ذخیره و تازهسازی، فاصله بین حروف افزایش یافته و نمای موردنظر به دست میآید:
در این بخش از text-transform و letter-spacing برای زیبایی و حفظ خوانایی حروف استفاده کردید. بخش آخر به استفاده از ویژگی font برای خلاصه کردن چند خصوصیت خواهد پرداخت.
ویژگی font میتواند چند مقدار مرتبط با نوشته (مانند font-family، font-size، line-height و غیره) را در یک خط ترکیب کند. اما دقت کنید که استفاده از font به معنای بازنویسی همه خصوصیتهایش است.
در سلکتور body مقدار font-family و line-height که قبلا تعریف شده بودند را در قالب ویژگی font به شکل زیر بنویسید (توجه داشته باشید که font-size را نیز باید درج کنید):
font: 1em/1.5 'Public Sans', sans-serif;خط مورب (/) جداکننده font-size و line-height است. مقدار 1em برای font-size به معنی حفظ اندازه پیشفرض فونت صفحه است.
پس از ذخیره فایل و تازهسازی صفحه، هیچ تغییر ظاهری نمیبینید چون این فقط بازنویسی ویژگیهاست.
در این بخش به کمک font تمامی خصوصیات فونت و ارتفاع خط را در یک خط ترکیب کردید.
چیدمان قابل خواندن متن میتواند تفاوت میان طراحی مؤثر و غیر مؤثر باشد. آراستن متن، تعادلی است میان فاصله مناسب بین خطوط، کلمات و بلوکها تا محتوا به شکلی واضح و بدون مزاحمت ارائه شود. با آگاهی از این خصوصیات، خواهید توانست محتوای خوبی ایجاد کنید.
با تشکر از همراهی شما با جامعه پارمین کلود. محصولات ما در حوزه محاسبات، ذخیرهسازی، شبکه و پایگاه دادههای مدیریت شده را بررسی کنید.
از همراهی شما با پارمین کلود سپاسگذاریم.
نظرات کاربران