پیشرو: فضا به اندازه کلمات مهم است


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

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

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

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

نحوه استفاده از پیشرو به ویژه برای بلوک‌های بزرگ متن به کار می‌رود.

 

چه چیزی پیشرو است؟ قوی>

Leading — تلفظ ledding — فاصله بین خطوط نوع است. پیشرو به طور سنتی در نقاط (درست مانند فونت) اندازه گیری می شد. این اصطلاح با پرس حروف به سبک قدیمی، زمانی که تایپ با دست تنظیم می شد، سرچشمه گرفت. نوارهای سربی بین خطوط نوع قرار داده شد تا همه چیز در تراز کامل باشد.

از زمان ظهور نشر دیجیتال، پیشرو اغلب با ارتفاع خط اشتباه گرفته شده است. ارتفاع خط تمام فضایی است که از یک خط مبنا – صفحه فرضی که حروفی مانند “a”، “x” و “n” روی آن قرار دارند تا خط بعدی است. در مقابل، فاصله از پایین یک حرف در یک خط، تا بالای یک حرف در خط بعدی فاصله است: به معنای واقعی کلمه ارتفاع خط منهای ارتفاع متن است.

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

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

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

 

راه حل کاملی وجود ندارد

Facebook

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

به عنوان یک قاعده کلی، نقطه شروع پیشروی معمولاً با اندازه نقطه فونتی که استفاده می کنید یکسان است. برخی از نرم‌افزارها، به‌ویژه مرورگرهای وب، آن را کمی فراتر می‌گذارند و پیش‌فرض را کمی بالاتر از اندازه نقطه قرار می‌دهند، معمولاً از پیش‌فرض ۱۲۰ درصد استفاده می‌کنند. بنابراین بلوک هایی که شامل متن 10 نقطه ای هستند دارای 12 نقطه اول خواهند بود.

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

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

این ارتفاع خط “عادی” برای چیزهایی که نیاز به مطالعه زیاد دارند نیز مناسب است. این استانداردی است که توسط بسیاری از وب سایت ها و نشریات چاپی استفاده می شود.

 

آن را محکم نگه دارید

Branch

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

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

Regenerate Music co

هنگام تنظیم مشخصات ارتفاع خط، به حروف و حروفی که در بالا و پایین x-height قرار دارند فکر کنید. هنگام کار با تمام حروف، هیچ صعودی یا نزولی وجود ندارد، بنابراین ممکن است لازم باشد فاصله خطوط را محکم کنید، مانند تکنیکی که توسط Regenerate Music Co استفاده می‌شود. همین امر در مورد فونت‌هایی که عروج و نزول کوتاه‌تر دارند، صادق است.

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

 

شل کردن

Onst Creative

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

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

Alistapart

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

بسیاری از طراحان هنگام استفاده از حروف sans serif، پیشروی کمتری را انتخاب می کنند. در هنگام کار با فونت هایی با شکوفایی اغراق آمیز یا لیگاتور می تواند گزینه خوبی باشد. فضای اضافی اجازه می دهد تا اتاق حروف بدون همپوشانی نفس بکشد.

The Bloggess

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

 

رنگ های پس زمینه و پیشرو

رنگ و کنتراست هنگام انتخاب ارتفاع خط بسیار مهم هستند.

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

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

 

تغییر عرض ها و پیشرو

HappyCog

طراحی واکنش‌گرا درک پیشرو (و به طور کلی تایپ) را حتی مهم‌تر می‌کند.

با وضوح‌ها و شکل‌های مختلف صفحه، مشخصات نوع باید مطابق با آن تنظیم شود تا اطمینان حاصل شود که سایت قابل خواندن باقی می‌ماند. همانطور که متن روی صفحه کوچک می‌شود (یا رشد می‌کند)، پیشرو باید مطابق با آن تنظیم شود.

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

بنابراین هنگامی که مشخصات پیشرو را برای سایت خود تعیین می کنید، به چندین مجموعه آستانه نیاز خواهید داشت: یکی برای طراحی وب سایت اصلی خود، یکی برای دستگاه های با اندازه متوسط ​​مانند iPad و سایر تبلت ها، و دیگری برای تلفن های همراه. هر کدام ممکن است مجموعه متفاوتی از نسبت‌های مورد استفاده برای ارتفاع متن به خط داشته باشند.

 

نتیجه گیری

اکنون که به انواع نکات و ابزارهای برجسته مجهز شده اید، از کجا شروع می کنید؟

چک لیستی وجود ندارد. بهترین گزینه این است که نگاهی به نوع آن بیندازید و ببینید چه احساسی دارد (از تست چشم قدیمی استفاده کنید). بگذارید کمی بماند و بعداً دوباره به آن برگردید. آیا هنوز هم همین حس را نسبت به متن دارید؟ آیا احساسی که دریافت می کنید با احساسی که برای طراحی سایت خود در ذهن دارید مطابقت دارد؟

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

با آن بازی کنید. طرح متن خود را برای نظرات بیشتر به شخص دیگری نشان دهید. از آنها بپرسید که در مورد آن چه احساسی دارند.

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

بدون دیدگاه

دیدگاهتان را بنویسید

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