Trước tiên, bạn có thể hình dung một cách đơn giản: thiết kế website gồm 02 phần chính: thiết kế giao diện và lập trình. Khi designer hoàn thành bản thiết kế các thành phần của giao diện thì chính là lúc đội ngũ coder giúp cho những phần này hiển thị trên web. Việc tối ưu hóa UX/ UI trong thiết kế web giúp bạn trở nên thân thiện với người dùng, dễ dàng tiếp cận khách hàng tiềm năng. Để làm được điều này, bạn phải chú ý chọn màu sắc chủ đạo đồng bộ với phong cách thương hiệu (logo, slogan, sản phẩm/ dịch vụ kinh doanh…), hình ảnh minh họa… và đặc biệt là font chữ.
Oliver Reichenstein – chuyên gia thiết kế website, blogger nổi tiếng trong lĩnh vực UX/ UI, đã từng cho biết rằng: “95% thông tin trên website được truyền tải thông qua ngôn ngữ viết”. Tuy nhiên, không phải ai cũng chú ý chọn font chữ, kích thước chữ khi thiết kế website. Letweb sẽ chia sẻ với bạn một số kinh nghiệm chọn font chữ cho website ngay trong bài viết sau đây.
Nội dung
Đầu tiên, cũng là quan trọng nhất: font chữ phải đồng bộ với thương hiệu (logo, art direction, bộ nhận diện thương hiệu…). Nghe có vẻ hơi… cảm tính nhưng điều này rất cần thiết. Và bạn cần phải đồng bộ hóa font chữ website ngay từ khi thiết kế bộ nhận diện thương hiệu. Tùy vào đặc điểm của sản phẩm/ dịch vụ kinh doanh mà chọn font mềm mại, mạnh mẽ, đơn giản, cổ điển… hoặc hiện đại.
Có một thời gian, giới designer tranh cãi nhau về việc giữa các font Serif, Sans Serif và Script thì font nào là mới thực sự là xu hướng. Nhưng bạn hãy nhớ rằng, chạy theo xu hướng không phải lúc nào cũng tốt. Tìm được font đồng bộ và trung thành với cá tính thương hiệu mới là điều quan trọng. Như Coco Chanel từng nói: “Thời trang có thể phai tàn, nhưng phong cách luôn tồn tại vĩnh cửu”. Giống như vậy, xu hướng font chữ có thể phai tàn, nhưng phong cách của website luôn tồn tại vĩnh cữu!
3 nhóm font chữ Letweb vừa đề cập ở trên chính là 3 nhóm font chữ được sử dụng phổ biến nhất. Bạn cần phân biệt được sự khác nhau của chúng để chọn ra font phù hợp.
3 nhóm font phổ biến
Tại sao lại như vậy? Vì sự xuất hiện của nhiều font chữ sẽ làm cho cấu trúc trang web trở nên lộn xộn, thiếu chuyên nghiệp và có phần… kém sang. Số lượng lí tưởng nhất là 01 font trên cùng một trang web. Nhưng nếu bạn cảm thấy quá đơn điệu và không có giải pháp nào khác để tăng sự thu hút cho website thì có thể sử dụng nhiều font hơn, tối đa là 3. Đặc biệt, bạn nên cân nhắc kĩ lưỡng trước khi kết hợp các font thuộc nhóm khác nhau (Serif, Sans Serif, Script).
Đã bảo rồi mà, dùng ít font thôi nha!
Tìm font chuẩn ở đâu? Nói là “chuẩn” nhưng thật ra, đây là những font phổ biến, người dùng phản hồi tích cực và được các nhà cung cấp có uy tín giới thiệu. Google Web Fonts và Typekit là hai gợi ý dành cho bạn. Ngoài ra, các font được sử dụng nhiều như Arial, Calibri, Times New Roman… cũng là một số lựa chọn an toàn.
Nếu bài viết trên website có dòng quá dài thì người đọc rất khó tập trung vào văn bản, nhất là khi bài viết dài. Ngược lại, nếu dòng quá ngắn thì thì mắt của bạn phải chuyển dòng liên tục, gây ra cảm giác căng thẳng. Theo kết quả nghiên cứu của Baymard Institute, nếu muốn người dùng cảm thấy dễ dàng và thoải mái khi đọc thông tin trên website của bạn thì mỗi dòng có tối đa 60 kí tự. Riêng đối với phiên bản website mobile, số kí tự lí tưởng là từ 30-40.
Số liệu gợi ý của Baymard Institute
Trang web của bạn có thể được truy cập thì nhiều thiết bị có độ phân giải màn hình khác nhau. Do đó, kích thước chữ trên website có thể bị phóng to hoặc thu nhỏ bất thường. Điều bạn cần làm là sử dụng font chữ có tính linh hoạt cao, khi bị thay đổi kích thước thì vẫn dễ đọc. Sự đối khác nhau giữa font Roboto và Vivaldi bên dưới là một ví dụ điển hình:
Font chữ Roboto rất dễ đọc, ngay cả khi có kích thước nhỏ
Font Vivaldi với nhiều nét uốn lượn ấn tượng nhưng khi hiển thị kích thước nhỏ khá là khó đọc
Như bạn biết đấy, một vài font có thiết kế chữ “i” (i viết thường) và “L” (L viết hoa) khá giống nhau. Điều này khiến cho người đọc dễ hiểu lầm (xem ví dụ bên dưới). Bạn nên kiểm tra từng chữ của bộ font, kể cả viết hoa và viết thường để đảm bảo rằng chúng dễ dàng phân biệt với nhau.
Hai font chữ dễ gây nhầm lẫn “i” và “L”
VIẾT HOA TOÀN BỘ GÂY ẤN TƯỢNG VỚI NGƯỜI ĐỌC. QUAN ĐIỂM NÀY LÀ HỢP LÍ. TUY NHIÊN, CÁCH VIẾT HOA TOÀN BỘ CHỈ PHÙ HỢP KHI GHI TIÊU ĐỀ HOẶC VIẾT TẮT. NẾU CẢ BÀI ĐỀU VIẾT IN HOA THÌ SẼ KHIẾN CHO QUÁ TRÌNH ĐỌC BỊ CHẬM LẠI, THẬM CHÍ LÀ GÂY KHÓ CHỊU CHO NGƯỜI ĐỌC. Ví dụ điển hình là những dòng bạn vừa đọc ở trên.
Tiết kiệm là tốt, nhưng trong trường hợp này thì không cần thiết. Dãn cách dòng (hay còn được gọi là leading hoặc line height) là khoảng trắng giữa hai dòng. Khoảng trắng này phải cao hơn 30% chiều cao của kí tự, tương đương với 1.15 – 1.5px.
Khoảng trắng dãn cách giữa hai dòng vừa phải
Khoảng trắng dãn cách giữa hai dòng quá khít
Chọn font chữ cũng tốn nhiều thời gian và công sức không kém gì thiết kế giao diện website. Hy vọng với một số chia sẻ trên, Letweb đã giúp bạn có thêm kiến thức để áp dụng vào trang web của mình! Hãy đón đọc những bài chia sẻ kinh nghiệm thiết kế website tiếp theo của Letweb nhé!
Tham khảo: uxplanet.org, baymard.com
.Nguyên.
Khi bạn muốn yêu cầu dịch vụ, góp ý, thắc mắc về dự án thiết kế website của bạn, xin đừng ngại liên hệ với Letweb bằng form này hoặc:
CÔNG TY TNHH PHẦN MỀM VÀ TRUYỀN THÔNG VÂN TAY
Park 7, Vinhomes Central Park, Số 208 Nguyễn Hữu Cảnh, P.22, Q. Bình Thạnh
Điện thoại: 0919 1000 75 (Ms. Yến) – 028 3 636 3185 (Số máy bàn)
Email: [email protected] (Tiếng Việt), [email protected] (English)
Người đại diện: Bùi Nguyễn Quốc Toàn
P.7-43.OT07, Tầng 43, Park 7, Số 208, Nguyễn Hữu Cảnh, P.22, Q. Bình Thạnh, TP. HCM, Việt Nam
MST: 0312731527
Hotline: 0919 1000 75
Phone: 0283 6363 185
Email: [email protected]
