Thiết kế web chữ đậm dùng chữ nặng và các khối dứt khoát để thông điệp cùng nút hành động luôn dễ thấy. Phong cách Chữ đậm, bố cục khỏe chỉ mạnh thật khi có thứ bậc, để khách không phải đọc toàn bộ mới hiểu.
Độ đậm cũng như sức lực: dùng hết ở mọi chỗ thì không còn gì để nhấn. Hãy luyện cách phân bổ qua năm bài tập, mỗi bài có đề, bản chưa tốt và bản sửa. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Mẫu Thể Lực Việt có thang độ đậm thế nào?
Là một ví dụ thiết kế web chữ đậm, mẫu Thể Lực Việt có bốn mức rõ: tiêu đề rất đậm, tên thẻ đậm vừa, mô tả chữ thường và nhãn nhỏ có chữ thưa. Banner là chỗ mạnh nhất, với “Vững thể lực.” màu trắng và “Bền mục tiêu.” màu xanh trên ảnh phòng tập tối.
Với thiết kế web chữ đậm, độ tương phản vẫn cần được kiểm tra. Theo tiêu chí tương phản tối thiểu của WCAG, chữ đậm từ 14pt trở lên được tính là chữ lớn và cần đạt ít nhất 3:1 so với nền, còn chữ thường cỡ nhỏ cần 4,5:1.
Các khu bên dưới dùng chung một cách xếp: cột trái là tiêu đề viết hoa rất đậm, cột phải là nội dung. Có khu thiết bị, khu dự án nền đen, khu lý do, khu sản phẩm, khu lời khách, dải quy trình trên ảnh tối và dải xanh mời liên hệ.
Điểm khỏe của mẫu là nhìn lướt cột trái đã biết trang nói gì. Điểm cần cân nhắc là các tiêu đề khu đều nặng như nhau, và mô tả trong thẻ thiết bị khá nhỏ so với phần còn lại. Đây là nhận xét từ ảnh tĩnh, chưa kiểm tra trên trang chạy thật.
Bài tập 1: chọn một câu được đậm nhất
Mỗi màn hình chỉ nên có một câu ở mức đậm nhất, và câu đó phải là thông điệp chính. Hãy chọn thông điệp trước, rồi mới chọn cỡ chữ.
- Đề bài: viết banner cho một phòng tập.
- Bản chưa tốt: tiêu đề, câu mô tả và ba lợi ích cùng đậm.
- Bản sửa: chỉ tiêu đề rất đậm, câu mô tả chữ thường, ba lợi ích thu thành biểu tượng nhỏ.
Nếu không chọn được câu nào, nghĩa là thông điệp chưa rõ. Khi đó nên quay lại viết nội dung, vì chữ đậm chỉ làm một câu mơ hồ trở nên ồn ào hơn.
Bài tập 2: tách bốn mức đậm cho rõ
Các mức đậm phải cách nhau đủ xa để mắt thấy khác biệt, thường là tiêu đề rất đậm, tiêu đề phụ đậm vừa, thân bài thường. Hai mức quá gần nhau sẽ trông như một lỗi.
- Đề bài: trình bày một thẻ sản phẩm.
- Bản chưa tốt: tên sản phẩm độ đậm 700, mô tả độ đậm 600.
- Bản sửa: tên độ đậm 800, mô tả độ đậm 400, nhãn nhỏ độ đậm 500 có chữ thưa.
Các số trên là mốc đề xuất để luyện, cần chỉnh theo phông chữ bạn chọn. Hãy kiểm tra phông có đủ các độ đậm và dấu tiếng Việt, vì phông thiếu độ đậm sẽ bị trình duyệt làm đậm giả, nét rất xấu. Chỉ tải những độ đậm thực sự dùng, để trang vẫn nhẹ.
Bài tập 3: phân bậc các tiêu đề khu
Nếu mọi tiêu đề khu cùng nặng, trang chỉ còn một nhịp đều và khách khó biết khu nào quan trọng. Hãy cho khu chính giữ mức nặng nhất, còn các khu phụ nhẹ hơn một mức.
- Đề bài: sắp xếp sáu khu của một trang giới thiệu.
- Bản chưa tốt: sáu tiêu đề viết hoa, cùng cỡ, cùng độ đậm.
- Bản sửa: hai khu chính viết hoa cỡ lớn, bốn khu phụ cỡ vừa và không viết hoa.
Hãy đặt tiêu đề theo câu hỏi của khách, rồi trả lời ngắn ở ngay dòng đầu. Khoảng cách giữa các khu cũng cần đủ thoáng, nếu không các khối đậm sẽ dính vào nhau thành một mảng nặng.
Bài tập 4: đặt chữ đậm lên ảnh mà không mất nét
Chữ đậm đứng trên ảnh được khi vùng phía sau đủ tối và ít chi tiết. Ảnh nhiều chi tiết ở chỗ đặt chữ sẽ ăn mất dấu tiếng Việt, kể cả khi chữ rất dày.
- Đề bài: đặt tiêu đề hai dòng lên ảnh phòng tập.
- Bản chưa tốt: chữ màu nằm ngay trên người và thiết bị.
- Bản sửa: chọn ảnh có khoảng tối một bên, thêm lớp phủ dần về phía chữ, giữ chữ trắng cho dòng quan trọng.
Mẫu gốc có một chỗ đáng soi: dòng xanh “Bền mục tiêu.” nằm trên ảnh tối, nhìn kém nổi hơn dòng trắng phía trên. Khi làm thật, hãy đo độ tương phản trên đúng vùng ảnh sau chữ.
Bài tập 5: cho nút và điện thoại một lực riêng
Nút phải thắng được các tiêu đề đậm xung quanh bằng màu và khoảng trống, không phải bằng cỡ chữ lớn hơn nữa. Trên điện thoại, cỡ chữ tiêu đề cần giảm để không vỡ dòng xấu.
- Đề bài: đặt lời mời cuối trang và thử trên điện thoại.
- Bản chưa tốt: tiêu đề khổng lồ đẩy nút xuống màn hình sau, mỗi dòng còn một từ.
- Bản sửa: tiêu đề ngắn lại, nút rộng gần hết màn hình, có một màu riêng không dùng cho tiêu đề.
Viết tiêu đề ngắn sẽ dễ hơn thu nhỏ một câu dài. Đọc thử trên điện thoại thật, nếu một từ bị ngắt giữa chừng thì sửa câu chữ trước khi sửa cỡ chữ.
Ba ngành dùng thang độ đậm ra sao?
Khi áp dụng thiết kế web chữ đậm, phòng tập nhấn vào sức mạnh, hãng vận tải dồn lực vào một câu khổng lồ, còn đơn vị bán thép chia lực cho các quy cách. Cả ba đều là thương hiệu giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.
Phòng tập đấm bốc: đậm trên ảnh tối
Phòng tập giả định Găng Thép đặt “ĐẤM ĐÚNG. ĐỨNG VỮNG.” trên ảnh tối, ngay dưới là dải đỏ với bốn nhóm người tập. Khối một buổi tập dùng số đen to cho bốn bước, câu giải thích để chữ thường. Lịch tuần chỉ làm đậm tên lớp, các giờ trong bảng là lịch mẫu, không phải lịch thật.
Hãng vận tải: một câu chiếm cả banner
Hãng giả định Vận Tải Bền có tiêu đề ba dòng “HÀNG ĐI. ĐÚNG XE. ĐÚNG CHỖ.” màu đen trên nền vàng, cạnh xe tải đang chạy. Khối “CHỞ GÌ?” chỉ có nhãn ngắn trên sáu ảnh, nên đọc rất nhanh. Bản đồ tuyến chạy không ghi tên tỉnh nào, còn bốn số lớn nối bốn bước từ báo hàng tới giao nhận.
Bán vật liệu thép: đậm để tra cứu
Đơn vị giả định Thép Vững dùng chữ đậm để gọi tên từng loại, từ thép hình, thép tấm, thép ống tới thép cuộn. Dải xanh đọc mặt cắt vẽ bốn hình I, H, U và hộp bằng nét trắng, không ghi kích thước. Nút cam là màu riêng cho hành động “Gửi danh sách”, còn cột số 01 đến 04 ở cạnh phải banner tạo cảm giác hồ sơ kỹ thuật.
12 ngành khác nên đặt mức đậm nhất vào đâu?
Ngành cần tốc độ đặt mức đậm nhất vào lời hứa dịch vụ đúng sự thật, ngành kỹ thuật đặt vào tên sản phẩm, còn ngành sự kiện đặt vào tên chương trình. Dưới đây là 12 ngành khác cùng chỗ nên ưu tiên.
- Thi công xây dựng: tên loại công trình đang nhận.
- Cho thuê máy công trình: tên từng loại máy.
- Sửa xe tải: tên lỗi thường gặp.
- Đội chữa cháy dân lập: số điện thoại và tên dịch vụ.
- Giải chạy cộng đồng: tên giải và ngày diễn ra.
- Câu lạc bộ võ thuật: tên môn và lớp theo tuổi.
- Đội bóng bán chuyên: tên đội và lịch trận đấu.
- Trung tâm dạy lái xe: tên hạng bằng đang đào tạo.
- Bán lốp xe: cỡ lốp và loại xe.
- Đồ phượt ngoài trời: tên chuyến đi hợp với sản phẩm.
- Quán burger: tên món đang bán chạy trong ngày, nếu có dữ liệu thật.
- Xưởng cơ khí: tên khâu gia công có thể nhận.
Khi nào không nên chọn thiết kế web chữ đậm?
Không nên chọn thiết kế web chữ đậm khi nội dung cần đọc dài và chậm, hoặc khi khách đang lo lắng, cần được trấn an. Một trang toàn chữ nặng có thể tạo cảm giác bị thúc ép, nhất là với dịch vụ chăm sóc.
Nếu chỉ cần một dòng mở đầu thật lớn, lối tiêu đề lớn nhẹ tay hơn ở các khu sau. Khi muốn sức mạnh đến từ màu hơn là nét chữ, hãy so với phong cách tương phản mạnh mẽ. Còn nếu nội dung dài là chính, bố cục cô đọng, dễ đọc sẽ hợp hơn.
Câu hỏi thường gặp về thiết kế web chữ đậm
Có nên viết hoa toàn bộ tiêu đề không?
Chỉ nên viết hoa tiêu đề ngắn. Câu dài viết hoa khó đọc hơn, và dấu tiếng Việt dễ chạm dòng trên nếu khoảng cách dòng quá sát.
Phông chữ đậm có làm trang nặng không?
Mỗi độ đậm thường là một tệp riêng, nên chỉ tải hai hoặc ba độ đậm thật sự dùng. Với phông biến thiên, hãy kiểm tra dung lượng trước khi chọn.
Thương hiệu nhỏ có hợp phong cách này không?
Hợp nếu có một thông điệp rõ và đúng sự thật. Quy mô không quan trọng bằng việc câu chữ có đủ cụ thể để xứng với độ đậm đó hay không.
Nên làm gì trước khi chọn thiết kế web chữ đậm?
Hãy làm bài tập đầu tiên với đúng thông điệp của bạn: viết một câu, in thật đậm, dán lên tường rồi đứng xa nhìn. Nếu câu đó vẫn đúng và không ngại, bạn đã có điểm tựa cho cả trang.
Khi đã có câu ấy, bạn có thể đọc các bước Mạnh An AI thiết kế và bàn giao website và xem bảng giá thiết kế website AI. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi thông điệp chính để trao đổi trước khi bắt đầu.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
