CSS ile yazıyı kullanıcı tercihlerine uyarlama

Yazı tipini kullanıcılarınızın tercihlerine göre uyarlayarak içeriğinizi okurken maksimum rahatlık sağlamanın bir yöntemi.

Adam Argyle

Kullanıcıları tasarım sürecine dahil etmek, kullanıcılar, tasarımcılar ve geliştiriciler için heyecan verici bir dönem oldu. Kullanıcılar deneyiminize ulaşabilir ve içerik tüketmeye sorunsuz bir şekilde başlayabilir. Tercihleri, tasarım sonucuna zengin bir şekilde entegre edilir.

Bu blog yayınında, okuma deneyimini daha da kişiselleştirmek için değişken yazı tipiyle CSS medya sorgularının kullanımı ele alınıyor. Yazı tipi derecesi ve ağırlığı, font-variation-settings ile özelleştirilebilir. Bu sayede, koyu mod veya yüksek kontrast tercihi gibi çeşitli tercihler ve bağlamlar göz önünde bulundurularak ince ayar yapılabilir. Bu tercihleri kullanarak söz konusu kullanıcı deneyimi için değişken bir yazı tipi oluşturabiliriz.

• Koyu modda, renk geçişi biraz daha az belirgin hale gelir.
• Yüksek kontrastta daha kalın bir yazı tipi kullanılır.
• Düşük kontrastta daha ince bir yazı tipi kullanılır.

Bu anlamlı anı mümkün kılan CSS ve değişken yazı tipinin her bölümünü anlamak için okumaya devam edin.

Kurulum

CSS ve yazı tipi varyasyonu ayar değerlerine odaklanmanıza yardımcı olmak ve aynı zamanda okuyup görebileceğiniz bir şey sunmak için çalışmayı önizlemek üzere kullanabileceğiniz işaretleme aşağıda verilmiştir:

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

Herhangi bir CSS eklemeden yazı tipi boyutu, kullanıcı tercihlerine göre uyarlanır. Piksel cinsinden font-size ayarlandığında kullanıcı tercihlerinin nasıl göz ardı edileceğini ve yazı tipi boyutunuzu neden rem cinsinden ayarlamanız gerektiğini gösteren başka bir demoya ait videoyu aşağıda bulabilirsiniz:

Son olarak, demoyu ortalamak ve desteklemek için biraz CSS:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

Bu demo kurulumu, bu kullanışlı tipografi kullanıcı deneyimi özelliğini test etmeye ve uygulamaya başlamanıza olanak tanır.

Roboto Flex değişken yazı tipi yükleniyor

Uyarlanabilir strateji, özelleştirme için anlamlı eksenlere sahip değişken bir yazı tipine bağlıdır. Özellikle GRAD ve wght yazı tiplerine ihtiyacınız vardır. Bu makaledeki hedef uyarlanabilir kullanıcı tercihleri, renk şeması ve kontrastla ilgilidir. Her ikisi de bu eksenleri kullanıcının istediği tercihe göre uyarlar.

CSS'nin @font-face API'sini kullanarak değişken yazı tipini yükleyin:

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

Ardından, yazı tipini bazı içeriklere uygulayın. Aşağıdaki CSS, bu stili her şeye uygular:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

CSS özel özellikleri ve medya sorgularıyla kazanma

Yüklenen yazı tipiyle kullanıcı tercihlerini sorgulayabilir ve değişken yazı tipi ayarlarını buna göre uyarlayabilirsiniz.

Tercih olmadığında kullanılan ayarlar (varsayılan)

Aşağıdaki ilk stiller varsayılan stillerdir veya başka bir deyişle, tercihleri olmayan kullanıcıların stilleridir.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

Tercih yüksek kontrast olduğunda kullanılan ayarlar

Sistem ayarlarında yüksek kontrast tercihini belirten kullanıcılar için --base-weight değerini 400'den 700'ye yükseltin:

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

Artık okurken daha fazla kontrast var.

Tercih düşük kontrast olduğunda kullanılan ayarlar

Sistem ayarlarında düşük kontrast tercihini belirten kullanıcılar için --base-weight değerini 400'den 200'ye düşürün:

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

Artık okurken daha az kontrast var.

Tercih koyu mod olduğunda geçerli olan ayarlar

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Artık koyu zemin üzerinde açık renk ve açık zemin üzerinde koyu renk arasındaki algısal farklılıklar dikkate alınıyor.

Artık hepsi bir arada

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Ya da eğlence için CSS iç içe yerleştirme ile birlikte:

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

Sonuç olarak, kullanıcının tercihlerine uygun bir yazı tipiyle okuma deneyimi sunulur. Tam kaynak kodunu Codepen'de aşağıda bulabilirsiniz.