Typography
Typography là một yếu tố cơ bản trong thiết kế giao diện người dùng. Typography tốt tạo ra một cấu trúc thị giác chặt chẽ, đồng nhất, giúp trình bày nội dung một cách rõ ràng và hiệu quả đến người dùng.
Typeface
Mobase không sử dụng chính xác một font cố định nào, mà sẽ đưa ra lựa chọn các font có sẵn trên thiết bị.
System UI font family
Mobase sử dụng font chữ hệ thống, đây là các loại font chữ được sử dụng để hiển thị văn bản của hệ điều hành. Khi được sử dụng trên website, chúng sẽ mang lại cảm giác quen thuộc, không cần tốn thời giản tải về, và hỗ trợ nhiều bộ kí tự.
Các font chữ phổ biến như San Francisco sử dụng trên trình duyệt Safari (Mac OS và iOS); Neue Helvetica và Lucida Grande sử dụng cho các version cũ hơn của Mac OS. Segoe UI cho Windows, Roboto cho Android.
CSS class
Class | Value | Example |
|---|---|---|
font-sans | ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | Với hàng trăm tính năng, bạn có thể thực hiện mọi nhu cầu cuộc sống với siêu ứng dụng MoMo: Chuyển tiền, Gửi tiết kiệm, Vay nhanh, Đặt vé du lịch, Mua vé xem phim, Quyên góp, Mua sắm thanh toán… |
font-serif | ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; | Với hàng trăm tính năng, bạn có thể thực hiện mọi nhu cầu cuộc sống với siêu ứng dụng MoMo: Chuyển tiền, Gửi tiết kiệm, Vay nhanh, Đặt vé du lịch, Mua vé xem phim, Quyên góp, Mua sắm thanh toán… |
font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | Với hàng trăm tính năng, bạn có thể thực hiện mọi nhu cầu cuộc sống với siêu ứng dụng MoMo: Chuyển tiền, Gửi tiết kiệm, Vay nhanh, Đặt vé du lịch, Mua vé xem phim, Quyên góp, Mua sắm thanh toán… |
Font sizes token
Name | CSS variable | Value | Line height |
|---|---|---|---|
| xxs | --mobase-font-size-xxs | font-size:"0.625rem" | 1rem |
| xs | --mobase-font-size-xs | font-size:"0.75rem" | 1rem |
| sm | --mobase-font-size-sm | font-size:"0.875rem" | 1.25rem |
| base | --mobase-font-size-base | font-size:"1rem" | 1.5rem |
| lg | --mobase-font-size-lg | font-size:"1.125rem" | 1.75rem |
| xl | --mobase-font-size-xl | font-size:"1.25rem" | 1.75rem |
| 2xl | --mobase-font-size-2xl | font-size:"1.5rem" | 2rem |
| 3xl | --mobase-font-size-3xl | font-size:"1.875rem" | 2.25rem |
| 4xl | --mobase-font-size-4xl | font-size:"2.25rem" | 2.5rem |
| 5xl | --mobase-font-size-5xl | font-size:"3rem" | 1 |
| 6xl | --mobase-font-size-6xl | font-size:"3.75rem" | 1 |
| 7xl | --mobase-font-size-7xl | font-size:"4.5rem" | 1 |
| 8xl | --mobase-font-size-8xl | font-size:"6rem" | 1 |
| 9xl | --mobase-font-size-9xl | font-size:"8rem" | 1 |