Một khách hàng truy cập vào cửa hàng của bạn và quét nhìn thanh điều hướng. Trước khi đọc một nhãn nào, bộ não của họ đã xử lý kiểu chữ rồi. Các chữ cái tròn mềm mại? Thân thiện. Các chữ serif cao và chặt? Cao cấp. Font hệ thống cồng kềnh? Dễ quên. Tất cả điều này xảy ra trong khoảng 400 mili giây, theo nghiên cứu về nhận thức kiểu chữ, điều đó có nghĩa là font menu của bạn đang đưa ra những lời hứa thương hiệu mà bạn có thể chưa bao giờ có ý định đặt ra.
Hầu hết các cửa hàng Shopify sử dụng bất kỳ kiểu chữ nào được gửi kèm với chủ đề của họ và không bao giờ đặt câu hỏi về nó. Đó là một cơ hội bị bỏ lỡ. Điều hướng là yếu tố giao diện người dùng duy nhất có mặt trên mọi trang, được nhấp vào mỗi lần truy cập, và được quét trong mỗi ấn tượng đầu tiên. Làm tốt kiểu chữ của nó là một trong những quyết định liên quan đến thương hiệu có tác động cao nhất mà bạn có thể đưa ra mà không cần chạm vào một bức ảnh sản phẩm nào.
- Kiểu chữ giao tiếp cá tính thương hiệu trước khi những từ ngữ được đọc; khách hàng đưa ra những phán xét tin tưởng từ chính các chữ cái.
- Font serif báo hiệu truyền thống và chất lượng cao cấp; sans-serif hình học gợi ý tính hiện đại; sans-serif tròn cảm thấy dễ tiếp cận.
- Độ đậm font, khoảng cách chữ, và text-transform trong menu mang theo nhiều thông tin về thương hiệu như chính kiểu chữ.
- Hiệu suất quan trọng: mỗi font tùy chỉnh thêm 15-50 KB trọng lượng chặn kết xuất trừ khi tải chiến lược.
- Sử dụng kiểu chữ menu của bạn phù hợp với hệ thống thương hiệu rộng hơn tạo ra sự nhất quán về mặt hình ảnh dẫn đến tin tưởng.
Những danh mục kiểu chữ thực sự giao tiếp cái gì
Các nhà thiết kế kiểu chữ và chiến lược gia thương hiệu đã nghiên cứu rộng rãi nhận thức font. Những phát hiện này thực sự nhất quán: mọi người kết hợp các tính năng kiểu chữ cụ thể với các đặc điểm cá tính cụ thể, và những liên kết này diễn ra qua nhiều nền văn hóa.
Kiểu chữ Serif (Playfair Display, Cormorant, EB Garamond) mang lại những liên kết về di sản, quyền lực, và tinh tế. Các thương hiệu thương mại điện tử cao cấp rất dựa vào serif. Aesop sử dụng một serif sạch sẽ trong toàn bộ điều hướng của nó. Mejuri kết hợp một nhãn hiệu serif tinh tế với các nhãn menu sans-serif. Nếu thương hiệu của bạn bán các sản phẩm cao cấp và muốn giao tiếp chất lượng thủ công hoặc di sản, một serif trong điều hướng của bạn sẽ tăng cường thông điệp đó.
Sans-serif hình học (Inter, DM Sans, Montserrat) truyền đạt tính hiện đại, độ chính xác, và sự trung lập. Chúng là mặc định cho các thương hiệu DTC phục vụ công nghệ. Allbirds sử dụng một sans-serif hình học sạch sẽ trong điều hướng của nó phản chiếu bản chất sản phẩm của nó: đơn giản, hiện đại, không thừa. Nguy hiểm là tính chung chung. Vì sans-serif hình học phổ biến trong thương mại điện tử, bạn cần các yếu tố thiết kế khác (màu sắc, khoảng cách, độ đậm) để phân biệt.
Sans-serif nhân văn (Nunito, Source Sans Pro, Open Sans) thêm ấm áp mà không hy sinh khả năng đọc. Các hình dạng chữ cái của chúng bắt chước những thay đổi nét của viết tay, điều này làm cho chúng cảm thấy cá nhân hơn. Các thương hiệu nhắm tới gia đình, sức khỏe, hoặc hàng gia dụng thường được hưởng lợi từ các khuôn mặt nhân văn. Chúng dễ tiếp cận mà không trẻ con.
Sans-serif tròn (Varela Round, Comfortaa, Quicksand) cảm thấy thân thiện, vui nhộn, và trẻ trung. Nếu thương hiệu của bạn nhắm tới nhân khẩu học trẻ hơn hoặc bán các sản phẩm vui vẻ và nhẹ nhàng, các đầu tròn và đường cong mềm mại sẽ tăng cường vị trí định vị đó. Nhưng chúng có thể làm suy yếu sự nghiêm túc được cảm nhận đối với các sản phẩm kỹ thuật hoặc chuyên nghiệp.
Kiểu chữ display và trang trí hầu như không bao giờ nên xuất hiện trong điều hướng. Chúng được thiết kế cho các tiêu đề lớn, không phải nhãn menu 14px. Một script viết tay có thể hoạt động trong logo của bạn, nhưng khi áp dụng cho “Shop All” ở các kích thước nhỏ, nó trở nên không thể đọc được. Để dành các khuôn mặt display cho các phần hero và giữ điều hướng dễ đọc.
Độ đậm, khoảng cách, và trường hợp: những chi tiết mang lại ý nghĩa
Chọn một kiểu chữ chỉ là quyết định đầu tiên. Cách bạn đặt nó trong điều hướng của bạn mang lại những tín hiệu thương hiệu mạnh tương đương.
Độ đậm font ảnh hưởng đến quyền lực được cảm nhận. Một menu được đặt ở 300-weight (nhạt) cảm thấy tinh tế và tinh tế. Cùng một menu ở 600-weight (bán đậm) cảm thấy tự tin và trực tiếp. Glossier sử dụng các trọng lượng tương đối nhẹ trong toàn bộ giao diện của nó, tăng cường thẩm mỹ của nó mềm mại và dễ dàng. Gymshark sử dụng các trọng lượng đậm hơn phù hợp với danh tính hiệu suất năng lượng cao của nó.
Khoảng cách chữ (tracking) là một đòn bẩy tinh tế nhưng mạnh mẽ.
| Khoảng cách chữ | Nhận thức | Các thương hiệu ví dụ |
|---|---|---|
| Chặt (-0.5px đến 0) | Hiện đại, biên tập, cao cấp | Kith, SSENSE |
| Bình thường (0) | Trung lập, sạch sẽ, an toàn | Hầu hết các mặc định Shopify |
| Mở rộng (+1px đến +3px) | Tinh tế, sang trọng, kiến trúc | Aesop, Le Labo |
Các thương hiệu cao cấp thường kết hợp văn bản chữ hoa với khoảng cách chữ mở rộng trong điều hướng. Kỹ thuật này, đôi khi được gọi là “spaced caps”, tạo ra một nhịp điệu hình ảnh cảm thấy được xem xét và không vội vàng. Nó báo hiệu rằng thương hiệu chú ý đến các chi tiết.
Text-transform (chữ hoa so với sentence case so với chữ thường) cũng giao tiếp:
- CHỮ HOA: Khẳng định, hiện đại, biên tập. Hoạt động tốt cho các thương hiệu tối giản với ít mục menu. Có thể cảm thấy hung hăng nếu được sử dụng quá mức.
- Sentence case: Dễ tiếp cận, hội thoại, ấm áp. Phù hợp với các thương hiệu có giọng giao tiếp thân thiện và con người.
- chữ thường: Bình thường, đương đại, hướng thiết kế. Được sử dụng bởi các thương hiệu như glossier (cái mà nổi tiếng viết hoa tên của nó).
Cách sử dụng kiểu chữ menu của bạn phù hợp với hệ thống thương hiệu của bạn
Nếu thương hiệu của bạn đã có một hệ thống kiểu chữ được xác định, menu của bạn nên tuân theo nó. Nhưng điều hướng có những ràng buộc cụ thể mà các trang sản phẩm và bản sao tiếp thị không có.
Khả năng đọc ở các kích thước nhỏ. Các nhãn menu thường là 13-16px trên desktop và 14-17px trên di động. Không phải mọi kiểu chữ trông đẹp ở kích thước tiêu đề 48px đều vẫn dễ đọc ở 14px. Kiểm tra font thương hiệu của bạn ở quy mô điều hướng. Nếu x-height quá thấp hoặc các nét quá mỏng, hãy cân nhắc sử dụng một khuôn mặt bạn từ cùng một gia đình kiểu chữ. Ví dụ: nếu các tiêu đề của bạn sử dụng Playfair Display, điều hướng của bạn có thể sử dụng Playfair Display SC (small caps) hoặc chuyển sang một sans-serif bổ sung như Lato.
Sự nhất quán trong các trạng thái. Menu của bạn có nhiều trạng thái: mặc định, hover, hoạt động, và di động. Mỗi trạng thái nên sử dụng kiểu chữ cảm thấy gắn kết. Nếu trạng thái hover thay đổi trọng lượng font từ 400 thành 700, hãy đảm bảo trọng lượng nặng hơn không gây ra sự dịch chuyển bố cục (một vấn đề phổ biến với các font có chiều rộng thay đổi). Variable fonts giúp ở đây vì chúng cho phép các chuyển tiếp trọng lượng mượt mà mà không cần reflow bố cục.
Hệ thống phân cấp trong menu. Nếu bạn sử dụng một menu mega hoặc dropdown multi-cấp, bạn cần hệ thống phân cấp kiểu chữ: tiêu đề danh mục, liên kết danh mục phụ, và có thể các nhãn có tính năng. Sử dụng sự khác biệt về trọng lượng và kích thước từ một gia đình kiểu chữ duy nhất thay vì trộn nhiều kiểu chữ. Một font ở ba trọng lượng tạo ra hệ thống phân cấp sạch sẽ hơn so với ba font khác nhau.
Hiệu suất: chi phí của các font tùy chỉnh trong điều hướng
Mỗi font web tùy chỉnh mà điều hướng của bạn tải thêm trọng lượng. Một tệp Google Font WOFF2 điển hình có kích thước từ 15-50 KB trên mỗi trọng lượng trên mỗi kiểu. Nếu menu của bạn sử dụng một kiểu chữ ở hai trọng lượng (thường + đậm), đó là 30-100 KB. Thêm các biến thể italic và bạn có khả năng thêm 60-200 KB tài nguyên chặn kết xuất.
Điều hướng kết xuất ở trên nếp gấp trên mọi trang. Nếu font tùy chỉnh của bạn tải chậm, khách hàng sẽ thấy một flash văn bản không được tạo kiểu (FOUT) hoặc văn bản vô hình (FOIT) trong yếu tố UI nổi bật nhất trên trang. Cái nào cũng không phải là một ấn tượng đầu tiên tốt.
Các chiến lược thực tế để quản lý hiệu suất font trong điều hướng:
- Subset font của bạn để chỉ bao gồm các ký tự mà các nhãn menu của bạn sử dụng. Một bộ ký tự Latin-extended đầy đủ có thể là 45 KB; subsetting để chỉ A-Z, a-z, 0-9, và dấu chấm câu phổ biến có thể giảm xuống 12-18 KB.
- Sử dụng font-display: swap vì vậy văn bản điều hướng ngay lập tức có thể nhìn thấy được trong một font fallback, sau đó trao đổi thành font tùy chỉnh khi tải. Sự dịch chuyển hình ảnh ngắn hơn văn bản vô hình.
- Preload font điều hướng của bạn với
<link rel="preload" as="font">vì vậy trình duyệt ưu tiên nó. - Hãy xem xét các stack font hệ thống cho điều hướng nếu font thương hiệu của bạn nặng. Một stack font hệ thống được chọn cẩn thận (
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) kết xuất ngay lập tức và trông sạch sẽ trên mọi thiết bị. - Sử dụng variable fonts khi bạn cần nhiều trọng lượng. Một tệp font biến duy nhất thường nặng ít hơn hai tệp font tĩnh và mang lại cho bạn độ hạt mịn trọng lượng vô hạn.
Dữ liệu sử dụng Google Fonts cho thấy Inter, Roboto, và Open Sans vẫn là những web font được tải nhiều nhất toàn cầu, một phần vì tệp WOFF2 của chúng nhỏ gọn và kết xuất của chúng đáng tin cậy trên các trình duyệt. Nếu thương hiệu của bạn có thể thẩm định một trong những khuôn mặt hiệu suất này, bạn sẽ nhận được kiểu chữ tốt với mức phạt tải tối thiểu.
Các quyết định kiểu chữ cụ thể thương hiệu trong thực hành
Hãy xem xét ba cửa hàng Shopify khác nhau và cách các lựa chọn kiểu chữ trong menu của chúng sẽ khác nhau:
Một thương hiệu hàng da cổ có thể sử dụng Cormorant Garamond ở 400 weight, chữ hoa với khoảng cách chữ 2px. Nhãn menu: “LEATHER GOODS,” “HERITAGE,” “CRAFT.” Khuôn mặt serif, spaced caps, và thuật ngữ truyền thống đều tăng cường câu chuyện của thương hiệu về chất lượng và truyền thống.
Một thương hiệu giày thể thao DTC có thể sử dụng Inter ở 500 weight, sentence case với khoảng cách chữ chặt. Nhãn menu: “New drops,” “Men,” “Women,” “Collabs.” Sans-serif hình học, trọng lượng vừa phải, và bản sao bình thường phù hợp với vị trí định vị đương đại, gần giới streetwear của thương hiệu.
Một thương hiệu đồ chơi trẻ em có thể sử dụng Nunito ở 600 weight, sentence case với khoảng cách bình thường. Nhãn menu: “Shop by age,” “Best sellers,” “Gift ideas.” Khuôn mặt humanist tròn và trọng lượng thân thiện cảm thấy ấm áp và dễ tiếp cận, phù hợp với khách hàng mục tiêu của thương hiệu là các bậc cha mẹ.
Trong mỗi trường hợp, quyết định kiểu chữ không phải là tùy chọn thẩm mỹ. Nó là sự sắp xếp chiến lược.
Kiểm toán font menu của bạnMở cửa hàng của bạn ngay bây giờ và kiểm tra font điều hướng (nhấp chuột phải, Inspect Element, kiểm tra tab Computed để tìm font-family). Nó là font thương hiệu của bạn hay mặc định chủ đề? Nếu đó là mặc định, đó là fix đầu tiên của bạn. Các công cụ như Navi+ cho phép bạn ghi đè kiểu chữ điều hướng mà không cần chỉnh sửa mã chủ đề, vì vậy bạn có thể kiểm tra các khuôn mặt khác nhau trước khi cam kết.
Thực hiện thay đổi mà không phá vỡ trải nghiệm
Thay đổi kiểu chữ điều hướng có thể cảm thấy rủi ro vì menu có thể nhìn thấy ở mọi nơi. Một vài hướng dẫn cho một quá trình chuyển đổi trơn tru:
Bắt đầu với các điều chỉnh về độ đậm và khoảng cách trước khi thay đổi kiểu chữ hoàn toàn. Thường thì, chuyển từ 400 thành 500 weight hoặc thêm 0.5px khoảng cách chữ là đủ để thay đổi nhận thức mà không làm xáo trộn nhận biết.
Nếu bạn thay đổi kiểu chữ, hãy đảm bảo các số liệu của font mới (x-height, cap height, width) tương tự như font cũ. Điều này ngăn chặn những sự dịch chuyển bố cục có thể làm bối rối những khách hàng quay lại.
Kiểm tra với người dùng thực tế. Hiển thị ba đến năm khách hàng điều hướng được cập nhật và hỏi: “Điều này có cảm thấy như cửa hàng tương tự không?” Nếu họ do dự, sự thay đổi có thể quá nghiêm túc. Sự tiến hóa thương hiệu nên cảm thấy có ý định, không gây sốc.
Kiểu chữ trong điều hướng là một trong những chi tiết mà hầu hết khách hàng sẽ không bao giờ chú ý một cách có ý thức. Nhưng họ cảm thấy nó. Kiểu chữ đúng làm cho menu của bạn cảm thấy bản địa đối với thương hiệu của bạn. Cái sai tạo ra một không hài lòa tinh tế xói mòn niềm tin, một lần truy cập một lúc.
Bài viết này là một phần của hướng dẫn lớn hơn về Thiết kế menu và định danh thương hiệu: làm cho điều hướng cảm thấy như của cửa hàng bạn.