Phông chữ

Roboto được sử dụng trong những trường hợp mà Simplon không thể. Nếu một kiểu chữ hệ thống là hoàn toàn cần thiết hoặc bắt buộc, Roboto là một phương án dự phòng chấp nhận được.

Khám phá các ví dụ sử dụng và ứng dụng bên dưới, nơi chúng tôi phác thảo những cách đúng và sai khi sử dụng hệ thống phông chữ và kiểu chữ của mình. Trong nhịp điệu thiết kế của chúng tôi, nội dung và kiểu chữ kết hợp với nhau như một điệu nhảy được phối hợp nhuần nhuyễn. Những quy tắc này hướng dẫn cách thức thiết kế nội dung và kiểu chữ trực quan phối hợp với nhau, đảm bảo chúng bổ trợ cho nhau để tạo nên sự kết hợp hoàn hảo giữa khả năng đọc, tính thẩm mỹ và bản sắc thương hiệu. Một số thách thức về mặt hình ảnh có thể được giải quyết bằng cách thay đổi nội dung, và một số thách thức về mặt nội dung cần các giải pháp trực quan.

Mặc dù bạn sẽ nhận được hướng dẫn về mặt khái niệm, nhưng các thông số kỹ thuật chính xác lại cố tình bị bỏ qua do tính đa dạng và năng động của các phương tiện mà thương hiệu của chúng tôi bao gồm. Các bộ phận, chẳng hạn như thiết kế in ấn hoặc thiết kế web, sẽ thiết lập thông số kỹ thuật riêng dựa trên các nguyên tắc chỉ đạo này để phù hợp với các thông lệ tốt nhất của từng phương tiện.

Sử dụng phông chữ Simplon Norm Bold ở kích thước lớn để giúp những tuyên bố hùng hồn, mạnh mẽ của chúng ta tạo nên tác động lớn.

Dành nhiều khoảng trống cho tiêu đề lớn. Hãy để thông điệp tự nói lên giá trị của nó mà không bị che khuất bởi đồ họa thừa hay sự chồng chéo với nội dung khác.

Các câu có sức tác động lớn, in đậm nên được trình bày chặt chẽ; tối đa 3-5 từ. Có thể sử dụng dấu câu để tạo sự kịch tính bằng dấu chấm hoặc dấu hỏi. Dấu câu và cách viết câu phải luôn được sử dụng cùng nhau và không được sử dụng sai.

Đôi khi chúng ta cần truyền tải một thông điệp mạnh mẽ không chỉ trong 3-5 từ. Hãy sử dụng phông chữ có độ đậm thông thường nhưng vẫn giữ nguyên kích thước chữ, khoảng cách, dấu câu và quy tắc viết hoa chữ thường.

Tiêu đề và tuyên bố tác động thường có kích thước lớn và yêu cầu chiều cao dòng phải nhỏ hơn so với nội dung chính. Khuyến nghị chiều cao dòng phải tương ứng 100% với cỡ chữ, nhưng có thể điều chỉnh tùy theo từng phương tiện. Chỉ cần tránh kéo dài và nén chiều cao dòng đến điểm các nét xuống và nét lên chạm vào phần văn bản tác động.

Tiêu đề và tuyên bố tác động thường có kích thước lớn và yêu cầu chiều cao dòng phải nhỏ hơn so với nội dung chính. Khuyến nghị chiều cao dòng phải tương ứng 100% với cỡ chữ, nhưng có thể điều chỉnh tùy theo từng phương tiện. Chỉ cần tránh kéo dài và nén chiều cao dòng đến điểm các nét xuống và nét lên chạm vào phần văn bản tác động.

Không nên sử dụng độ đậm ở kích thước nhỏ vì nó sẽ gây ra một số vấn đề về khả năng đọc khi chữ nhỏ dần. Chúng ta cần duy trì độ tương phản và thứ tự cao cho nội dung, vì vậy hãy sử dụng kích thước, màu sắc và độ đậm để giúp trang dễ đọc hơn.

Đừng sử dụng phương pháp xử lý tác động để nêu rõ điều hiển nhiên. Hãy sử dụng gạch chân, tiêu đề phụ hoặc tiêu đề phụ để giữ cho các khối này trong ngữ cảnh.

Sử dụng màu chữ để tạo trải nghiệm đọc thoải mái và sử dụng màu sắc gợi lên hành động. Không bao giờ sử dụng màu chữ động làm tiêu đề. Hãy giữ màu Xanh lam cho hành động và liên kết, tránh sử dụng cho chữ tĩnh. Hãy đảm bảo xem lại các hướng dẫn về khả năng truy cập sau đây để biết các yêu cầu về độ tương phản chữ phù hợp.

Để đảm bảo càng nhiều khách hàng càng tốt có được trải nghiệm nhất quán, chúng tôi luôn muốn duy trì khả năng tiếp cận dễ dàng nhất có thể. Một cách để thực hiện điều này là tuân thủ các hướng dẫn WCAG 2.1 về tỷ lệ tương phản cho văn bản.

Dưới đây, bạn sẽ thấy tỷ lệ tương phản tối thiểu được chấp nhận cho các bảng màu chính của chúng tôi làm màu nền. Chế độ Overlayd sẽ hiển thị các màu văn bản khác nhau được chấp nhận từ bảng màu của chúng tôi. "Tối thiểu" ở đây có nghĩa là chúng tôi xác định văn bản sáng nhất trên nền sáng hơn có thể được sử dụng để đáp ứng tiêu chuẩn AAA. Màu này, bao gồm bất kỳ màu tối hơn nào trong nhóm sắc thái, đều có thể được sử dụng. Và ngược lại đối với nền tối và văn bản sáng hơn.

Xin lưu ý rằng nếu màu chữ được hiển thị đậm thì nó chỉ đạt tiêu chuẩn AA và nên tránh sử dụng ở các ứng dụng có phông chữ nhỏ, nhẹ.

Chúng tôi chỉ hiển thị các màu văn bản được đề xuất. Không nên sử dụng các màu tím, cam, vàng và xanh ngọc cho văn bản.