Font, kích thước, màu sắc

Font, kích thước và màu sắc là những cái cơ bản của việc làm giao diện (Click vào link để đọc qua để có thể nắm được). "Cơ bản" ở đây nghĩa là nó đc sử dụng rất nhiều và ở mọi nơi. Do đó, để setup và dùng nó 1 cách có hệ thống không đơn giản. Chủ yếu chúng ta cần xử lý 2 vấn đề:

Tái sử dụng/đồng nhất: Những phần giao diện giống nhau, có vai trò như nhau, thì sẽ có cùng 1 kiểu style. Ví dụ như tiêu đề ở page 1 và page 2 nếu không có gì đặc biệt, thì sẽ phải có cùng loại font, cùng màu chữ, cùng kích thước. Thông thường 1 website sẽ có 1 bộ nhận diện / design system, và bộ nhận diện này chỉ xoay quanh 1-2 font chữ và 4-5 màu sắc. do đó việc màu lặp đi lặp lại ở các trang / các phần giao diện sẽ là điều phổ biến.
Có khả năng thay đổi hàng loạt: Vì tính tái sử dụng, nên nếu có những thay đổi cho bộ nhận diện, thì phải thay đổi tất cả, toàn bộ các phần cũ. Việc này rất hay xảy ra ở giai đoạn đầu sản phẩm. Khi khách hàng muốn thử qua nhiều thay đổi để tìm cái hợp lý nhất. Do đó, việc code có hệ thống sẽ giúp giải quyết vấn đề này ngay từ đầu.

CSS Variables

Bạn cần học cách sử dụng css variable ngay từ đầu. Cơ bản là bạn tự đặt tên và tự đặt giá trị và dùng biến tự đặt đó ở nhiều nơi

Thay đổi giá trị CSS Variable thì có thể dùng JS để thay đổi ở cấp cao nhất

var r = document.querySelector(':root');
r.style.setProperty('--main-color', 'lightblue');

Hoặc thay đổi bằng cách thêm CSS vào cấp thấp hơn. Và giá trị này sẽ ghi đè nhưng chỉ tác dụng ở trong các element có CSS selector đó.

CSS Variables có thể dùng chung ở HTML, React và UI Builder. Với UI Builder ngoài việc dùng Custom CSS để khai báo/ghi đè CSS Variable thì có thể sử dụng phần thiết lập Global của nó

Font chữ

Để web bạn sử dụng các font chữ mới lạ theo yêu cầu của design, thì phải cài đặt font rồi mới có thể sử dụng, việc cài đặt chia làm 2 hướng

Font đó có thuộc Google Fonts không? Nếu có thì lên Google Fonts chọn và cài đặt, có hướng dẫn trên đó chỉ việc copy paste về.

UI Builder Elementor cũng hỗ trợ sẵn font của Google, chỉ việc search và chọn
Font đó không thuộc Google Fonts. Bạn phải có file font thì mới có thể tự cài loại font này. Khi đã có file font, thì lên trang transfronter để convert font thành định dạng tốt nhất cho web

Ngoài việc convert font ra, nó sẽ tự gen cho bạn code CSS để bạn copy vào dự án của mình.

Lưu ý: Để test font nên dùng thêm 1 thiết bị khác để test. Vì nhiều trường hợp font bạn cài sẵn trong máy cá nhân của bạn nên chỉ bạn mới nhìn thấy font đó còn người khác sẽ lỗi.

Màu sắc

Màu trong CSS có thể khai báo theo tên màu, mã HEX, mã RGB, mã HSL.
- Khai báo theo tên màu khá hạn chế vì số lượng ít, thường chủ yếu dùng "black", "white", "red".
- Khai báo theo mã HEX và RGB là phổ biến nhất. Có thể convert từ mã HEX sang RGB và ngược lại.
- Khi muốn thêm độ mờ/khả năng nhìn xuyên qua (Opacity), thì với RGB có thể thêm A vào thành RGBA. Với HEX có thể thêm 2 số vào cuối từ và trở thành mã HEX 8 số. Tham khảo các giá trị ở đây để điều chỉnh opacity từ 0% đến 100%

Kích thước

Đọc bài viết trong link gửi ở đầu bài về kích thước để hiểu thêm về kích thước, có kích thước tuyệt đối và tương đối. Kích thước loại px là phổ biến nhất tuy nhiên không nên dùng mà thay vào đó sử dụng rem.

Mặc định 1rem tương ứng với 16px. Nếu design của bạn sử dụng kích thước px theo bội của 4 hoặc 8 (16 20 24 28 32...) thì có thể không cần thay đổi rem mặc định.

Còn trường hợp design cảu bạn sử dụng kích thước không theo quy tắc gì cả, hoặc dùng theo bội của 5 (15 20 25 30,...) thì bạn nên đổi lại giá trị 1 rem tương ứng với 10px để chia không bị lẻ.

tại sao lại dùng rem? vì dùng rem bạn có thể tăng/giảm kích thước toàn bộ font chữ chỉ bằng 1 dòng CSS. Cái này hữu dụng trong trường hợp làm giao diện cho nhiều loại thiết bị khác nhau (desktop, mobile).

Như ví dụ này dùng media query để làm cho font chữ trên mobile nhỏ hơn 20%

Bài tập:

Tạo 1 trang web có chữ hello world ở giữa trang, trên nền xám, như hình
Có thể tạo bằng HTML, hoặc React, hoặc UI Builder
Sử dụng font Titillium Web, trên desktop (máy tính) kích thước 32px, ở điện thoại kích thước nhỏ hơn 12.5%;

Font, kích thước, màu sắc

Comments

[vn-vi] Đi sâu về việc giao diện website

Làm layout với Flexbox

More from this blog

CRUD dữ liệu, headless CMS

Login phần 2, API, Firebase Authentication

Login, Signup, kiểm tra tình trạng đăng nhập

Responsive Header