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

İçeriğinizi en rahat şekilde okuyabilmeleri için kullanıcılarınızın tercihlerine uygun bir yazı tipi uyarlama yöntemidir.

Adam Argyle

Kullanıcıyı tasarım sürecine dahil etmek kullanıcılar, tasarımcılar ve geliştiriciler için heyecan verici bir süreçti. Kullanıcılar deneyiminize ulaşıp içeriği kullanmaya sorunsuz başlayabilir. Tercihleri, tasarım sonucuna zengin bir şekilde entegre edilir.

Bu blog yayınında, okuma deneyimini daha da özelleştirmek için CSS medya sorgularının değişken yazı tipiyle kullanılması incelenmektedir. Yazı tipi derecesi ve ağırlığı font-variation-settings ile özelleştirilebilir. Böylece, koyu mod veya yüksek kontrast tercihi gibi çeşitli tercihlere ve bağlamlara göre mikro ince ayar yapılabilir. Bu tercihleri alıp kullanıcı deneyimine göre değişken bir yazı tipi uyarlayabiliriz.

• Koyu modun renk geçişi biraz daha az olur.
• Yüksek kontrastda yazı tipi daha kalın olur.
• Düşük kontrastlarda yazı tipi daha ince olur.

https://codepen.io/argyleink/pen/mdQrqvj

Bu anlamlı anı etkinleştiren CSS'nin ve değişken yazı tipinin her bir bölümünü anlamak için okumaya devam edin.

Kurulum

CSS ve yazı tipi varyasyonu ayar değerlerine odaklanmamıza yardımcı olmak ve aynı zamanda bize okuyup görmemizi sağlayacak bir şeyler sunmak için çalışmayı önizlemek üzere kullanabileceğiniz işaretlemeyi aşağıda bulabilirsiniz:

<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 eklenmeden yazı tipi boyutu zaten kullanıcı tercihlerine göre uyarlanabilir. Burada, font-size değerini piksel cinsinden ayarlamanın kullanıcı tercihlerini nasıl değiştireceğini ve yazı tipi boyutunuzu neden rems olarak ayarlamanız gerektiğini gösteren başka bir demo içeren videoyu izleyebilirsiniz:

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, düzgün tipografiyle ilgili 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ı eksenler içeren değişken yazı tipine bağlıdır. Özellikle GRAD ve wght gerekir. Bu makaledeki hedef uyarlanabilir kullanıcı tercihleri, renk şeması ve kontrastla ilgilidir. Bunların her ikisi de bu eksenleri kullanıcının tercihine göre uyarlar.

Not: Tercihlerle eşleşen bu kullanıcı deneyimini gerçekleştirmek için değişken yazı tipine gerek yoktur. Ancak değişken yazı tipi kullanıldığında, değişken yazı tipinin birden fazla ağırlığı veya sürümü yüklenmeden sağlanır. Değişken yazı tipine bağımlı olmayan bu kullanıcı deneyiminin bir örneğini görmek için bu demoya göz atın.

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 bunu her şeye uygular:

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

Kazanmak için CSS özel özellikleri ve medya sorguları

Yazı tipi yüklendikten sonra kullanıcı tercihlerini sorgulayabilir ve değişken yazı tipi ayarlarını eşleşecek şekilde uyarlayabilirsiniz.

Not: Bu stillerden bazılarının incelenmesi gerekirse medya sorguları ile ilgili CSS hakkında bilgi modülüne veya özel özelliklerle uyarlanabilir renk şeması oluşturma konulu bu yayına göz atın.

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

Aşağıdaki ilk stiller, herhangi bir tercihi olmayan kullanıcılar için varsayılan stiller veya buna bakmanın başka bir yolu olacaktır.

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

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

Tercih edilen yüksek kontrast olduğunda ayarlar

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

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

Artık okuma sırasında daha fazla kontrast mevcut.

Düşük kontrast tercihi yapıldığında kullanılan ayarlar

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

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

Artık okuma sırasında daha az kontrast var.

Tercih edilen koyu mod olduğu durumlardaki ayarlar

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

Şimdi de karanlıktaki ışık ile ışıktaki karanlık arasındaki algı farkları da göz önünde bulundurulmuş.

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;
    }
  }
}

İsterseniz CSS iç içe yerleştirme ile eğlenceyi bir arada kullanabilirsiniz:

@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çta, yazı tipini kullanıcının tercihlerine göre uyarlayan bir okuma deneyimi elde edilir. Kaynak kodun tamamını aşağıda Codepen'de bulabilirsiniz.