اگر ارتفاع خط را برابر 0.4 قرار دهیم، نمایشی از لید منفی دریافت می کنیم:

چرا حتی با فاصله بین خطوط کاری انجام می دهند؟ به خاطر ضرر؟ از هیچ کاری برای انجام دادن؟

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

منتهی شدن

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

1. ابعاد

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

یک راه آسان برای محاسبه طول خط، استفاده از روش Robert Bringhurst است که اندازه فونت را در 30 ضرب می کند. یعنی اگر اندازه فونت 10 پیکسل باشد، با ضرب آن در 30، 300 پیکسل یا تقریباً 65 کاراکتر در هر خط به دست می آید. کد چیزی شبیه به این خواهد بود:
پ (
اندازه فونت: 10px;
حداکثر عرض: 300 پیکسل؛
}
من از px استفاده می کنم زیرا محاسبات من را بسیار آسان می کند، اما em را نیز می توان استفاده کرد.

2. پیشرو

لیدینگ فضای بین خطوط متن در بدنه نت است و نقش زیادی در خوانایی دارد. تقسیم بندی صحیح خط باعث می شود خواننده راحت تر خط را دنبال کند و ظاهر متن را بهبود می بخشد. پیشرو همچنین رنگ تایپوگرافی متن را تغییر می دهد که تراکم یا لحن ترکیب است.
پیشرو تحت تأثیر عوامل بسیاری است: نوع فونت، اندازه قلم، کامل بودن، شرایط (?) ، طول خط، فاصله بین کلمات و غیره هر چه خط طولانی تر باشد، پیشروتر است. هرچه اندازه فونت بزرگتر باشد، پیشروی کمتری دارد. یک قانون سرانگشتی خوب ایجاد کردن است صفحه اصلی 2-5pt بزرگتر از اندازه فونت استبسته به هدست بنابراین اگر فونت 12pt باشد، برای وب، صفحه اصلی باید 15pt یا 16pt باشد.

تعیین لید صحیح کمی مهارت نیاز دارد، اما در زیر مثالی از اینکه کد شما باید چگونه باشد آورده شده است:
بدن (

اندازه فونت: 12px;
ارتفاع خط: 16 پیکسل.
}

3. رسیدگی به نقل قول

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

این به راحتی با CSS با استفاده از عنصر blockquote به دست می آید:
مسابقه (
text-indent: -0.8em;
اندازه فونت: 12px;
}

تورفتگی منفی به فونت، اندازه فونت و حاشیه بستگی دارد.

4. ریتم عمودی

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

برای حفظ ریتم عمودی با CSS، باید فاصله و فاصله خطوط (پیشرو) برابر با اندازه شبکه پایه باشد. فرض کنید از 15 پیکسل استفاده می کنید شبکه پایه، به معنای 15 پیکسل بین هر خط شبکه. صفحه اول 15 پیکسل و فاصله پاراگراف نیز 15 پیکسل خواهد بود. در اینجا یک مثال است:
بدن (
font-family: Helvetica, sans-serif;
اندازه فونت: 12px;
ارتفاع خط: 15 پیکسل؛
}

پ (
حاشیه پایین: 15 پیکسل.
}

این اجازه می دهد تا هر پاراگراف روی شبکه قرار گیرد و در عین حال ریتم عمودی متن حفظ شود.

5. خطوط آویزان بالا و پایین

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

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

6. انزوا

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

در اینجا چند راه برای برجسته کردن با استفاده از CSS وجود دارد:
طول (
سبک فونت: مورب;
}

H1 (
فونت-وزن: پررنگ;
}

H2 (
تبدیل متن: حروف بزرگ;
}

ب (
font-variant: small-caps;
}
به خاطر داشته باشید که نوع فونت فقط در صورتی کار می کند که فونت از حروف کوچک پشتیبانی کند.

ویژگی حاشیه HTML برای افزودن padding یا شکاف بین عناصر مختلف استفاده می شود. ویژگی padding برای افزودن فاصله بین محتوا و حاشیه (فریم) عنصر HTML مشخص شده استفاده می شود.

تفاوت بین حاشیه و تورفتگی را می توان در شکل زیر مشاهده کرد:

همچنین برای درک بهتر تفاوت بین این دو نسخه آزمایشی زنده را بررسی کنید.

نمایش دمو و کد

ما سه عنصر div داریم. دو مورد اول با حاشیه HTML و سومی با padding است. فاصله بین div ها حاشیه است و فاصله بین متن داخل div سوم و خط مرزی آن padding است.

CSS padding و نحو حاشیه

نحو برای یک اعلان ویژگی حاشیه CSS به صورت زیر است:

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

حاشیه: 10px 20px 50px 100px;

• 10 پیکسل - حاشیه بالا؛
• 20 پیکسل - حاشیه سمت راست؛
• 30 پیکسل - حاشیه پایین؛
• 40 پیکسل - تورفتگی سمت چپ.

همچنین می توان حاشیه HTML سمت چپ و سایر جهت ها را به طور جداگانه تنظیم کرد:

توجه: می توان از آن برای تعریف padding px، pts، cm و غیره استفاده کرد.

سینتکس ویژگی padding CSS

ویژگی padding را می توان با استفاده از یک اعلان تک / مختصر یا با استفاده از یک اعلان جداگانه و برای هر جهت تنظیم کرد.

اعلامیه واحد با یک مقدار:

برای هر جهت با یک اعلامیه:

بالشتک: 10px 20px 50px 100px;

اگر چهار مقدار مشخص شده باشد، ترتیب مانند ویژگی حاشیه HTML CSS است.

برای هر جهت به طور جداگانه:

padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;

مثالی برای تنظیم حاشیه و تورفتگی در لیست HTML

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

لیست توسط سایر ویژگی های CSS نیز مشخص می شود، اما بدون استفاده از ویژگی های حاشیه HTML و padding، به صورت زیر خواهد بود:

نمایش دمو و کد

با اضافه کردن 10 پیکسل حاشیه برای پیوندهای داخل

:

ظاهر زیر را دریافت می کنیم:





نمایش دمو و کد آنلاین

کل کلاس برای پیوندهای درون یک عنصر

به شرح زیر خواهد بود:

بالشتک: 10 پیکسل؛ حاشیه: 2 پیکسل text-decoration: هیچ; رنگ: #fff; پس زمینه رنگ: # DA8119; نمایش: بلوک؛

نمایش فیلدها با استفاده از مثال جدول HTML

در زیر نمونه ای از استفاده از ویژگی padding در جدول HTML آورده شده است. من یک جدول با چند ردیف ایجاد کردم.

جدول با استفاده از ویژگی های مختلف CSS استایل بندی شده است. ابتدا ببینید جدول بدون اعمال ویژگی padding چگونه است:




نمایش دمو و کد

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




نمایش دمو و کد

در زیر کد سبک هایی که برای آنها استفاده می شود آورده شده است. تمام کدها را می توانید از طریق لینک بالا مشاهده کنید:

بالشتک: 20 پیکسل؛ حاشیه: 1 پیکسل # DF7000; پس زمینه: # D0E8AC; رنگ: # 000;

نمونه ای از استفاده از حاشیه و padding با عنصر فرم

ویژگی‌های لایه‌بندی حاشیه HTML همچنین می‌تواند برای عناصر فرم اعمال شود: جعبه‌های متن، دکمه‌ها و غیره.

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

برای واضح تر شدن، یک فرم ایجاد می کنم و تفاوت بین حاشیه ها با حاشیه و بدون حاشیه و padding را نشان می دهم. ظاهر اولیه فرم بدون اعمال حاشیه ها و ویژگی های padding:



با افزودن فیلدهایی به کلاس textboxes و کلاس دکمه btn، فرمی به شکل زیر دریافت می کنیم:

فیلدهای فیلدهای متنی:

فیلدهای دکمه:

بالشتک: 9px 15px;



نمایش دمو و کد

برای افزایش یا کاهش padding بین کادرهای متنی، از ویژگی HTML CSS margin استفاده کنید. در این دمو از یک مقدار منفی برای کاهش فاصله بین فیلدها استفاده کردم.

فیلدهای فرم به شکل زیر خواهد بود:



نمایش دمو و کد

پس از استفاده از یک مقدار منفی در حاشیه HTML، فاصله بین کادرهای متنی 3 پیکسل کاهش یافت.

با استفاده از ویژگی padding، فاصله مکان نما در داخل کادر متن و خط مرزی را که توسط خصوصیات دیگر تنظیم می شود، افزایش داده ایم. زمین اکنون بسیار بهتر به نظر می رسد.

برای دکمه ” صرفه جویی"ما همچنین ویژگی padding را اعمال کردیم:

بالشتک: 9px 15px;

که برای تراز کردن متن در همه جهات استفاده می شود.

ترجمه مقاله " CSS padding و margin - با 4 عنصر HTML توضیح داده شده است"توسط یک تیم پروژه دوستانه آماده شد