การปรับตัวอักษรให้เข้ากับความต้องการของผู้ใช้ด้วย CSS

วิธีปรับแบบอักษรให้ตรงกับความชอบของผู้ใช้ เพื่อให้ผู้ใช้รู้สึกสบายใจที่สุดเมื่ออ่านเนื้อหาของคุณ

Adam Argyle

การนำผู้ใช้เข้ามาสู่กระบวนการออกแบบเป็นช่วงเวลาที่น่าตื่นเต้นสำหรับผู้ใช้ นักออกแบบ และนักพัฒนาแอป ผู้ใช้จะเข้าถึงประสบการณ์ของคุณและเริ่มบริโภคเนื้อหาได้อย่างราบรื่น โดยระบบจะผสานรวมค่ากำหนดของผู้ใช้เข้ากับการออกแบบอย่างลงตัว

บล็อกโพสต์นี้จะสำรวจการใช้ CSS Media Queries กับแบบอักษรแบบแปรผันเพื่อปรับแต่ง ประสบการณ์การอ่านให้ดียิ่งขึ้น คุณปรับแต่งเกรดและน้ำหนักแบบอักษรได้ ด้วย font-variation-settings ซึ่งช่วยให้ปรับแต่งแบบละเอียดได้ตามค่ากำหนด และบริบทต่างๆ เช่น ค่ากำหนดสำหรับโหมดมืดหรือคอนทราสต์สูง เราสามารถใช้ค่ากำหนดเหล่านี้และปรับแต่งแบบอักษรตัวแปรสำหรับประสบการณ์ของผู้ใช้ได้

• โหมดมืดจะมีการไล่ระดับสีที่ลดลงเล็กน้อย
• คอนทราสต์สูงจะใช้แบบอักษรตัวหนา
• คอนทราสต์ต่ำจะใช้แบบอักษรที่บางกว่า

โปรดติดตามเพื่อทำความเข้าใจแต่ละส่วนของ CSS และแบบอักษรตัวแปรที่ทำให้เกิด ช่วงเวลาที่น่าจดจำนี้

การตั้งค่า

เพื่อให้มุ่งเน้นไปที่ค่าการตั้งค่า CSS และรูปแบบตัวอักษร แต่ก็มี สิ่งที่อ่านและดูได้ด้วย นี่คือมาร์กอัปที่คุณใช้เพื่อแสดงตัวอย่างงานได้

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

โดยไม่ต้องเพิ่ม CSS ใดๆ ขนาดแบบอักษรจะปรับให้เข้ากับค่ากำหนดของผู้ใช้โดยอัตโนมัติ วิดีโอจากเดโมอื่นแสดงให้เห็นว่าการตั้งค่า font-size เป็นพิกเซลจะ ลบล้างค่ากำหนดของผู้ใช้ และเหตุผลที่คุณควรตั้งค่าขนาดแบบอักษรเป็น rem

สุดท้ายนี้ เราจะใช้ CSS เล็กน้อยเพื่อจัดกึ่งกลางและรองรับการสาธิต

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

  h1 {
    text-wrap: balance;
  }
}

การตั้งค่าการสาธิตนี้ช่วยให้คุณเริ่มทดสอบและใช้ฟีเจอร์ UX การจัดรูปแบบตัวอักษรที่ยอดเยี่ยมนี้ได้

การโหลดแบบอักษร Roboto Flex ที่ปรับแต่งได้

กลยุทธ์แบบปรับได้ขึ้นอยู่กับแบบอักษรแบบแปรผันที่มีแกนที่มีความหมายสำหรับการปรับแต่ง โดยเฉพาะอย่างยิ่ง คุณต้องมี GRAD และ wght ความต้องการของผู้ใช้แบบปรับได้เป้าหมาย ในบทความนี้คือรูปแบบสีและความคมชัด ซึ่งทั้ง 2 อย่าง จะปรับแกนเหล่านี้ให้ตรงกับความต้องการของผู้ใช้

โหลดแบบอักษรตัวแปรโดยใช้ @font-face API ของ CSS ดังนี้

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

จากนั้นใช้แบบอักษรกับเนื้อหาบางส่วน CSS ต่อไปนี้จะใช้กับทุกอย่าง

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

พร็อพเพอร์ตี้ที่กำหนดเองของ CSS และการค้นหาสื่อเพื่อชัยชนะ

เมื่อโหลดแบบอักษรแล้ว คุณจะค้นหาค่ากำหนดของผู้ใช้และปรับการตั้งค่าแบบอักษรแบบแปรผันให้ตรงกันได้

การตั้งค่าเมื่อไม่มีค่ากำหนด (ค่าเริ่มต้น)

สไตล์เริ่มต้นต่อไปนี้จะเป็นสไตล์เริ่มต้น หรืออีกนัยหนึ่งคือสไตล์สำหรับผู้ใช้ที่ไม่มีค่ากำหนด

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

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

การตั้งค่าเมื่อต้องการใช้คอนทราสต์สูง

สำหรับผู้ใช้ที่ระบุว่าต้องการใช้ความคมชัดสูงในการตั้งค่าระบบ ให้เพิ่มค่า --base-weight จาก 400 เป็น 700 ดังนี้

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

ตอนนี้คุณจะอ่านได้ง่ายขึ้น

การตั้งค่าเมื่อต้องการคอนทราสต์ต่ำ

สำหรับผู้ใช้ที่ระบุว่าต้องการความคมชัดต่ำในการตั้งค่าระบบ ให้ลดค่า --base-weight จาก 400 เป็น 200 โดยทำดังนี้

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

ตอนนี้คอนทราสต์จะลดลงขณะอ่าน

การตั้งค่าเมื่อค่ากำหนดเป็นโหมดมืด

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

ตอนนี้เราได้พิจารณาความแตกต่างด้านการรับรู้ของข้อความสีอ่อนบนพื้นหลังสีเข้มกับข้อความสีเข้มบนพื้นหลังสีอ่อนแล้ว

ทั้งหมดพร้อมกัน

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

หรือจะใช้ทั้งหมดร่วมกันด้วยการซ้อน CSS เพื่อความสนุกก็ได้

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

ผลลัพธ์คือประสบการณ์การอ่านที่ปรับแบบอักษรให้ตรงกับค่ากําหนดของผู้ใช้ ซอร์สโค้ดแบบเต็มมีอยู่ที่ด้านล่างใน Codepen