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

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

Adam Argyle

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

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

  • โหมดมืดจะลดการไล่ระดับสีลงเล็กน้อย
  • คอนทราสต์สูงจะทำให้แบบอักษรตัวหนาขึ้น
  • คอนทราสต์ต่ำจะทำให้แบบอักษรที่บางลง
https://codepen.io/argyleink/pen/mdQrqvj

โปรดทำความเข้าใจแต่ละส่วนของแบบอักษรของ 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;
  }
}

ตัวอย่างภาพหน้าจอของเดโมจนถึงขณะนี้ แบบอักษรใน 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