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

Yazı tiplerini kullanıcılarınızın ihtiyaçlarına göre uyarlama yöntemi Böylece, içeriğinizi rahatça okuyabilecekleri anlamına gelir.

Adam Argyle

Kullanıcıyı tasarım sürecine dahil etmek kullanıcılar için heyecan verici bir süreç oldu. mühendislerden biri. Kullanıcılar deneyiminize gidip sorunsuz bir şekilde başlayabilir tercih ediyor ve kullanıcı tercihlerini tasarım sonucuna zengin şekilde entegre ediyor.

Bu blog yayınında, özelleştirilmiş değişiklikler yapmak için değişken yazı tipiyle CSS medya sorgularının nasıl kullanılacağı ele alınıyor. daha da derinleştireceğiz. Yazı tipi derecesi ve kalınlığı özelleştirilebilir font-variation-settings ile çeşitli tercihlere göre mikro ayara olanak tanır ve bağlamlar (ör. koyu mod veya yüksek kontrast tercihi) Aldığımız ve bu kullanıcı deneyimi için değişken bir yazı tipi uyarlayın.

• Koyu modun tonlaması biraz daha düşük olur.
• Yüksek kontrastın yazı tipi daha kalın hale gelir.
• Düşük kontrastın yazı tipi daha ince olur.

Bu bölümde, CSS'nin ve değişken yazı tipinin etkinleştirildiği her bir bölümü anlamak için Bizimle gurur duyuyorum.

Kurulum yapılıyor

CSS ve yazı tipi varyasyonu ayar değerlerine odaklanmaya yardımcı olmak, okumak ve görmek istediğiniz bir şey varsa, ç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 piksel olarak ayarlamanın nasıl sonuç vereceğini gösteren başka bir demo videosunu burada bulabilirsiniz ve neden yazı tipi boyutunuzu rems olarak ayarlamanız gerektiği gibi bazı genel bilgiler verin:

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 şık tipografik kullanıcı deneyimini test etmeye ve uygulamaya başlamanıza olanak tanır. özelliğini kullanabilirsiniz.

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

Uyarlanabilir strateji, her bir öğe için anlamlı eksenlere sahip değişken bir yazı tipine özellikle de GRAD ve wght gerekir. Hedef uyarlanabilir kullanıcı renk şeması ve kontrast için, her ikisi de bu eksenleri kullanıcının tercihine uygun hale getirir.

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 bir içeriğe uygulayın. Aşağıdaki CSS bunu uygular: her şey:

@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şkeni uyarlayabilirsiniz yazı tipi ayarlarını seçin.

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

Aşağıdaki ilk stiller, varsayılan stiller veya hiçbir tercihi olmayan kullanıcılara yönelik stillere hayat veriyor.

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

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

Yüksek kontrast tercih edildiğinde kullanılacak ayarlar

Sistemlerinde yüksek kontrast tercih eden kullanıcılar için ayarlarında, 400 olan --base-weight değerini 700 değerine yükseltin:

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

Okuma sırasında artık daha fazla kontrast var.

Düşük kontrast tercih edilen ayarlar

Sistemlerinde düşük kontrastı tercih eden kullanıcılar için ayarlarında, 400 olan --base-weight değerini düşürerek 200 yapın:

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

Okuma sırasında artık daha az kontrast var.

Koyu mod tercih edildiğinde kullanılacak ayarlar

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

Işığın karanlıkta ve ışığın altında olması arasındaki algısal farklılıklar yardımcı olur.

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 eğlenmek için CSS iç içe yerleştirme ile birlikte uygulayabilirsiniz:

@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 yazı tipine uyacak şekilde tercihler. Kaynak kodunun tamamını aşağıdaki Codepen'de bulabilirsiniz.