Yazı biçimi

Web özellikleri: font-size rem em birimi line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() ve clamp() Görüntü alanı birimleri

Genel olarak en iyi uygulamalar

  • Yazı tipi boyutu devralma sırasında göreli ölçeklendirme sağlamak için line-height için birimsiz sayılar (ör. 1.5) kullanın.
  • Uzun URL'leri sığdırmak için overflow-wrap: break-word (veya anywhere) kullanın.
  • Yazı tipi boyutu için px KULLANMAYIN. Kullanıcının tarayıcı yazı tipi boyutu tercihlerine (kök yazı tipi boyutu) uymak için rem, bağlamsal boyutlandırma için ise em/yüzde değerlerini tercih edin.

Okunabilirlik

  • Uzun metin satırlarından kaçının: Paragraf bloklarını maksimum 80 karakter genişlikle sınırlayın.
  • Boşluk nehirlerinden kaçının: Metnin okunmasını zorlaştırabileceği için text-align: justify kullanmaktan kaçının. Kullanmanız gerekiyorsa kelimeler arasında aşırı boşluk olmaması için hyphens: auto ile birleştirin.
  • Süslü yazı tipleri kullanmayın: Ana okuma içeriğinde el yazısı yazı tiplerini kullanmayın.
  • Vurgu için tamamı büyük harf kullanmayın: Görsel vurgu için kalın yazı tipini tercih edin ve vurgu anlamsal olduğunda <em>/<strong> kullanın.
  • Vurguyu genel olarak sınırlayın: Her yerde kullanıldığında vurgu anlamını kaybeder. Yalnızca içeriğin nasıl okunması gerektiğini değiştirdiği yerlerde uygulayın.
  • Kullanıcı yakınlaştırma tercihlerini destekleyin: Kullanıcıların, içerik veya işlev kaybı olmadan metni% 200'e kadar yeniden boyutlandırmasına izin verin.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Metin kaydırma

  • Dengeli başlıklar ve başlık benzeri içerikler için text-wrap: balance kullanın (ör. <th>)
  • Uzun gövde metinleri (paragraflar, blok alıntılar vb.) için text-wrap: pretty kullanın.
  • text-wrap: balance veya text-wrap: pretty ifadesini bilinçli olarak kullanın. Performans maliyeti olduğu için * ifadesine UYGULAMAYIN.
  • Görünür bir kutusu olan öğelerde (arka planlar, kenarlıklar, gölgeler vb.) text-wrap: balance kullanmaktan kaçının. Bu, kapsayıcının genişliğini değiştirmez, yalnızca metnin bu genişlik içinde nasıl kaydırılacağını etkiler. Bu durumda kapsayıcının sonunda boşluk kalabilir. Bu genellikle istenmeyen bir durumdur.

Duyarlı Tipografi

  • YAPIN: Görüntü alanına göre ölçeklenen yazı tipi boyutları için clamp() içinde görüntü alanına ve yazı tipine göre değişen birimleri birleştirerek istediğiniz aralıkta kalmalarını sağlayın. Örneğin, clamp(2rem, 1rem + 5vw, 4rem). Yazı tipi boyutunun ne kadar hızlı değişeceğini kontrol etmek için görüntü alanına ve yazı tipine göre değişen birimlerin oranını ayarlayın.
  • clamp() olmadan yazı tipi boyutu için tek başına vw KULLANMAYIN. Bu, metni aşırı büyük veya küçük ekranlarda çok küçük ya da çok büyük ölçekleyebilir.