یادگیری درباره رهبری در طراحی وب

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

هدف هدایت

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

رهبری در طراحی وب

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

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

سایت خودتان افزایش دهید ، می توانید این کار را مانند این انجام دهید:

اصلی p {خط ارتفاع: 1.5؛ }

این در حال حاضر 1.5 برابر ارتفاع خط معمولی است که بر اساس اندازه فونت پیش فرض صفحه (که معمولا 16 پیکسل است) است.

هنگام استفاده از خط ارتفاع

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

هنگامی که استفاده از خط ارتفاع نیست

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

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

اصلی p {خط ارتفاع: 1.5؛ حاشیه پایین: 24 پیکسل؛ }

این همچنان ارتفاع خط 1.5 را بین خطوط متن برای پاراگراف صفحه ما (آنهایی که در عنصر

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

اصلی p {خط ارتفاع: 1.5؛ پدینگ پایین: 24 پیکسل؛ }

تقریبا در همه موارد، این همانند CSS قبلی است.

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

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