Knowledge

Typefaces

Serif

• Serif là kiểu chữ có chân. Chúng thể hiện sự chuyên nghiệp, đáng tin cậy và có chút "cổ điển". Serif nổi lên và được dùng nhiều ở các trang web đời đầu, mang đậm chất thông tin, báo chí, truyền thông. Một số Typeface phổ biến như: Time News Roman, Baskerville, Georgia...

• Serif được ưa chuộng ở những sản phẩm Information, hay những lĩnh vực kinh doanh thiên hướng truyền thống. Serif có tính biểu cảm mạnh, vì thế được khuyên dùng ở Displays, Heading để thể hiện một thông điệp cô đọng, rõ ràng và truyền cảm. Các nghiên cứu cũng chỉ ra rằng các font Serif làm giảm tốc độ đọc của người dùng, do đó chúng thường hạn chế (nghĩa là vẫn có thể) sử dụng cho Body text.

Sans-serif

• Sans Serif là kiểu chữ không chân. Thiết kế phông chữ truyền tải sự tối giản.Phù hợp với khán giả nhỏ tuổi và được kết hợp với các cách tiếp cận hiện đại, mới mẻ. Đó là lý do tại sao Sans Serifs thường được sử dụng bởi các công ty CNTT, công ty khởi nghiệp và studio thiết kế sáng tạo. Một số typefaces phổ biến như: Arial, Helvetica, Roboto,...

• Các sản phẩm Functionality đòi hỏi nhiều khả năng truy cập, sử dụng, tiếp nhận, phân biệt thông tin. Sans Serif fonts có tính dễ đọc, không gây mất tập trung, do đó chúng phù hợp ở mọi vị trí và chức năng. Chúng cũng được sử dụng để thể hiện, truyền tải những thông điệp mang tính mạnh mẽ, đột phá, táo bạo.

Script / Handwriting

• Script hay Handwriting là kiểu chữ mô phỏng chữ viết tay. Script fonts là một phông chữ được thiết kế để bắt chước giao diện của chữ viết tay. Cũng giống như chữ viết tay thật của con người, phông chữ viết tay có thể có nhiều dạng khác nhau - chúng có thể giản dị, vui tươi, trang trọng, trang trí công phu, v.v.

• Các thuật ngữ "Script" và "Handwriting" thường được sử dụng thay thế cho nhau. Script có thể được tạo bằng kỹ thuật số để bắt chước chữ viết tay, thì phông chữ Handwriting có thể dựa trên chữ viết tay thực, được tạo bằng tay bằng bút hoặc bút lông. Do đó, dù 2 khái niệm này là khá tương đương nhau nhưng Script fonts có phần "digital" hơn.

• Các fonts chữ viết tay thể hiện tính ngẫu hứng, cá nhân và mang đậm hơi hướng nghệ thuật. Do đó thường được sử dụng ở các sản phẩm đồ họa, in ấn phẩm hơn là Giao diện người dùng. Các Font chữ viết tay cố gắng mô phỏng lại nét chữ thật của con người. Hạn chế của chúng là chúng được lập trình, do đó các chữ cái sẽ hoàn toàn y hệt nhau, điều mà trên thực tế là không đúng. Do đó, Font chữ viết tay chỉ thường được sử dụng rất hiếm hoi, có thể dùng chúng trong Logo, hoặc điểm nhấn trong thiết kế ở văn bản chỉ có 1 từ, để tránh hạn chế nêu trên.

Unit

• Pixel (px)là điểm ảnh, là đơn vị phổ biến để đo lường và tính toán các kích thước liên quan đến hiển thị trên màn hình. Pixel là đơn vị đo lường tuyệt đối, nghĩa là sẽ không có sự thay đổi khi đối tượng được hiển thị trên những màn hình có kích thước khác nhau. Tuy nhiên, trên các màn hình có độ phân giải khác nhau thì có (cùng một kích thước nhưng màn hình có độ phân giải cao hơn sẽ hiển thị nhiều điểm ảnh hơn). Do đó, những đối tượng có kích thước pixel cố định có thể bị vỡ do phải phóng to kích thước, nhưng không đáp ứng được sự thay đổi về mặt số lượng điểm ảnh.

• REM là một thuật ngữ về đơn vị đo lường kích thước sử dụng trong lập trình hơn là thiết kế. REM cho phép các nhà phát triển tùy biến kích thước Pixel của thiết kế theo các tỷ lệ phù hợp để hiển thị trên nhiều kích thước và độ phân giải phù hợp. Những nhà phát triển không đặt giá trị px cho Text size, mà sử dụng REM/EM. Ví dụ, Body text được thiết kế với size 16px, sẽ được đặt là 1 rem, Title text size 20px được đặt là 1.25 rem.

• Font-size là một Property trong ngôn ngữ lập trình. Value có thể đặt là REM/EM/PX. Ví dụ, một Font-size cơ bản là 16px = 1rem. Khi đó, các kích thước văn bản được lập trình dưới đơn vị Rem. Sau đó, các nhà phát triển có thể thay đổi giá trị Font-size để thay đổi kích thước văn bản của toàn bộ trang web cho phù hợp với kích thước màn hình. Chẳng hạn, các nền tảng cho phép người dùng thay đổi kích thước văn bản, việc làm này chính là thay đổi giá trị Font-size. Lúc này, giá trị Font-size có thể được đặt thành 12px = 1rem (text sẽ nhỏ lại một tỷ lệ 12/16), hoặc 20px = 1rem (text sẽ tăng lên theo tỷ lệ 20/16).

Scale Ratio

• Design System luôn có một Typeset. Các Typeset khác nhau được xây dựng theo những quy tắc/công thức khác nhau tuỳ vào thương hiệu, tùy thuộc vào mục đích của Website (Functionality/Information).

• Một trong số các cách thức xây dựng Typeset đó là sử dụng Thang tỷ lệ (Scale Ratio).

• Thang tỉ lệ Scale Ratio dựa trên giá trị Base Size và một "Bội số chung - Scale" để xây dựng Typeset theo một tỷ lệ nhất định. Theo công thức này, các giá trị Size sẽ tăng hoặc giảm đi cùng một tỷ lệ so với Size liền kề, như trong ví dụ bên dưới là 1.125 lần.

• Scale Ratio là cơ sở tốt để xây dựng Typeset trong thiết kế giao diện. Việc sử dụng Scale Ratio và bám theo đơn vị REM/EM cho phép xây dựng một Typeset có tính tùy biến và thích nghi cao, dễ dàng thay đổi, áp dụng cho nhiều loại sản phẩm (Functionality/Information)

Create Typeset Tutorial

Step 1: Define Web Style & Typeface

• Information (content focus, marketing-based design)

• Functionality (task focus, product-based design)

Step 2: Define Root

Define text base size

• Desktop site thường có các giá trị sau: 16px, 18px

• Mobile, Responsive site thường có các giá trị sau: 14px, 16px

Define text scale ratio

• Small scales ( < 1.2) đơn giản và phù hợp cho ứng dụng trên thiết bị di động, web-app, hoặc responsive. Đặc điểm là text nhỏ, linh hoạt, phân cấp vừa đủ để đảm bảo không gian tối ưu cho lượng thông tin nhiều. Ví dụ, Spectrum Design System của Adobe đang xây dựng Type system với Scale 1.125 - Major Second cho các sản phẩm của họ.

• Medium scales (1.15–1.333) linh hoạt và hoạt động tốt cho nhiều web hướng Information. Đặc điểm là thường mang đến những thông điệp ngắn gọn, mạnh mẽ, hoặc lượng thông tin dạng văn bản dày đặc nên bộ scale trung bình đáp ứng bằng hệ thống phân cấp rõ ràng, rộng rãi, giúp tổ chức nội dung và các component được hiệu quả.

• Large scales (1.333 > ) có thể khó triển khai một cách hiệu quả, đòi hỏi cần có máu nghệ sĩ, bay nhảy chút mới có thể làm cân đối được, dòng này có thể hoạt động tốt cho các dạng website sống động, sáng tạo, thiên hướng cho các doanh nghiệp đầu tư, sáng tạo, marketing, agency và công nghệ.

Step 3: Create Typeset for larger device (Different with HTML tag: Web Structure & Search Engine)

Roles

• Heading: heading-01 → heading-06

• Body: body-01 (16px), body-02 (14px)

• Supporting

  1. button (14px/16px)

  2. label (14px + increase letter spacing)

  3. helper-text (12px + increase letter spacing)

• Display & callout: display, quote, paragraph (Optional - try to keep simple)

• Choose font-size fit Role (Scale Ratio)

• Choose font-weight fit Role (Web Style - có thể tinh chỉnh liên tục trong quá trình thiết kế)

Step 4: Create Typeset for small device (< 768px)

• Choose Scale Ratio smaller / Base size smaller / Both smaller

• Role from Body down try stay the same