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

Kullanıcılarınızın içeriğinizi en rahat şekilde okuyabilmesi için yazı tipini kullanıcı tercihlerine göre uyarlama 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 deneyim oldu. Kullanıcılar deneyiminize gelip tercihleri tasarım sonucuna zengin bir şekilde entegre edildiği için sorunsuz bir şekilde içerik tüketmeye başlayabilir.

Bu blog yayınında, okuma deneyimini daha da özelleştirmek için CSS medya sorgularının değişken bir yazı tipiyle kullanımı ele alınmaktadır. Yazı tipi derecesi ve ağırlığı font-variation-settings ile özelleştirilebilir. Bu sayede koyu mod veya yüksek kontrast gibi çeşitli tercihlere ve bağlamlara göre mikro ayarlama yapılabilir. Bu tercihleri dikkate alarak kullanıcı deneyimine uygun bir değişken yazı tipi oluşturabiliriz.

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

Bu anlamlı anı sağlayan CSS ve değişken yazı tipinin her bir bölümünü anlamak için videoyu takip edin.

Kurulum yapılıyor

CSS ve yazı tipi varyasyonu ayar değerlerine odaklanmanız için, aynı zamanda bize okuyup görebileceğimiz bir şey sunmak amacıyla, çalışmayı önizlemek için 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 eklenmediğinde, yazı tipi boyutu zaten kullanıcı tercihlerine göre uyarlanır. font-size değerini pikselde ayarladığınızda kullanıcı tercihlerinin nasıl geçersiz kılınacağını ve yazı tipi boyutunu neden rem cinsinden ayarlamanız gerektiğini gösteren başka bir demo videosunu burada bulabilirsiniz:

Son olarak, demoyu merkeze almak 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 şık tipografik 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 bir değişken yazı tipine bağlıdır. Bu durumda GRAD ve wght gerekir. Bu makaledeki hedef uyarlanabilir kullanıcı tercihleri, renk şeması ve kontrast içindir. Her ikisi de bu eksenleri kullanıcının istediği tercihe uyacak şekilde 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 özelliği 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.

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

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

@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 ayarlar

Sistem ayarlarında yüksek kontrast tercih ettiğini belirten kullanıcılar için --base-weight değerini 400 yerine 700 olarak artırın:

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

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

Düşük kontrast tercih edilen ayarlar

Sistem ayarlarında düşük kontrast tercih ettiğini belirten kullanıcılar için --base-weight değerini 400 yerine 200 olarak düşürün:

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

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

Tercih koyu mod olduğunda ayarlar

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

Işığın karanlık ve koyu renkler arasındaki algısal farklılıkları hesaplandı.

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

Dilerseniz CSS iç içe yerleştirme ile birlikte hepsini 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ç olarak, yazı tipini kullanıcının tercihlerine göre uyarlayan bir okuma deneyimi elde edilir. Kaynak kodunun tamamını aşağıdaki Codepen'de bulabilirsiniz.