Typeface http://beau.vn/vi vi 8 lưu ý cho designer khi sử dụng typography trong thiết kế http://beau.vn/vi/goc-nhin/8-luu-y-cho-designer-khi-su-dung-typography-trong-thiet-ke <span class="field field--name-title field--type-string field--label-hidden">8 lưu ý cho designer khi sử dụng typography trong thiết kế</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/85" typeof="schema:Person" property="schema:name" datatype="">content2</span></span> <span class="field field--name-created field--type-created field--label-hidden">CN, 05/14/2023 - 20:18</span> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02" hreflang="vi">UX/UI</a> <p><span id="cke_bm_1223S" style="display: none;"> </span></p> <p>Typography là cách để chúng ta giao tiếp với người dùng. Thiết kế và độ dễ đọc của typography có ảnh hưởng lớn tới trải nghiệm người dùng trên các sản phẩm số. Typography có thể trở thành tiếng nói của thiết kế. Typeface phù hợp sẽ tạo ra cảm xúc, đồng thời truyền tải thông điệp tới người dùng. Bài viết hôm nay sẽ trình này những tips để bạn có thể lựa chọn typeface được phù hợp cho thiết kế của mình.</p> <a href="/vi/typo" hreflang="vi">Typo</a> <a href="/vi/typeface" hreflang="vi">Typeface</a> <a href="/vi/thiet-ke-typeface" hreflang="vi">thiết kế typeface</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2023-05/cover_6.jpg" alt="8 lưu ý cho designer khi sử dụng typography"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p style="line-height:1.38; text-align:justify">Typography có thể trở thành tiếng nói của thiết kế. Typeface phù hợp sẽ tạo ra cảm xúc, đồng thời truyền tải thông điệp tới người dùng.&nbsp;</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">Thiết kế UI: Những yếu tố cơ bản trong Typography những &quot;tay mơ&quot; cần biết <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/4-nhan-to-tao-nen-thuong-hieu-doanh-nghiep-vung-manh">4 nhân tố tạo nên thương hiệu doanh nghiệp vững mạnh: Logo, Typeface và font, Image, Style guideline <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Typography là cách để chúng ta giao tiếp với người dùng. Thiết kế và độ dễ đọc của typography có ảnh hưởng lớn tới trải nghiệm người dùng trên các sản phẩm số. Typography có thể trở thành tiếng nói của thiết kế. Typeface phù hợp sẽ tạo ra cảm xúc, đồng thời truyền tải thông điệp tới người dùng. Bài viết hôm nay sẽ trình này những tips để bạn có thể lựa chọn typeface được phù hợp cho thiết kế của mình.</p> <h2>1. Phân cấp thị giác cho typography</h2> <p><img alt="Phân cấp thị giác cho typography" data-entity-type="file" data-entity-uuid="e3cf6ebe-da6d-48ff-a5a7-ade4cff5637f" height="748" src="/sites/default/files/A%CC%89nh_trong_ba%CC%80i%20%281%29_0.jpg" width="1200" /></p> <p>Để thiết kế thân thiện với người dùng, mọi element cần được tổ chức, sắp xếp một cách rõ ràng. Chúng ta nên có một cấu trúc phân cấp cho các yếu tố sử dụng trên giao diện. Từ đó, người dùng mới có thể dễ dàng đọc và tìm nội dung.</p> <p>Phân cấp thị giác có thể chia thành nhiều phần khác nhau. Một trong số ấy liên quan chặt chẽ tới nội dung của website, gồm: heading, subheading, body text, caption,... &nbsp;Chúng sẽ được phân cấp với kích thước, weight và màu sắc.</p> <p>Một phân cấp typography rõ ràng khiến văn bản có thể được quét và nắm thông tin một cách nhanh chóng. Hơn thế nữa, nó cũng sẽ highlight những văn bản quan trọng, thu hút người dùng và đẩy tương tác.</p> <h2>2. Cân nhắc bối cảnh và đối tượng khi lựa chọn typography</h2> <p><img alt="Cân nhắc bối cảnh và đối tượng" data-entity-type="file" data-entity-uuid="caab573e-e20b-4351-9878-03ea3a338cae" height="748" src="/sites/default/files/A%CC%89nh_trong_ba%CC%80i-1_2.jpg" width="1200" /></p> <p>Khi chọn font chữ, chúng ta cần xét tới bối cảnh cùng khán giả mục tiêu. Mỗi font chữ lại chứa cảm xúc riêng, có thể là thân thiện, hài hướng, nghiêm túc,...</p> <p>Thiết kế của font chữ sẽ tác động tới ấn tượng của người dùng về sản phẩm. Nếu font chữ không truyền tải đúng cảm xúc của sản phẩm có thể tạo ra sự hiểu nhầm cho người dùng. Ví dụ, nếu chọn một font chữ hài hước, vui nhộn cho một website doanh nghiệp, có thể khiến người dùng cảm thấy doanh nghiệp ấy không uy tín. Hay một font chữ cơ bản có thể sẽ nhạt nhẽo với đối tượng khách hàng trẻ.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/10-quy-tac-ung-dung-typography-cho-thiet-ke-ui-dung-cach" target="_blank">10 quy tắc ứng dụng typography cho thiết kế UI đúng cách</a></strong></p> <h2>3. Thật chú ý tới typography trên mobile&nbsp;</h2> <p><img alt="Thật chú ý tới typography trên mobile " data-entity-type="file" data-entity-uuid="343d8100-f9df-4160-b981-a7b45a4f23c1" height="748" src="/sites/default/files/A%CC%89nh_trong_ba%CC%80i-2_0.jpg" width="1200" /></p> <p>Khi chúng ta thiết kế giao diện, không tránh khỏi việc chúng ta sẽ phải thiết kế &nbsp;giao diện mobile, nơi không có nhiều không gian cho typography. Với kích thước màn hình nhỏ, thiết kế mobile luôn là thách thức đối với designer khi phải giải quyết hạn chế ây mà không làm mất đi tinh thần và chức năng của thiết kế. Typography trên các thiết bị mobile đòi hỏi sự tỉ mỉ, từ kích thước tới tracking và leading.</p> <p>So với giao diện máy tính, typography trên mobile khó để có độ dễ đọc hơn. Kích thước font không nên quá nhỏ nếu không sẽ không thể đọc. Nhưng nếu để nó quá to thì cũng sẽ không thể đưa vừa với màn hình. Ngoài ra, chúng ta cũng phải quan tâm tới độ tương phản, bởi tương phản quá cao sẽ gây hại tới mắt người dùng.</p> <p>Chúng ta cũng nên chú ý tới chức năng của typography. Giao diện mobile sẽ có nhiều văn bản chưa link, chúng ta cần đảm bảo khả năng sử dụng của chúng. Nếu phần link quá nhỏ có thể khiến người dùng khó mở link bằng ngón tay.</p> <h2>Tối giản để tối ưu</h2> <p>Đôi khi, designer cố gắng thử nghiệm những phong cách cùng với nhiều typeface khác lạ. Tuy nhiên, với giao diện người dùng, hầu hết những thứ ấy sẽ không hiệu quả. Khiến thiết kế trở nên quá tải là điều không cần thiết, nó cũng làm chúng ta quên mất chi tiết và mục tiêu thiết kế.</p> <p>Những người có kinh nghiệm sẽ giữ số font từ 2 đến 3 trong một layout. Với số lượng ấy, nó tạo ra tương phản giữa các nhóm văn bản, đồng thời vẫn giữ được cân bằng và thông điệp của thiết kế. Việc sử dụng style font cũng nên được hạn chế, nó giúp thiết kế có nhịp điệu và chính phụ, tuy nhiên, nếu làm dụng thì sẽ không biết đâu là chính, đâu là phụ nữ.</p> <p>Ngoài ra, nội dung thiết kế không nên khiến người dùng bối rối với những thông tin không cần thiết. Tất nhiên, nội dung là việc của copywriter, nhưng chúng ta cũng nên xét liệu nội dung ấy có thích hợp với thiết kế của chúng ta không.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung" target="_blank">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triể</a>n</strong></p> <h2>Chữ cũng cần thở</h2> <p>Độ dễ đọc của typography liên quan chặt tới khoảng trống, giữa các chữ cái, giữa các từ và giữa các dòng. Quá trình điều chỉnh các khoảng cách ấy là tracking, kerning và leading.&nbsp;</p> <p>Typography thiếu khoảng trống, các chữ cái quá sát nhau khiến văn bản trở nên khó đọc. Ngược lại, khoảng trống hợp lý khiến văn bản tự nhiên hơn, cho mắt của người dùng được dễ dàng lướt và đọc, tránh việc khó đọc, nhầm dòng khi đọc. Tuy nhiên, khoảng trống quá lớn cũng không tốt. Nó khiến văn bản rời rạc, thiếu thống nhất.</p> <h2><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke" target="_blank">Làm typography là khoa học</a>, điều chỉnh typography là nghệ thuật</h2> <p><img alt="Làm typography là khoa học, điều chỉnh typography là nghệ thuật" data-entity-type="file" data-entity-uuid="c62a8906-dad4-4f4b-8506-8a773d1f17b0" height="748" src="/sites/default/files/A%CC%89nh_trong_ba%CC%80i3.jpg" width="1200" /></p> <p>Typography là một bộ môn phức tạp, nó bao gồm rất nhiều quy tắc và nguyên lý. Chúng ta chỉ có thể tao ra typo rõ ràng khi chúng ta hiểu rõ được những quy tắc đó. Thế nhưng đúng thôi là chưa đủ. Khách hàng luôn đòi hỏi tính độc bản và cảm xúc cho thiết kế. Designer cũng không nên chối bỏ tâm hồn nghệ sĩ của mình, chúng ta cần nó để tạo ra vẻ đẹp và sự độc đáo cho thiết kế. Điều quan trọng là chúng ta tìm được điểm cân bằng giữa hai thứ ấy, khoa học và nghệ thuật của typography.</p> <h2>Những lưu ý về màu sắc của typography</h2> <p>Có thể nhiều người nghĩ màu sắc chẳng liên quan gì tới typography. Tuy nhiên, điều hiển nhiên là khi dùng typography chúng ta vẫn cần chọn màu cho nó. Và chúng ta có một số lưu ý khi lựa chọn màu sắc của typography khi thiết kế như sau:</p> <ul> <li><strong>Tạo tương phản</strong>. Màu sắc rực rỡ không phải khi nào cũng tốt. Trong nhiều trường hợp, typography rực rỡ không tạo ra hiệu quả về độ dễ đọc. Điều quan trọng nhất đối với màu của typography là độ tương phản. Tương phản giữa chữ và nền cần đủ vừa đủ để tạo độ dễ đọc, đồng thời, không khiến mắt người dùng bị mỏi khi đọc.</li> <li><strong>Đừng dùng nhiều màu</strong>. Một lần nữa, không nên cố gắng làm phức tạo mọi thứ. Nhiều màu tạo ra sự thiếu tập trung, thiết kế cũng sẽ thiếu chuyên nghiệp.</li> <li><strong>Sự hài hòa của màu</strong>. Điều chỉnh typography như một nghệ sĩ, và màu sắc cũng không ngoại lệ. Ứng dụng lý thuyết màu để tạo sự hài hòa cho màu sắc của typo và thiết kế.</li> <li><strong>Cẩn thận với hiệu ứng.</strong> Các màu neon, kinh lại, phát sáng không phải lúc nào cũng phù hợp với màn hình thiết bị điện tử. Hãy cẩn thận.</li> </ul> <h2>Nắm chắc kiến thức nền tảng của typography</h2> <p>Nghe thì khá hiển nhiên nhưng một số designer vẫn cứ phớt lờ những kiến thức ấy. Họ phụ thuộc quá nhiều vào công cụ và font chữ có sẵn. Nhưng khi thiếu kiến thức căn bản, rất khó để chúng ta biết chúng ta nên chọn gì và điều chỉnh nó ra sao.</p> <p><strong>Đọc thêm:&nbsp;<a href="Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ" target="_blank">Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ</a></strong></p> <p>Để tránh khỏi điều ấy và để dành cho những ai muốn theo đuổi con đường dài với typography, dưới đây là một số cuốn sách về typography mà chúng tôi nghĩ rằng bất cứ designer nào cũng nên đọc:</p> <ul> <li><a href="https://www.amazon.com/exec/obidos/ASIN/0881792063/braipick-20" target="_blank">The Elements of Typographic Style</a> bởi Robert Bringhurst.</li> <li><a href="https://www.amazon.com/exec/obidos/ASIN/3721200438/braipick-20" target="_blank">Typographie: A Manual of Design</a> bởi Emil Ruder.&nbsp;</li> <li><a href="https://www.amazon.com/exec/obidos/ASIN/1592406521/braipick-20" target="_blank">Just My Type: A Book About Fonts</a> bởi Simon Garfield.<br /> &nbsp;</li> </ul> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/cai-thien-hanh-trinh-trai-nghiem-khach-hang-chat-luong-qua-nhung-diem-cham-tinh-te" hreflang="vi">Cải thiện hành trình trải nghiệm khách hàng chất lượng qua những điểm chạm tinh tế</a> <a href="/vi/hop-tac-agency-chuyen-tha-thinh-cua-cac-clients" hreflang="vi">Hợp tác Agency: Chuyện thả thính của các clients</a> <a href="/vi/tai-sao-can-ban-tam-cho-viec-xay-dung-thuong-hieu" hreflang="vi">Tại sao cần bận tâm cho việc xây dựng thương hiệu?</a> <a href="/vi/nganh-cong-nghiep-lam-font-va-nhu-cau-hien-nay" hreflang="vi">Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay</a> <a href="/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan" hreflang="vi">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn</a> <a href="/vi/tam-ly-hoc-font-chu-con-chu-va-cam-xuc" hreflang="vi">Tâm lý học font chữ: Nét chữ và cảm xúc. Những điều designer nên biết</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Sun, 14 May 2023 13:18:07 +0000 content2 362 at http://beau.vn 10 quy tắc ứng dụng typography cho thiết kế UI đúng cách http://beau.vn/vi/goc-nhin/10-quy-tac-ung-dung-typography-cho-thiet-ke-ui-dung-cach <span class="field field--name-title field--type-string field--label-hidden">10 quy tắc ứng dụng typography cho thiết kế UI đúng cách</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/85" typeof="schema:Person" property="schema:name" datatype="">content2</span></span> <span class="field field--name-created field--type-created field--label-hidden">CN, 05/14/2023 - 19:54</span> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02" hreflang="vi">UX/UI</a> <p><span id="cke_bm_1223S" style="display: none;"> </span></p> <p>Giao tiếp là mục tiêu của thiết kế. Sản phẩm thiết kế cần giao tiếp một cách rõ ràng, truyền đi thông điệp một cách hiệu quả. Khi chúng ta nói tới giao tiếp chúng ta cũng cần nói tới văn bản, bởi mục tiêu của mọi văn bản trên website hay ứng dụng vốn là để đảm bảo quá trình giao tiếp, tương tác với người dùng được hiệu quả.</p> <a href="/vi/typo" hreflang="vi">Typo</a> <a href="/vi/typeface" hreflang="vi">Typeface</a> <a href="/vi/thiet-ke-ui" hreflang="vi">Thiết kế UI</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2023-05/cover_5.jpg" alt="Hãy ứng dụng typography cho UI đúng cách"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p style="line-height:1.38; text-align:justify">Typography đóng vai trò quan trọng trong trải nghiệm đọc của người dùng. Typography hiệu quả sẽ khiến việc đọc trở nên dễ dàng và ngược lại, typography tệ khiến người dùng bối rối.</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui">Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">Thiết kế UI: Những yếu tố cơ bản trong Typography những &quot;tay mơ&quot; cần biết <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website">Bạn đã biết về Quy tắc thiết kế UI cho website? <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Giao tiếp là mục tiêu của thiết kế. Sản phẩm thiết kế cần giao tiếp một cách rõ ràng, truyền đi thông điệp một cách hiệu quả. Khi chúng ta nói tới giao tiếp chúng ta cũng cần nói tới văn bản, bởi mục tiêu của mọi văn bản trên website hay ứng dụng vốn là để đảm bảo quá trình giao tiếp, tương tác với người dùng được hiệu quả.</p> <p>Và typography đóng vai trò quan trọng trong trải nghiệm đọc của người dùng. Typography hiệu quả sẽ khiến việc đọc trở nên dễ dàng và ngược lại, typography tệ khiến người dùng bối rối.</p> <h2>Hướng dẫn sử dụng typography trong thiết kế UI</h2> <p>Có nhiều tranh cãi về việc dùng typography như thế nào và không có nguyên tắc nào đúng cho mọi trường hợp. Tuy nhiên, vẫn có những thứ bạn cần lưu ý để đảm bảo typography phù hợp với nội dung, đảm bảo tính dễ đọc.</p> <h2>1. Không dùng nhiều typeface trong cùng một thiết kế</h2> <p><img alt="Không dùng nhiều typeface trong cùng một thiết kế" data-entity-type="file" data-entity-uuid="5d673041-7819-4a01-b40b-c0a9ff73cc81" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-1.jpg" width="1200" /></p> <p>Dùng nhiều hơn 3 typeface trong một giao diện có thể khiến app/site của bạn trở nên hỗn loạn. Bạn nên giới hạn số font được sử dụng từ 1 tới 2 family font và sử dụng chúng một cách thống nhất quan các trang.</p> <p>Hãy bắt đầu chọn typeface cho body text trước. Nó quan trọng bởi nó sẽ ảnh hưởng tới việc chúng ta chọn typeface gì cho headline. Ngoài ra nó cũng sẽ là element được sử dụng nhiều nhất trong thiết kế app/site. Bởi vậy, thiết kế và cảm xúc của body text sẽ ảnh hưởng tới chất lượng tổng thể của cả thiết kế.</p> <p><strong>Dùng duy nhất một typeface trước, cho tới khi bạn hiểu rõ nó.</strong> Lời khuyên này dành cho beginner. Hãy trung thành với lựa chọn, chơi với các weight và style khác nhau. Một typeface có nhiều style, weight có thể ứng dụng cho nhiều nội dung, bối cảnh khác nhau. Một ví dụ điển hình là San Francisco của Apple.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="4b1c5fd6-5ec5-4bcf-85e5-ed0339b8ea55" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-2.jpg" width="1200" /></p> <p><strong>Đảm bảo sự kết hợp giữa các font chữ hợp lý</strong>. Nếu bạn muốn dùng nhiều hơn một font, đảm bảo hai bộ font ấy hỗ trợ lẫn nhau. Lấy ví dụ như hình dưới, Georgia và Verdana có chung một số yếu tố về cấu trúc vậy nên nó tạo ra sự kết hợp hài hòa. Trong khi, cặp Baskerville và Impact với tương phản quá mạnh, khiến hai font chữ nhìn không liên quan.</p> <p><img alt="Đảm bảo sự kết hợp giữa các font chữ hợp lý" data-entity-type="file" data-entity-uuid="0fd05e43-e2f2-4971-993a-6076f87dee49" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-3.jpg" width="1200" /></p> <h2>2. Chọn kích thước font phù hợp</h2> <p><img alt="Chọn kích thước font phù hợp" data-entity-type="file" data-entity-uuid="83f06580-7b41-4e32-b550-fa620f14fec2" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-4.jpg" width="1200" /></p> <p>Kích thước của font chữ cũng ảnh hướng tới trải nghiệm đọc của người dùng:</p> <ul> <li>Font chữ quá nhỏ có thể khiến người dùng thấy vất vả khi đọc, có thể bỏ qua nhiều thông tin quan trọng. Lưu ý, nó thường xảy ra với giao diện mobile.</li> <li>Font quá to cũng tạo ra vấn đề. Văn bản quá lớn khiến người dùng mất tập trung, có thể ảnh hưởng tới phân cấp trên trang.</li> </ul> <p>Đó là lý do chúng ta luôn cần chọn một kích thước font vừa đủ cho body text. Một số gợi ý cho bạn khi lựa chọn kích thước font chữ:</p> <ul> <li>Cho màn hình máy tính: Dùng 16px hoặc lớn hơn cho body text.</li> <li>Với thiết bị iOS: Dùng text không dưới 11 point.</li> <li>Với thiết bị Android: Dùng text không dưới 12 sp, khuyến bị dùng ở 14 sp.</li> </ul> <h2>3. Căn văn bản bên trái</h2> <p><img alt="Căn văn bản bên trái" data-entity-type="file" data-entity-uuid="0c0702c4-118a-41bc-b8ce-5d5d79d75192" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-5.jpg" width="1200" /></p> <p>Thói quen đọc là từ trên xuống dưới, từ trái qua phải. Vậy nên, căn văn bản bên trái sẽ khiến nó dễ đọc hơn. Khi văn bản được căn trái, mắt chúng ta sẽ biết cần bắt đầu từ đâu và mỗi khi hết dòng, chúng ta cũng dễ để tìm thấy đầu dòng tiếp theo hơn.</p> <p>Ngoài ra, cũng nên lưu ý không nên để duy nhất một chữ bị rớt ở dòng cuối.</p> <h2>4. Chọn typeface có hiển thị tốt trong nhiều kích thước khác nhau</h2> <p><img alt="Chọn typeface có hiển thị tốt trong nhiều kích thước khác nhau" data-entity-type="file" data-entity-uuid="0acf06c8-10a5-457d-99c4-1864aa223adb" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-7.jpg" width="1200" /></p> <p>Người dùng sẽ dùng app/site của chúng ta ở nhiều thiết bị với nhiều kích thước màn hình khác nhau. Bởi vậy UI cần được tích hợp cho nhiều thiết bị và font chữ cũng cần hiển thị ở nhiều kích thước khác nhau. Lúc này, chúng ta cần chọn ra typeface có thể tối ưu cho nhiều kích thước, đảm bảo độ dễ đọc trên nhiều thiết bị. Nên tránh những font có tính trang trí, viết tay, chúng đẹp nhưng sẽ khó đọc, khó ứng dụng.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/4-nhan-to-tao-nen-thuong-hieu-doanh-nghiep-vung-manh" target="_blank">4 nhân tố tạo nên thương hiệu doanh nghiệp vững mạnh: Logo, Typeface và font, Image, Style guideline</a></strong></p> <h2>5. Dùng font chữ có đặc điểm chữ cái rõ ràng</h2> <p><img alt="Dùng font chữ có đặc điểm chữ cái rõ ràng" data-entity-type="file" data-entity-uuid="b9ec42cb-c6ba-4e64-a120-144d3347de4e" height="400" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-17.jpg" width="1200" /></p> <p>Tính dễ đọc của một font chữ chia làm hai yếu tố là: readability và legibility. Trong đó legibility là khả năng phân biệt các chữ cái với nhau trong cùng một bộ chữ. Tuy nhiên, không phải font chữ nào cũng có độ dễ đọc cao. Có nhiều font chữ có chữ “i” và chữ “L” (như ví dụ bên trên). Chúng ta cần tránh những font như thế, tránh gây khó đọc cho người dùng khi đọc nội dung ở màn hình nhỏ.</p> <h2>6. Giới hạn độ dài dòng</h2> <p><img alt="Giới hạn độ dài dòng" data-entity-type="file" data-entity-uuid="ac067c70-bc67-42bf-9630-60c809879011" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-15.jpg" width="1200" /></p> <p>Độ dài dòng quá lớn là một trong những lỗi phổ biến nhất trong các thiết kế web. Dòng quá dài khiến quá trình đọc thiếu thoải mái, dễ mất dấu dòng khi đọc xuống dòng. Nhìn chung, với màn hình máy tính, độ dài dòng tạo độ thoải mái ở khoảng 60 ký tự trên một dòng.&nbsp;</p> <p><img alt=" Giới hạn độ dài dòng" data-entity-type="file" data-entity-uuid="2ed4a96d-0c79-47d3-8983-05d64c180a3f" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-16.jpg" width="1200" /></p> <p>Đối với màn hình mobi, con số này nên nằm ở khoảng 30-40 ký tự. Để thấy rõ bạn có thể xem ví &nbsp;dụ dưới đây. Bên trái là 50-75 ký tự trên một dòng và bên phải là 30-40 ký tự.</p> <h2>7. Tránh dùng all caps</h2> <p><img alt="7. Tránh dùng all caps" data-entity-type="file" data-entity-uuid="5eb13ffe-b21a-488c-a7bc-646f3d594c30" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-8.jpg" width="1200" /></p> <p>All caps text — nghĩa là văn bản được viết toàn bộ bằng in hoa. Nếu bố cảnh sử dụng là từ viết tắt hay logo nó sẽ không ảnh hưởng. Tuy nhiên, nếu nó là nội dung cần đọc, tốt hơn hết chúng ta nên tránh để all caps. Bởi hình dạng các chữ all cap đều là các khối vuông, khiến người đọc khó nhận dạng chữ cái và quá trình quét và đọc văn bản theo đó cũng chậm lại.</p> <h2>8. Tránh căn hai lề</h2> <p><img alt="Tránh căn hai lề" data-entity-type="file" data-entity-uuid="53bb1fc5-5bf1-437b-a642-983e254e50a0" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-9.jpg" width="1200" /></p> <p>Việc căn hai lề tuy làm khối text gọn hơn, tránh để một lề bị thụt thò. Tuy nhiên nó lại tạo ra khoảng cách chữ trên các dòng không đồng nhất.</p> <p>Với ví dụ bên trái, người đọc sẽ rất dễ bị phân tâm (ví dụ như cuộc gọi đến). Trong khi, bên phải với khoảng trống ngẫu nhiên bên phải khiến mắt dễ tìm dòng hơn khi xuống dòng.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo" target="_blank">Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết</a></strong></p> <h2>9. Giữ khoảng cách dòng hợp lý</h2> <p><img alt="Giữ khoảng cách dòng hợp lý" data-entity-type="file" data-entity-uuid="beb800dc-f159-43be-88a0-b292626df9f6" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-10.jpg" width="1200" /></p> <p>Tất thảy vấn đề của typography đều liên quan tới khoảng trống, trong đó chúng ta có một thuật ngữ riêng cho khoảng trống giữa các dòng, đó là leading. Trong một số phần mềm, nó còn được gọi là “line spacing.”</p> <p>Leading quá nhỏ sẽ khiến mật độ chữ trở nên dày, gây khó đọc, khó tìm dòng. Lúc này, chúng ta cần tăng khoảng cách dòng để cải thiện khả năng dễ đọc nhưng đồng thời nó cũng sẽ làm tăng diện tích của cột text.</p> <p><img alt="Giữ khoảng cách dòng hợp lý" data-entity-type="file" data-entity-uuid="6f55234a-398f-4d5e-92fa-3daa0f74e8a9" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-11.jpg" width="1200" /></p> <p>Khoảng cách dòng bắt buộc phải lớn hơn độ cao của chữ. Thường thì leading nên lớn hơn 30% so với cap height.</p> <h2>10. Tương phản của văn bản</h2> <p><img alt="Tương phản của văn bản" data-entity-type="file" data-entity-uuid="39d56534-fc67-44c4-b425-a8f47a6902de" height="800" src="/sites/default/files/ung-dung-typography-cho-thiet-ke-ui-dung-cach-12.jpg" width="1200" /></p> <p>Ngoài những yếu tố về khoảng trống, yếu tố màu cũng ảnh hưởng tới tính dễ đọc. Bạn nên dùng màu cho văn bản có độ tương phản cao so với nền, đảm bảo chữ cái hiển thị rõ ràng.</p> <p>Tuy nhiên, tương phản quá cao cũng không tốt. Một lỗi thường gặp là dùng cặp đen trắng cho text và nền, với độ tương phản cao như vậy nếu đọc trong thời gian dài sẽ khiến người đọc bị mỏi mắt.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan" target="_blank">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn</a></strong></p> <h2>Kết luận</h2> <p>Typography không chỉ để chúng ta đọc mà còn để chúng ta cảm nhận. Nó cũng là kỹ năng mà mỗi designer cần có, dù là chúng ta thiết kế digital hay in ấn. Và giống như mọi kỹ năng khác, để thực sự học nó chúng ta cần làm nó. Bạn càng thực hành nhiều, kỹ năng và hiểu biết của bạn càng được cải thiện.<br /> &nbsp;</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke" hreflang="vi">Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App</a> <a href="/vi/truyen-thong-thi-giac-nhan-thuc-va-thao-tung" hreflang="vi">Truyền Thông Thị Giác: Nhận Thức Và Thao Túng</a> <a href="/vi/hop-tac-voi-agency-cau-chuyen-ve-nhung-khach-hang-thich-hoai-nghi" hreflang="vi">Hợp tác với Agency: Câu chuyện về những khách hàng thích hoài nghi</a> <a href="/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo" hreflang="vi">Thiết kế UI: Những yếu tố cơ bản trong Typography những &quot;tay mơ&quot; cần biết</a> <a href="/vi/quy-trinh-thiet-ke-trai-nghiem-nguoi-dung" hreflang="vi">Quy trình thiết kế trải nghiệm người dùng UX để đạt tầm nhìn doanh nghiệp</a> <a href="/vi/sony-mot-typeface-tap-doan-ung-dung-cho-93-ngon-ngu-toan-cau" hreflang="vi">Sony - Một typeface tập đoàn ứng dụng cho 93 ngôn ngữ toàn cầu </a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Sun, 14 May 2023 12:54:34 +0000 content2 361 at http://beau.vn Thiết kế font chữ xứng tầm cho ngân hàng Santander lâu đời http://beau.vn/vi/thiet-ke-font-chu-xung-tam-cho-ngan-hang-santander-lau-doi <span class="field field--name-title field--type-string field--label-hidden">Thiết kế font chữ xứng tầm cho ngân hàng Santander lâu đời</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/85" typeof="schema:Person" property="schema:name" datatype="">content2</span></span> <span class="field field--name-created field--type-created field--label-hidden">T5, 03/09/2023 - 11:30</span> <a href="/vi/branding-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">Branding</a> <p><span id="cke_bm_1223S" style="display: none;"> </span></p> <p>Banco Santander là một ngân hàng thương mại và bán lẻ tầm cỡ thế giới, được thành lập năm 1857 và có trụ sở chính tại Tây Ban Nha. Ngân hàng này hiện diện tại 10 thị trường cốt lõi ở châu u và châu Mỹ, và cũng là ngân hàng lớn nhất trong khu vực đồng euro tính theo vốn hóa thị trường.</p> <a href="/vi/typeface" hreflang="vi">Typeface</a> <a href="/vi/custom-typeface" hreflang="vi">custom typeface</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2023-03/cover-kien-tao-font-chu-xung-tam-cho-ngan-hang-santander-lau-doi.jpg" alt="Thiết kế font chữ xứng tầm cho ngân hàng Santander lâu đời"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p style="line-height:1.38; text-align:justify">Santander, với hệ thống font chữ mới được thiết kế từ Monotype, đã có thể giao tiếp tốt với khách hàng trên tất cả các kênh theo một cách dễ nhận biết, dễ tiếp nhận, và vẫn đủ khác biệt.</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/premier-league-nang-dong-tren-moi-nen-tang-voi-custom-brand-typeface-an-tuong">Premier League năng động trên mọi nền tảng với custom brand typeface ấn tượng <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <h2>Đôi điều về Banco Santander</h2> <p>Banco Santander là một ngân hàng thương mại và bán lẻ tầm cỡ thế giới, được thành lập năm 1857 và có trụ sở chính tại Tây Ban Nha. Ngân hàng này hiện diện tại 10 thị trường cốt lõi ở châu &nbsp;u và châu Mỹ, và cũng là ngân hàng lớn nhất trong khu vực đồng euro tính theo vốn hóa thị trường.&nbsp;</p> <p>Với hơn 142 triệu khách hàng toàn cầu, thương hiệu của Santander được định giá 5,6 tỷ Euro, trở thành một trong 100 thương hiệu có giá trị nhất thế giới trong Báo cáo Thương hiệu Toàn cầu Tốt nhất của Interbrand và trở thành một trong những tổ chức tài chính có giá trị nhất ở Liên minh Châu Âu.</p> <h2>Thách thức</h2> <p>Santander đã mở rộng ra toàn toàn thế giới trong gần ba thập kỷ. Mặc dù được biết đến thông qua các các hoạt động ngân hàng ở Châu &nbsp;u, họ cũng đã mở rộng hoạt động ra khắp Châu Mỹ. Với việc sáp nhập và xâm chiếm liên tục các thị trường khác, và phát triển một loạt sản phẩm mới, Santander đang gặp nhiều thách thức trong việc duy trì diện mạo thương hiệu nhất quán cho toàn bộ tập đoàn.&nbsp;</p> <p>Ngoài ra, Santander cũng đang phải giải quyết những thay đổi trên thị trường, bao gồm:</p> <ul> <li>Chuyển đổi kỹ thuật số và sự phát triển các kênh truyền thông mới cho thương hiệu.</li> <li>Thích ứng với cách người tiêu dùng trẻ tuổi nhận thức về các thương hiệu nói chung , và các ngân hàng nói riêng, so với các thế hệ trước.</li> <li>Cung cấp trải nghiệm thống nhất, có ý nghĩa nhằm thu hút khách hàng tại địa phương nhưng vẫn đảm bảo sự nhất quán thương hiệu toàn cầu</li> </ul> <p>Là một phần của chiến lược đổi mới thương hiệu, Santander sẽ cần phát triển một kiểu chữ nhất quán hơn và hướng tới tương lai nhiều thách thức. Khi liên hệ với Monotype, Santander đã có 4 font chữ khác nhau được sử dụng cho các mục đích riêng biệt: FF Kievit, Berling, Open Sans và Arial.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/scotiabank-tiet-kiem-chi-phi-ban-quyen-font-trong-thoi-dai-so" target="_blank">Scotiabank tiết kiệm chi phí bản quyền font trong thời đại số</a></strong></p> <h2>Giải pháp</h2> <p>Để bắt đầu, Agency đã phân tích kết cấu của wordmark “Santander”, là sự kết hợp của các kiểu chữ cổ điển như Times, Century, Berling, Garamond và Bodoni, và nhận thấy nó có một dáng vẻ đã không còn phù hợp với hiện tại.&nbsp;</p> <p>Santander muốn xác định một cá tính thương hiệu mới vượt ra ngoài khuôn khổ màu sắc và biểu tượng. Đó phải là một cá tính có thể lập tức thể hiện định vị của thương hiệu, “Sự thịnh vượng thực sự mỗi ngày” và các giá trị cốt lõi: “đơn giản, cá nhân, và công bằng”.</p> <h3>1. Logo wordmark ứng dụng thiết kế Typeface mới</h3> <p><img alt="Logo wordmark cho santander" data-entity-type="file" data-entity-uuid="1d26ad67-18e2-4f3c-96f4-408e223e6473" height="800" src="/sites/default/files/kien-tao-font-chu-xung-tam-cho-ngan-hang-santander-lau-doi-3.jpg" width="1200" /></p> <p>Khi thiết kế lại logo wordmark, đã có vài ý tưởng thành hình, ví dụ như chữ “a” dạng đóng và giảm một nửa thanh ngang của chữ “t”. Do đó, nhà thiết kế của Monotype, Hendrik Weber, đã có thể tập trung hoàn toàn vào phong cách typography tổng thể.</p> <p>Ông đưa ra hai ý tưởng thiết kế: đầu tiên, một đề xuất mang tính nhân hướng, với những ký tự mềm mại nhưng có cá tính rõ ràng, và thứ hai, một lựa chọn năng động hơn, bóng bẩy và vượt thời gian.&nbsp;</p> <p>Santander cuối cùng đã chọn Phương án A, cách tiếp cận theo chủ nghĩa nhân văn hơn.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan" target="_blank">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn</a></strong></p> <h3>2. Typeface cải tiến cho logo</h3> <p><img alt="Typeface cải tiến cho logo santander" data-entity-type="file" data-entity-uuid="b3130282-f57d-4a83-bc07-0614743d12cb" height="586" src="/sites/default/files/kien-tao-font-chu-xung-tam-cho-ngan-hang-santander-lau-doi-1.jpg" width="1200" /></p> <p>Để phù hợp với thương hiệu của Santander, một bảng chữ cái hoàn chỉnh sau đó đã được phát triển dựa trên bảy nét chữ trong logo wordmark(S, a, n, t, d, e, r).&nbsp;</p> <p>Kết quả là một bộ font chữ dành cho logo bao gồm một bộ ký tự hoàn chỉnh có sẵn theo bộ Regular và Light. “Ngọn lửa” trong logo đã được tối ưu hóa và đơn giản hóa để tương tác tốt hơn với các đường nét của ký tự trong logo, với một bộ lưới đảm bảo các đường thẳng đều nhau và đồng nhất. Bộ lưới này cũng được tích hợp vào hệ thống typeface, đảm bảo việc kết hợp biểu tượng và ký tự.</p> <h3>3. Thiết kế Font chữ ứng dụng cho văn bản</h3> <p><img alt=" Font chữ cho văn bản của santander" data-entity-type="file" data-entity-uuid="60da57e6-37aa-48a1-83bd-89861f0b5977" height="675" src="/sites/default/files/kien-tao-font-chu-xung-tam-cho-ngan-hang-santander-lau-doi-2.jpg" width="1200" /></p> <p>Khi logo wordmark đã được phát triển, Santander cần mở rộng hệ thống nhận diện để truyền thông tiếng nói thương hiệu của mình trên nhiều kênh hơn, bao gồm cả kỹ thuật số và in ấn. Bước đầu tiên của quá trình này là phát triển một font chữ dành cho văn bản, với việc điều chỉnh các ký tự để làm cho chúng dễ đọc được ở nhiều kích thước văn bản.</p> <p>Do đó, Montotype đã tăng chiều cao chữ, ascender, descender, và tracking. Họ cũng vẽ phiên bản thay thế ký tự “g” và “a” dựa trên typeface cổ. Các thay đổi khác cho font chữ văn bản bao gồm: thêm hook cho “i”, “j” và “l”; thêm spur cho “b”, “m” và “r”; và cuối cùng là thanh bar cho “f” và “t”.</p> <p>Để hệ thống nhận diện hoạt động trên tất cả các kênh, quốc gia, và các công ty con, Santander sẽ cần đảm bảo sự kết nối trực quan chặt chẽ giữa logo và font chữ. Do đó, các tiêu đề sẽ cần mang các đặc điểm tương tự của logo. Hãy xem cách ứng dụng trên biển bảng bên dưới.</p> <h2>Kết quả</h2> <p>Trong dự án này, đặt mục tiêu thiết kế một kiểu font chữ mà mọi bộ phận của Santander có thể dễ dàng sử dụng mà không cần chỉnh sửa hoặc làm theo các hướng dẫn phức tạp.</p> <p>Kết quả là một hệ thống font chữ bao gồm:</p> <ul> <li>Logo (2 weight)</li> <li>Headline (6 weight)</li> <li>Font văn bản thường(10 weight)</li> <li>Font văn bản Micro (10 weight)</li> </ul> <p>Sử dụng hệ thống này và hình ảnh, màu sắc, cùng các yếu tố khác của thương hiệu, Santander đã có thể giao tiếp với khách hàng trên tất cả các kênh theo cách dễ nhận biết, dễ tiếp cận, và vẫn đủ khác biệt.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung" target="_blank">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển</a></strong></p> <h2>Bài học</h2> <p>Khi bạn là một doanh nghiệp toàn cầu, nhiều vấn đề khi ứng dụng font chữ tại nhiều quốc gia và công ty sẽ bắt đầu phát sinh. Để đảm bảo sự nhất quán cho thương hiệu, đây là những lợi ích khi sở hữu phông chữ độc quyền:</p> <p><strong>Thương hiệu:</strong></p> <ul> <li>Hệ thống font chữ “đo ni đóng giày” cho các giá trị và tính cách của thương hiệu.</li> <li>Sự rõ ràng và nhất quán của kiến trúc thương hiệu.</li> <li>Các họ phông chữ riêng biệt và weight tương ứng để các nhóm nội bộ quản lý nhận dạng thương hiệu ở các vùng và công ty con.</li> <li>Khả năng giao tiếp bằng giọng nói mạnh mẽ, phù hợp ở tất cả các điểm chạm tiếp xúc với khách hàng.</li> </ul> <p><strong>Khách hàng:</strong></p> <ul> <li>Kiểu chữ độc quyền tạo ra một nhận dạng thương hiệu rõ ràng hơn trong mắt khách hàng.</li> <li>Một typeface dành riêng cho thương hiệu sẽ có thể ứng dụng trong tất cả các kênh toàn cầu, và đem đến thông điệp mà khách hàng dễ hiểu và dễ kết nối.</li> <li>Khách hàng trên toàn cầu có thể nhận ra thương hiệu trên nhiều kênh đa dạng, từ đó tạo một mối liên kết sâu sắc hơn nếu thương hiệu phù hợp giá trị bản thân. &nbsp;</li> <li>Một trải nghiệm thương hiệu nhất quán với thiết kế font độc quyền sẽ thu hút và truyền cảm hứng cho các phân khúc khách hàng mục tiêu.</li> </ul> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/nganh-cong-nghiep-lam-font-va-nhu-cau-hien-nay" hreflang="vi">Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay</a> <a href="/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan" hreflang="vi">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn</a> <a href="/vi/tam-ly-hoc-font-chu-con-chu-va-cam-xuc" hreflang="vi">Tâm lý học font chữ: Nét chữ và cảm xúc. Những điều designer nên biết</a> <a href="/vi/premier-league-nang-dong-tren-moi-nen-tang-voi-custom-brand-typeface-an-tuong" hreflang="vi">Premier League năng động trên mọi nền tảng với custom brand typeface ấn tượng</a> <a href="/vi/sony-mot-typeface-tap-doan-ung-dung-cho-93-ngon-ngu-toan-cau" hreflang="vi">Sony - Một typeface tập đoàn ứng dụng cho 93 ngôn ngữ toàn cầu </a> <a href="/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung" hreflang="vi">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Thu, 09 Mar 2023 04:30:22 +0000 content2 353 at http://beau.vn H&M bổ sung thiết kế typeface để hướng tới tương lai của thời trang http://beau.vn/vi/hm-bo-sung-thiet-ke-typeface-de-huong-toi-tuong-lai-cua-thoi-trang <span class="field field--name-title field--type-string field--label-hidden">H&amp;M bổ sung thiết kế typeface để hướng tới tương lai của thời trang</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/85" typeof="schema:Person" property="schema:name" datatype="">content2</span></span> <span class="field field--name-created field--type-created field--label-hidden">T5, 03/09/2023 - 11:11</span> <a href="/vi/branding-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">Branding</a> <p><span id="cke_bm_1223S" style="display: none;"> </span></p> <p>H&amp;M cần một phông chữ được thiết kế riêng để thể hiện tính “sành điệu” của mình trên các điểm chạm - từ các định dạng khổ lớn như bảng hiệu trong cửa hàng cho đến các định dạng nhỏ hơn như chữ trên website và lookbook. Monotype đã giải quyết nhu cầu này bằng typeface Amperserif - phông chữ độc quyền cho HM.</p> <p>H&amp;M - Thương hiệu quần áo đến từ Thuỵ Điển được xếp hạng là nhà bán lẻ quần áo lớn thứ hai toàn cầu (chỉ sau Zara) với hơn 3,000 cửa hàng tại 61 quốc gia trên thế giới. Các tài liệu quy chuẩn branding của họ bao gồm tất cả mọi hạng mục từ quảng cáo, đến bao bì, phim, và biển báo.</p> <a href="/vi/typeface" hreflang="vi">Typeface</a> <a href="/vi/custom-typeface" hreflang="vi">custom typeface</a> <a href="/vi/thiet-ke-font-chu" hreflang="vi">thiết kế font chữ</a> <a href="/vi/font" hreflang="vi">Font</a> <a href="/vi/font-doc-quyen" hreflang="vi">Font độc quyền</a> <a href="/vi/ban-quyen-font-chu" hreflang="vi">bản quyền font chữ</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2023-03/cover-hm-bo-sung-typeface-de-huong-toi-tuong-lai-cua-thoi-trang.jpg" alt="H&amp;M bổ sung thiết kế typeface serif để hướng tới tương lai của thời trang"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p style="line-height:1.38; text-align:justify">H&amp;M cần tạo ra một ngôn ngữ hình ảnh toàn cầu rõ ràng, đồng thời duy trì bản sắc thương hiệu để khách hàng quốc tế có thể nhận diện. Nếu chất lượng thiết kế có thể lên tiếng, đó là nhờ typeface.</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/scotiabank-tiet-kiem-chi-phi-ban-quyen-font-trong-thoi-dai-so">Scotiabank tiết kiệm chi phí bản quyền font trong thời đại số <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p><img alt="H&amp;M bổ sung typeface serif để hướng tới tương lai của thời trang" data-entity-type="file" data-entity-uuid="d489fbdd-d383-41f4-a8df-1adbcde8dec0" height="800" src="/sites/default/files/hm-bo-sung-typeface-de-huong-toi-tuong-lai-cua-thoi-trang-2.jpg" width="1200" /></p> <p>H&amp;M cần một thiết kế phông chữ được thiết kế riêng để thể hiện tính “sành điệu” của mình trên các điểm chạm - từ các định dạng khổ lớn như bảng hiệu trong cửa hàng cho đến các định dạng nhỏ hơn như chữ trên website và lookbook. Monotype đã giải quyết nhu cầu này bằng typeface Amperserif - thiết kế Font chữ độc quyền cho HM.</p> <p>H&amp;M - Thương hiệu quần áo đến từ Thuỵ Điển&nbsp;được xếp hạng là nhà bán lẻ quần áo lớn thứ hai toàn cầu (chỉ sau Zara) với hơn 3,000 cửa hàng tại 61 quốc gia trên thế giới. Các tài liệu quy chuẩn branding của họ bao gồm tất cả mọi hạng mục từ quảng cáo, đến bao bì, phim, và biển báo.</p> <p>Mặc dù trước đó H&amp;M đã có một typeface sans serif mang tên HM Ampersand, cũng được thiết kế bởi Monotype - hãng vẫn muốn phát triển thêm một ngôn ngữ typographic để sử dụng trong nhiều ngữ cảnh trên toàn thế giới. Thiết kế Typeface này sẽ đồng hành và tương trợ cho font chữ HM Ampersand đã có.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan" target="_blank">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn</a></strong></p> <p>Thiết kế Typeface thứ hai này cần thể hiện tính cách thương hiệu của H&amp;M trên tất cả các kênh. Do đó, nhà thiết kế của Monotype đã làm việc chặt chẽ với team marketing của H&amp;M trong quá trình phát triển HM Amperserif. Typeface này tuân theo cấu trúc của HM Ampersand, nhưng lại mang tính linh hoạt cao hơn cho typography của thương hiệu.</p> <p>Với nhu cầu thể hiện sự toàn cầu hoá trong ngôn ngữ hình ảnh một cách rõ ràng, kết hợp hai typeface sẽ giúp H&amp;M duy trì bản sắc của mình và giao tiếp với nhiều đối tượng khách hàng nhưng không ảnh hưởng chất lượng thiết kế.</p> <p><img alt="H&amp;M duy trì bản sắc qua thiết kế typeface" data-entity-type="file" data-entity-uuid="2a0159bd-3317-4e47-8fa4-06ad9acd3dcb" height="800" src="/sites/default/files/hm-bo-sung-typeface-de-huong-toi-tuong-lai-cua-thoi-trang-1_0.jpg" width="1200" /></p> <p>HM Amperserif đi theo truyền thống của những kiểu font serif có độ tương phản cao. Các thương hiệu thời trang đã sử dụng kiểu chữ serif này rất nhiều sau khi các tạp chí Vogue và Elle sử dụng chúng vào những năm 1950.&nbsp;</p> <p>HM Amperserif đi theo định hướng này, nhưng thêm vào các chi tiết tinh tế đầy phá cách - như một chút thuôn nhọn cho phần dưới của chữ “g”. Với ba kích thước tối ưu cho từng mục đích hiển thị khác nhau, thiết kế typeface này đảm bảo đặc tính font dù ở tỷ lệ lớn nhất hay nhỏ nhất, trên billboard hay túi đựng đồ. Các chữ số cũng được tối ưu hoá để sử dụng trong văn bản giá hoặc tiêu đề - đều là một phần quan trọng trong các chiến dịch của H&amp;M.</p> <p>Với vị thế là một tập đoàn toàn cầu, thiết kế typeface của H&amp;M được phát triển với một bộ ký tự đa ngôn ngữ bao gồm tiếng Latin, Hy Lạp, Kirin, Thái, và tiếng Ả Rập. Nhóm thiết kế cũng đã phát triển để typeface tạo ra logo bản địa hoá và cập nhật các ký hiệu tiền tệ mới cũng như các ký tự bổ sung khi thương hiệu mở rộng ra các quốc gia mới.</p> <p>Kết quả là, typeface H&amp;M Amperserif đã cho phép H&amp;M thiết lập một tiếng nói “fashionista” nhưng vẫn bền vững, với đầy đủ các tài nguyên để giao tiếp với người tiêu dùng trên toàn thế giới, dù đó là môi trường in ấn hay kỹ thuật số.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung" target="_blank">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển</a></strong></p> <h2>Bài học</h2> <p>Liệu một thương hiệu có thể sử dụng cả font serif và sans-serif? H&amp;M đã cho thấy đó là định hướng đầy khả thi. Việc có sự linh hoạt và tự do giúp cho các sản phẩm thiết kế trở nên linh hoạt hơn trước đây rất nhiều.</p> <p>Dù đó là giá sản phẩm hay một tiêu đề khổ lớn, khi bạn có một typeface làm nổi bật tính cách thương hiệu, khách hàng sẽ dễ dàng nhớ về bạn hơn. Và khi sự kết hợp thực sự hòa quyện, cảm xúc tích cực sẽ là thứ lưu lại sau cùng, dẫn họ đến quầy thanh toán.</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/nganh-cong-nghiep-lam-font-va-nhu-cau-hien-nay" hreflang="vi">Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay</a> <a href="/vi/cach-custom-typeface-font-chu-doc-quyen-tao-ra-suc-manh-thuong-hieu-cho-tap-doan" hreflang="vi">Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn</a> <a href="/vi/tam-ly-hoc-font-chu-con-chu-va-cam-xuc" hreflang="vi">Tâm lý học font chữ: Nét chữ và cảm xúc. Những điều designer nên biết</a> <a href="/vi/premier-league-nang-dong-tren-moi-nen-tang-voi-custom-brand-typeface-an-tuong" hreflang="vi">Premier League năng động trên mọi nền tảng với custom brand typeface ấn tượng</a> <a href="/vi/sony-mot-typeface-tap-doan-ung-dung-cho-93-ngon-ngu-toan-cau" hreflang="vi">Sony - Một typeface tập đoàn ứng dụng cho 93 ngôn ngữ toàn cầu </a> <a href="/vi/custom-brand-typeface-va-cac-tap-doan-lon-cap-bai-trung" hreflang="vi">Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Thu, 09 Mar 2023 04:11:49 +0000 content2 352 at http://beau.vn Scotiabank tiết kiệm chi phí bản quyền font trong thời đại số http://beau.vn/vi/scotiabank-tiet-kiem-chi-phi-ban-quyen-font-trong-thoi-dai-so <span class="field field--name-title field--type-string field--label-hidden">Scotiabank tiết kiệm chi phí bản quyền font trong thời đại số </span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/85" typeof="schema:Person" property="schema:name" datatype="">content2</span></span> <span class="field field--name-created field--type-created field--label-hidden">T3, 12/20/2022 - 14:48</span> <a href="/vi/branding-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">Branding</a> <h2><span id="cke_bm_542S" style="display: none;"> </span>Bối cảnh của ngân hàng Scotia</h2> <p><img alt="" data-entity-type="file" data-entity-uuid="114a6675-51db-47ad-bace-90048a51f3cb" height="800" src="/sites/default/files/scotiabank-tiet-kiem-chi-phi-ban-quyen-font-trong-thoi-dai-so.jpg" width="1200" loading="lazy" /></p> <p>Ngân hàng Scotiabank từ lâu đã sử dụng typeface Frutiger và ITC Century như một phần của bản sắc thương hiệu. Tuy nhiên, khi công ty mở rộng phạm vi tiếp cận ra các kênh kỹ thuật số và các quốc gia mới, họ cần mở rộng các giấy tờ thỏa thuận để có thể sử dụng các font này trên đa nền tảng.</p> <p>Kết quả là họ đã kết hợp với Monotype để đem lại một sự tự do hơn cho font và linh hoạt sử dụng trong mười năm tới. Thử thách cần giải quyết là: Việc cấp phép font chữ có thể trở nên rối rắm, đặc biệt với các thương hiệu phụ thuộc vào font để truyền tải bản sắc thương hiệu.</p> <p>Khi một doanh nghiệp muốn tăng sự nhận diện trên một loạt các quốc gia và điểm chạm mới, việc sử dụng typeface một cách nhất quán và tuân thủ tất cả quy định lại càng trở nên khó khăn.</p> <p>Rủi ro còn cao hơn với một tổ chức tài chính lớn như Scotiabank. Thiết lập một bản sắc thương hiệu rõ ràng cho tập đoàn là thiết yếu để duy trì sự tin tưởng của những người dùng ngân hàng. </p> <p>Suy cho cùng, các ngân hàng được tạo dựng trên niềm tin, và nền tảng của niềm tin là sự minh bạch về cách hoạt động cũng như quản lý. Vì vậy việc có đầy đủ giấy phép phù hợp cho typeface là cần thiết để duy trì niềm tin đó. Scotiabank đã sử dụng Frutiger và ITC Century từ lâu trên nhiều ứng dụng, từ app, website, sản phẩm tài chính, và báo cáo hàng năm.</p> <p>Giờ đây, đứng trước sự thay đổi, Scotiabank sẽ cần trả thêm nhiều khoản phí duy trì của một loạt giấy phép để có thể sử dụng Frutiger trên tất cả các nền tảng khác nhau.</p> <p>“Khi là một công ty toàn cầu với hàng nghìn nhân viên, sẽ khó khăn hơn để duy trì sự nhất quán của các nhân viên về cái gì có thể dùng và không thể dùng. Nếu không thể tập trung hoá các giấy phép cần thiết, chúng tôi sẽ rất khó theo dõi sau này và xác định xem giấy phép nào được cấp vào khi nào.” Eddie Pilatos, giám đốc toàn cầu về kích hoạt thương hiệu của Scotiabank.</p> <p>Cô nói thêm: “Trong các năm qua, việc sử dụng các kiểu chữ của tập đoàn [Frutiger và ITC Century] tiếp tục phát triển đa dạng và kỹ thuật số trở thành một kênh quan trọng hơn, vì vậy phông chữ cần được kết hợp tự nhiên vào nhiều kênh hơn để đảm bảo trải nghiệm liền mạch cho khách hàng.”</p> <p>Do đó, Scotiabank cần hợp nhất tất cả tài nguyên của mình vào một nguồn đơn giản, dễ hiểu, và dễ áp dụng hơn.</p> <h2>Giải pháp: Hợp đồng sử dụng font chữ linh hoạt</h2> <p>Trong ba tuần, Monotype và Scotiabank đã ký một hợp đồng cho phép kiểu chữ được sử dụng tự do trên bất kỳ điểm chạm nào mà thương hiệu cần. Việc kết hợp nhiều giấy phép riêng lẻ thành một hợp đồng 10 năm duy nhất đã giúp Scotiabank tiết kiệm hơn 30% chi phí cấp phép phông chữ trong suốt thập kỷ tới, nhưng cũng tạo cơ hội để thiết lập sự rõ ràng trong toàn bộ hoạt động kinh doanh - hỗ trợ các kế hoạch hiện có của Scotiabank nhằm tạo ra một thương hiệu nhất quán hơn trên toàn cầu.</p> <p>Giờ đây, công ty có quyền tự do sử dụng Frutiger và ITC Century trên bất kỳ nền tảng hoặc kênh nào mà không cần xin thêm các giấy phép riêng biệt, ký các hợp đồng khác nhau, hoặc hoang mang về việc ai tại Scotiabank có quyền sở hữu phông chữ.</p> <p>Tuy nhiên, giấy phép không chỉ là cơ hội để hợp nhất các thủ tục rườm rà mà còn là để làm nổi bật vai trò của font chữ với thương hiệu. Mặc dù các nhóm tiếp thị có thể rất thành thạo trong việc xin cấp quuyềnp cho các nội dung khác như âm nhạc hoặc hình ảnh, nhưng vẫn còn một chặng đường dài trước khi mọi người hiểu rõ về vai trò của typeface.</p> <p>Pilatos nói: “Tôi nghĩ rằng cộng đồng còn thiếu kiến ​​thức. Mọi người không hiểu rằng bạn cần trả tiền bản quyền font, cũng như đôi khi họ không hiểu rằng khi bạn chụp một hình ảnh, bạn không có quyền sở hữu vĩnh viễn. Nói chung còn tồn đọng rất nhiều lỗ hổng kiến thức về việc cấp phép."</p> <p>Ngày nay, Pilatos sử dụng các buổi thuyết trình của công ty như một cơ hội để thảo luận về các font chữ thương hiệu của Scotiabank và việc cấp phép đi kèm với chúng. Các buổi roadshow là một cơ hội để chia sẻ tin tức của công ty với 14 văn phòng toàn cầu, cũng là dịp để giải thích về giấy phép doanh nghiệp toàn cầu. Scotiabank cũng đã thêm thông tin vào các tiêu chuẩn thương hiệu của mình để chia sẻ thông tin với các nhóm trong toàn bộ công ty.</p> <p>“Về mặt nhân lực, điều quan trọng là các nhân viên mới phải hiểu các tiêu chuẩn thương hiệu của chúng tôi. Tự do sử dụng phông chữ của riêng mình khiến chúng tôi yên tâm hơn.” cô nói thêm. “Biết chắc rằng chúng tôi có thể sử dụng font doanh nghiệp theo bất cứ cách nào phù hợp trong mười năm tới là điều vô cùng hữu ích.”</p> <p><b>Đọc thêm: <a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke" target="_blank">Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App</a></b></p> <h2>Bài học cho doanh nghiệp</h2> <p>Có thể nhận xét rằng, bài toán chi phí bản quyền font chữ còn bị coi nhẹ ở Việt Nam. Tuy nhiên, khi các tập đoàn lớn ngày càng phát triển hơn và vươn ra biển lớn, sự lựa chọn typeface từ những ngày đầu có thể trở nên đắt đỏ sau này nếu các doanh nghiệp không cẩn thận.</p> <p>Giải pháp tối ưu nhất có lẽ là phát triển một hệ thống font chữ custom dành riêng cho doanh nghiệp. Điều này sẽ góp phần khẳng định bản sắc thương hiệu cũng như tránh khỏi các rắc rối khi áp dụng font chữ vào nhiều nền tảng khác nhau. Về lâu về dài, điều này cũng giúp tiết kiệm chi phí khi doanh nghiệp có thể tự tin sử dụng font chữ trên toàn cầu mà không lo lắng về hạn của các loại giấy phép bản quyền.</p> <a href="/vi/typography" hreflang="vi">Typography</a> <a href="/vi/tap-doan" hreflang="vi">tập đoàn</a> <a href="/vi/typeface" hreflang="vi">Typeface</a> <a href="/vi/ban-quyen-font-chu" hreflang="vi">bản quyền font chữ</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-12/cover-scotiabank_tiet_kiem_chi_phi_ban_quyen_font_trong_thoi_dai_so_.jpg" alt="Scotiabank tiết kiệm chi phí bản quyền font trong thời đại số "> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p>Khi bạn là một công ty toàn cầu, các tài nguyên thiết kế cần được chia sẻ và phân phối hiệu quả. Đây là điều tối quan trọng.</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/nganh-cong-nghiep-lam-font-va-nhu-cau-hien-nay">Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke">Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/xay-dung-chien-luoc-website-tap-doan-nham-dat-duoc-muc-tieu-trong-ngan-va-dai-han">Xây dựng chiến lược website tập đoàn nhằm đạt được mục tiêu trong ngắn và dài hạn <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <h2>Bối cảnh của ngân hàng Scotia</h2> <p><img alt="" data-entity-type="file" data-entity-uuid="114a6675-51db-47ad-bace-90048a51f3cb" height="800" src="/sites/default/files/scotiabank-tiet-kiem-chi-phi-ban-quyen-font-trong-thoi-dai-so.jpg" width="1200" /></p> <p>Ngân hàng Scotiabank từ lâu đã sử dụng typeface Frutiger và ITC Century như một phần của bản sắc thương hiệu. Tuy nhiên, khi công ty mở rộng phạm vi tiếp cận ra các kênh kỹ thuật số và các quốc gia mới, họ cần mở rộng các giấy tờ thỏa thuận để có thể sử dụng các font này trên đa nền tảng.</p> <p>Kết quả là họ đã kết hợp với Monotype để đem lại một sự tự do hơn cho font và linh hoạt sử dụng trong mười năm tới. Thử thách cần giải quyết là: Việc cấp phép font chữ có thể trở nên rối rắm, đặc biệt với các thương hiệu phụ thuộc vào font để truyền tải bản sắc thương hiệu.</p> <p>Khi một doanh nghiệp muốn tăng sự nhận diện trên một loạt các quốc gia và điểm chạm mới, việc sử dụng typeface một cách nhất quán và tuân thủ tất cả quy định lại càng trở nên khó khăn.</p> <p>Rủi ro còn cao hơn với một tổ chức tài chính lớn như Scotiabank. Thiết lập một bản sắc thương hiệu rõ ràng cho tập đoàn là thiết yếu để duy trì sự tin tưởng của những người dùng ngân hàng.&nbsp;</p> <p>Suy cho cùng, các ngân hàng được tạo dựng trên niềm tin, và nền tảng của niềm tin là sự minh bạch về cách hoạt động cũng như quản lý. Vì vậy việc có đầy đủ giấy phép phù hợp cho typeface là cần thiết để duy trì niềm tin đó. Scotiabank đã sử dụng Frutiger và ITC Century từ lâu trên nhiều ứng dụng, từ app, website, sản phẩm tài chính, và báo cáo hàng năm.</p> <p>Giờ đây, đứng trước sự thay đổi, Scotiabank sẽ cần trả thêm nhiều khoản phí duy trì của một loạt giấy phép để có thể sử dụng Frutiger trên tất cả các nền tảng khác nhau.</p> <p>“Khi là một công ty toàn cầu với hàng nghìn nhân viên, sẽ khó khăn hơn để duy trì sự nhất quán của các nhân viên về cái gì có thể dùng và không thể dùng. Nếu không thể tập trung hoá các giấy phép cần thiết, chúng tôi sẽ rất khó theo dõi sau này và xác định xem giấy phép nào được cấp vào khi nào.” Eddie Pilatos, giám đốc toàn cầu về kích hoạt thương hiệu của Scotiabank.</p> <p>Cô nói thêm: “Trong các năm qua, việc sử dụng các kiểu chữ của tập đoàn [Frutiger và ITC Century] tiếp tục phát triển đa dạng và kỹ thuật số trở thành một kênh quan trọng hơn, vì vậy phông chữ cần được kết hợp tự nhiên vào nhiều kênh hơn để đảm bảo trải nghiệm liền mạch cho khách hàng.”</p> <p>Do đó, Scotiabank cần hợp nhất tất cả tài nguyên của mình vào một nguồn đơn giản, dễ hiểu, và dễ áp dụng hơn.</p> <h2>Giải pháp: Hợp đồng sử dụng font chữ linh hoạt</h2> <p>Trong ba tuần, Monotype và Scotiabank đã ký một hợp đồng cho phép kiểu chữ được sử dụng tự do trên bất kỳ điểm chạm nào mà thương hiệu cần. Việc kết hợp nhiều giấy phép riêng lẻ thành một hợp đồng 10 năm duy nhất đã giúp Scotiabank tiết kiệm hơn 30% chi phí cấp phép phông chữ trong suốt thập kỷ tới, nhưng cũng tạo cơ hội để thiết lập sự rõ ràng trong toàn bộ hoạt động kinh doanh - hỗ trợ các kế hoạch hiện có của Scotiabank nhằm tạo ra một thương hiệu nhất quán hơn trên toàn cầu.</p> <p>Giờ đây, công ty có quyền tự do sử dụng Frutiger và ITC Century trên bất kỳ nền tảng hoặc kênh nào mà không cần xin thêm các giấy phép riêng biệt, ký các hợp đồng khác nhau, hoặc hoang mang về việc ai tại Scotiabank có quyền sở hữu phông chữ.</p> <p>Tuy nhiên, giấy phép không chỉ là cơ hội để hợp nhất các thủ tục rườm rà mà còn là để làm nổi bật vai trò của font chữ với thương hiệu. Mặc dù các nhóm tiếp thị có thể rất thành thạo trong việc xin cấp quuyềnp cho các nội dung khác như âm nhạc hoặc hình ảnh, nhưng vẫn còn một chặng đường dài trước khi mọi người hiểu rõ về vai trò của typeface.</p> <p>Pilatos nói: “Tôi nghĩ rằng cộng đồng còn thiếu kiến ​​thức. Mọi người không hiểu rằng bạn cần trả tiền bản quyền font, cũng như đôi khi họ không hiểu rằng khi bạn chụp một hình ảnh, bạn không có quyền sở hữu vĩnh viễn. Nói chung còn tồn đọng rất nhiều lỗ hổng kiến thức về việc cấp phép."</p> <p>Ngày nay, Pilatos sử dụng các buổi thuyết trình của công ty như một cơ hội để thảo luận về các font chữ thương hiệu của Scotiabank và việc cấp phép đi kèm với chúng. Các buổi roadshow là một cơ hội để chia sẻ tin tức của công ty với 14 văn phòng toàn cầu, cũng là dịp để giải thích về giấy phép doanh nghiệp toàn cầu. Scotiabank cũng đã thêm thông tin vào các tiêu chuẩn thương hiệu của mình để chia sẻ thông tin với các nhóm trong toàn bộ công ty.</p> <p>“Về mặt nhân lực, điều quan trọng là các nhân viên mới phải hiểu các tiêu chuẩn thương hiệu của chúng tôi. Tự do sử dụng phông chữ của riêng mình khiến chúng tôi yên tâm hơn.” cô nói thêm. “Biết chắc rằng chúng tôi có thể sử dụng font doanh nghiệp theo bất cứ cách nào phù hợp trong mười năm tới là điều vô cùng hữu ích.”</p> <h2>Bài học cho doanh nghiệp</h2> <p>Có thể nhận xét rằng, bài toán chi phí bản quyền font chữ còn bị coi nhẹ ở Việt Nam. Tuy nhiên, khi các tập đoàn lớn ngày càng phát triển hơn và vươn ra biển lớn, sự lựa chọn typeface từ những ngày đầu có thể trở nên đắt đỏ sau này nếu các doanh nghiệp không cẩn thận.</p> <p>Giải pháp tối ưu nhất có lẽ là phát triển một hệ thống font chữ custom dành riêng cho doanh nghiệp. Điều này sẽ góp phần khẳng định bản sắc thương hiệu cũng như tránh khỏi các rắc rối khi áp dụng font chữ vào nhiều nền tảng khác nhau. Về lâu về dài, điều này cũng giúp tiết kiệm chi phí khi doanh nghiệp có thể tự tin sử dụng font chữ trên toàn cầu mà không lo lắng về hạn của các loại giấy phép bản quyền.</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/muon-neo-duong-ngat-ngoeo-voi-font-tieng-viet" hreflang="vi">Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt</a> <a href="/vi/hop-tac-agency-chuyen-tha-thinh-cua-cac-clients" hreflang="vi">Hợp tác Agency: Chuyện thả thính của các clients</a> <a href="/vi/he-thong-thiet-ke-design-system" hreflang="vi">Hệ thống thiết kế (Design System) — Nghệ thuật để mở rộng thiết kế</a> <a href="/vi/banking-as-a-service-open-banking" hreflang="vi">Mô hình Banking as a Service thúc đẩy việc ứng dụng Open Banking</a> <a href="/vi/checklist-nhung-dieu-can-chuan-bi-truoc-mot-du-branding" hreflang="vi">Checklist Những Điều Cần Chuẩn Bị Trước Một Dự Án Branding</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Tue, 20 Dec 2022 07:48:46 +0000 content2 300 at http://beau.vn Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt http://beau.vn/vi/muon-neo-duong-ngat-ngoeo-voi-font-tieng-viet <span class="field field--name-title field--type-string field--label-hidden">Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/38" typeof="schema:Person" property="schema:name" datatype="">content</span></span> <span class="field field--name-created field--type-created field--label-hidden">T2, 05/30/2022 - 16:11</span> <a href="/vi/cam-hung-thiet-ke-sang-tao" hreflang="vi">Cảm hứng thiết kế sáng tạo</a> <p class="text-align-justify">Font chữ và ngành công nghiệp làm font đã có lịch sử hàng nghìn năm. Kể từ thế kỷ 15, máy in được phát minh và đi theo đó, việc thiết kế và chuẩn hóa font cũng được chú trọng hơn. Tính tới nay, đã gần 6 thế kỷ trôi qua, font chữ hiện đã có mặt khắp nơi, gắn với nhiều hoạt động của con người.</p> <p class="text-align-justify">Tuy có lịch sử dài như vậy nhưng khi xét cụ thể với font chữ Tiếng Việt, ngành công nghiệp này gần như không tồn tại. Nguyên do của việc này là bởi sự chậm tiến về kỹ thuật, đồng thời, do bản thân bộ chữ Tiếng Việt cũng là một ngôn ngữ rất mới. Nếu Tiếng Anh, Tiếng Đức hay Tiếng Pháp đã có hàng nghìn năm, thì bộ chữ Quốc Ngữ của chúng ta mới chỉ xuất hiện trên dưới 400 năm, được đi vào sử dụng chính thức khoảng 150 năm trở lại đây. </p> <p class="text-align-justify"><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu"><em><strong>=&gt; Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ    </strong></em></a></p> <p class="text-align-justify">Sinh sau đẻ muộn, lại được xây dựng dựa trên bộ chữ Latinh, vậy nên font chữ Tiếng Việt cũng bị ảnh hưởng mạnh mẽ bởi những font chữ Latinh trước đó. Đặc biệt là khi di chuyển tới thời kỳ internet, khi font chữ được số hóa, dễ dàng được chia sẻ, nó tạo ra một thuật ngữ thường được nhắc tới trong giới thiết kế là “font Việt hóa”.</p> <p class="text-align-justify">Tuy những bộ font Việt hóa này lấy từ những font Tiếng Anh, với bảng chữ cái tương tự, nhưng về bản chất Tiếng Anh và Tiếng Việt vẫn là hai ngôn ngữ khác nhau. Những font chữ này vốn không được thiết kế để phù hợp với bảng chữ cái Tiếng Việt, vậy nên, khi chúng ta mang chúng về và “Việt hóa” chúng ta sẽ gặp rất nhiều rào cản. Những rào cản ấy là gì?</p> <p class="text-align-justify"><strong>Xem thêm: <a href="https://beautique.vn/insight/10-nhan-dien-thuong-hieu-dep-va-hieu-qua-tu-brands" target="_blank"><em>10 nhận diện thương hiệu đẹp và hiệu quả từ brands</em></a>    </strong></p> <h2 class="text-align-justify">Sự khác biệt giữa Tiếng Anh và Tiếng Việt</h2> <p class="text-align-justify">Dù Tiếng Anh và Tiếng Việt cùng là ngôn ngữ thuộc hệ chữ Latin, nhưng với Tiếng Việt chúng ta một bảng chữ cái phức tạp hơn và nó đặc biệt phức tạp khi chúng được thêm dấu.</p> <p class="text-align-justify">Nếu bảng chữ cái Tiếng Anh có 26 ký tự, thì bảng chữ cái Tiếng Việt có 29 ký tự. Trong đó, Tiếng Anh có những chữ cái mà Tiếng Việt không có, như: f, j, w, z. Nhưng ngược lại, Tiếng Việt có thêm dấu chữ, tạo ra các biến thể chữ mà Tiếng Anh không có là: ă, â, ê, đ, ô, ơ, ư.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="1da1a225-c32b-4010-835a-f15f22df8120" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-1_1.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <p class="text-align-justify">Như vậy với Tiếng Anh, số lượng các cặp ký tự sẽ ít hơn Tiếng Anh. Ví dụ, trong Tiếng Anh sẽ chỉ có cặp n-a, mà sẽ không có các cặp n-ă, n-â, tương tự, Tiếng Anh là h-o thì Tiếng Việt sẽ là cả h-o và cả h-ô, h-ơ.</p> <p class="text-align-justify">Và đặc biệt, ngoài dấu chữ, Tiếng Việt còn có dấu giọng (thanh dấu), gồm: huyền, sắc, ngã, nặng, hỏi, khiến cho một cặp n-a trong Tiếng Anh có thể trở thành 18 cặp trong Tiếng Việt là: n-a, n-à, n-á, n-ã, n-ạ, n-ả, n-ă, n-ằ, n-ắ, n-ẵ, n-ặ, n-ẳ, n-â, n-ầ, n-ấ, n-ẫ, n-ậ, n-ẩ.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="11e90afb-8af4-4ae5-abcc-71d28ab7ab4b" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-2_0.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <p class="text-align-justify">Với sự phức tạp này, khi làm việc với font Tiếng Việt chúng ta sẽ đối mặt với những thách thức gì?</p> <h2 class="text-align-justify">Thách thức với font Tiếng Việt</h2> <h3 class="text-align-justify">Hai tầng dấu</h3> <p class="text-align-justify">Tiếng Việt không phải là ngôn ngữ duy nhất có dấu, Tiếng Pháp hay Tiếng Tây Ban Nha cũng có dấu. Tuy nhiên, Tiếng Việt là ngôn ngữ duy nhất có 2 tầng dấu. Ví dụ, từ “đố” là một từ có 2 tầng dấu, gồm cả dấu chữ lẫn dấu giọng.</p> <p class="text-align-justify">Việc có 2 tầng dấu này tạo ra nhiều thách thức cho việc thiết kế font. Thứ nhất, nó ảnh hưởng tới khoảng cách dòng. Với 2 tầng dấu, mật độ của khoảng dương (chữ) sẽ trở nên  dầy hơn, khiến cho khoảng âm (khoảng trống) bị hẹp lại. Trong trường hợp này, nếu chúng ta giữ nguyên khoảng cách dòng như với Tiếng Anh, khả năng cao nó sẽ gây khó đọc.</p> <p class="text-align-justify"><strong>Xem thêm: <a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-2-ket-hop-typeface"><em>Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface </em></a></strong></p> <p class="text-align-justify">Điều ấy khiến chúng ta phải cân nhắc tới việc thu nhỏ hoặc thay đổi vị trí dấu. Nhưng nó cũng sẽ trở thành vấn đề thứ hai. Việc thu nhỏ dấu có thể bất hợp lý bới thiết kế font không phù hợp với dấu nhỏ. Tương tự, thay đổi vị trí dấu cũng có thể tạo ra vấn đề kerning.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="edb47edd-f370-49db-b5b1-d35b6f5ffe14" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-5_0.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <h3 class="text-align-justify">Font Tiếng Việt đặt vị trí dấu như thế nào?</h3> <p class="text-align-justify">Trong trường hợp đứng một mình, những chữ cái không có dấu chữ hoặc có là dấu móc, dấu trăng (mũ ngược), việc đặt dấu giọng khá đơn giản. Chúng ta có thể căn giữa, hoặc căn theo trục chữ (đối với font chữ nghiêng). </p> <p class="text-align-justify">Nhưng với những ký tự kèm dấu mũ, ví dụ như â, ô, ê, khi đi cùng dấu sắc hoặc huyền, việc đặt dấu sẽ cần xem xét kỹ hơn. Bởi dấu mũ chiếm một khoảng trống tương đối tính từ x-height lên tới đỉnh mũ, việc thêm thanh dấu ngay chính giữa khiến chữ được cân bằng hơn nhưng lại làm tăng diện tích dấu, có thể làm ảnh hưởng tới khoảng trống cần thiết của khoảng cách dòng.</p> <p class="text-align-justify"><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke"><em><strong>=&gt; Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App</strong></em></a></p> <p class="text-align-justify">Thông thường, dấu sắc và dấu huyền được đặt bên phải của dấu mũ, nó giải quyết vấn đề về khoảng trống nhưng không gây cảm giác khó đọc. Dù vậy, hai dấu này vẫn có thể đặt bên trái nếu nó phù hợp với thiết kế của chữ.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="d6ec6453-33b3-4352-8849-e294a8dfc9d1" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-3_1.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <p class="text-align-justify">Ngoài ra, việc đặt dấu cũng sẽ gặp vấn đề khi chữ cái kết hợp thành cặp. Ví dụ như với cặp ố-t, nếu dấu sắc đặt quá sát về phía chữ t bên trái có thể tạo ra khoảng dấp dính, gẫy khó đọc.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="adfb7283-04e0-4cbb-b12d-4e002074d10e" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-4_0.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <h3 class="text-align-justify">Kerning trong <a href="https://beau.vn/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">font tiếng Việt</a></h3> <p class="text-align-justify">Cũng với ví dụ của cặp ố-t, để giải quyết vấn đề này chúng ta cần điều chỉnh khoảng trống giữ hai cặp, sao cho giải được vấn đề khó đọc nhưng vẫn giữ đảm bảo tính thẩm mỹ và nhịp điều (giữa chữ và khoảng trống) trong tổng thể font chữ.</p> <p class="text-align-justify"><strong>Xem thêm: <a href="https://beautique.vn/insight/nhan-dien-thuong-hieu-hoc-duoc-gi-tu-logo-cua-starbucks" target="_blank"><em>Nhận diện thương hiệu: Học được gì từ logo của Starbucks?</em></a>    </strong></p> <p class="text-align-justify">Tương tự, với những ký tự có dấu móc như ơ và ư, cũng khiến cho việc kerning trở nên khó khăn hơn. Nếu với o hay u, các cặp đi cùng chúng có thể được kerning theo strem của chữ. Vì không có dấu móc nên khoảng cách này cũng sẽ khá giống với khoảng cách khi chúng ta kerning cho các ký tự như a, b, e, p. Tuy nhiên, với ơ hay ư, khi có dấu móc bên phải, việc kerning không thể giống với o, u, thường khoảng cách sẽ phải rộng hơn. Đồng thời khi thiết kế chữ, designer cũng phải xem xét tới yếu tố này để quyết định hình dạng và kích thước của dấu móc.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="60c2fba2-0827-4c7c-b12b-de813b0c1b65" height="509" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-6_0.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <h3 class="text-align-justify">Trọng lượng dấu</h3> <p class="text-align-justify">Không chỉ có dấu móc, hình dạng và kích thước của các dấu khác cũng ảnh hưởng tới các yếu tố khác của font chữ. Bởi vậy, thiết kế của dấu nên được xem xét ngay từ khi bắt đầu thiết kế font chữ.</p> <p class="text-align-justify">Tuy nhiên việc thiết kế dấu Tiếng Việt gặp phải thách thức về việc xác định trọng lượng (diện tích) của dấu. Thường designer sẽ không muốn để trọng lượng dấu lớn bởi sẽ gây khó khăn trong việc điều chỉnh các khoảng cách chữ. Đặc biệt là khi viết hoa, ví dụ như chữ “HẰNG”, dấu của chữ sẽ còn cao hơn cả cap height.</p> <p class="text-align-justify">Dù vậy, trọng lượng dấu quá nhỏ cũng có thể là vấn đề. Với thiết kế dấu nhỏ, mặt chữ sẽ trở nên khó nhận diện. Ví dụ, chữ “chú” hoàn toàn có thể bị đọc nhầm thành “chu”.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="c8229776-a4ae-45b9-8b54-f125b8d9b6e7" height="509" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-7_0.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <h3 class="text-align-justify">Hình dạng dấu trong <a href="https://beau.vn/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">font Tiếng Việt</a></h3> <p class="text-align-justify">Như đã nói, hình dạng dấu tương quan với các yếu tốc khác của toàn bộ font chữ. Hình dạng dấu cần được thiết kế sao cho đáp ứng đủ những tiêu chí về khả năng đọc, nhận diện mặt chữ nhưng cũng phải phù hợp và hài hòa với thiết kế font chữ tổng thể.</p> <p class="text-align-justify">Đây là vấn đề phổ biến nhất của các bộ font chữ Việt hóa. Bởi khi thêm dấu cho một font chữ đã hoàn thiện, việc thiết kế chúng như thế nào để nó được đồng nhất với thiết kế của font là vô cùng khó. </p> <p class="text-align-justify">Bởi vậy mà dấu của font chữ Việt hóa thường xấu, không có cùng ngôn ngữ thị giác với font chữ gốc. Còn ngược lại, nếu chúng ta thiết kế một bộ dấu phù hợp với thiết kế font chữ thì chúng ta vẫn phải điều chỉnh lại toàn bộ các yếu tố khoảng cách. Dù điểu chỉnh xong chưa chắc đã ra một bộ font đẹp.</p> <img alt="font tiếng việt" data-entity-type="file" data-entity-uuid="dbe0c465-5467-4213-8d4d-08938073e8f7" height="509" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-8_0.jpg" width="762" class="align-center" loading="lazy" /><p class="text-align-justify"> </p> <p class="text-align-justify"><strong>Xem thêm: <a href="https://beau.vn/vi/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website"><em>Bạn đã biết về Quy tắc thiết kế UI cho website?</em></a></strong></p> <p> </p> <a href="/vi/typography" hreflang="vi">Typography</a> <a href="/vi/thiet-ke-ui" hreflang="vi">Thiết kế UI</a> <a href="/vi/ui" hreflang="vi">UI</a> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung" hreflang="vi">UX/UI</a> <a href="/vi/typo" hreflang="vi">Typo</a> <a href="/vi/font-chu" hreflang="vi">Font chữ</a> <a href="/vi/font-tieng-viet" hreflang="vi">Font Tiếng Việt</a> <a href="/vi/humanist-typeface" hreflang="vi">Humanist Typeface</a> <a href="/vi/typeface" hreflang="vi">Typeface</a> <a href="/vi/web-design" hreflang="vi">web design</a> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-06/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-cover_1920x650px.jpg" alt="Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2></h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu">Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">Thiết kế UI: Những yếu tố cơ bản trong Typography những &quot;tay mơ&quot; cần biết <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/11-nguyen-tac-thiet-ke-web-se-tang-ty-le-chuyen-doi-cua-ban">11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p class="text-align-justify">Font chữ và ngành công nghiệp làm font đã có lịch sử hàng nghìn năm. Kể từ thế kỷ 15, máy in được phát minh và đi theo đó, việc thiết kế và chuẩn hóa font cũng được chú trọng hơn. Tính tới nay, đã gần 6 thế kỷ trôi qua, font chữ hiện đã có mặt khắp nơi, gắn với nhiều hoạt động của con người.</p> <p class="text-align-justify">Tuy có lịch sử dài như vậy nhưng khi xét cụ thể với font chữ Tiếng Việt, ngành công nghiệp này gần như không tồn tại. Nguyên do của việc này là bởi sự chậm tiến về kỹ thuật, đồng thời, do bản thân bộ chữ Tiếng Việt cũng là một ngôn ngữ rất mới. Nếu Tiếng Anh, Tiếng Đức hay Tiếng Pháp đã có hàng nghìn năm, thì bộ chữ Quốc Ngữ của chúng ta mới chỉ xuất hiện trên dưới 400 năm, được đi vào sử dụng chính thức khoảng 150 năm trở lại đây.&nbsp;</p> <p class="text-align-justify"><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu"><em><strong>=&gt;&nbsp;Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ&nbsp;&nbsp; &nbsp;</strong></em></a></p> <p class="text-align-justify">Sinh sau đẻ muộn, lại được xây dựng dựa trên bộ chữ Latinh, vậy nên font chữ Tiếng Việt cũng bị ảnh hưởng mạnh mẽ bởi những font chữ Latinh trước đó. Đặc biệt là khi di chuyển tới thời kỳ internet, khi font chữ được số hóa, dễ dàng được chia sẻ, nó tạo ra một thuật ngữ thường được nhắc tới trong giới thiết kế là “font Việt hóa”.</p> <p class="text-align-justify">Tuy những bộ font Việt hóa này lấy từ những font Tiếng Anh, với bảng chữ cái tương tự, nhưng về bản chất Tiếng Anh và Tiếng Việt vẫn là hai ngôn ngữ khác nhau. Những font chữ này vốn không được thiết kế để phù hợp với bảng chữ cái Tiếng Việt, vậy nên, khi chúng ta mang chúng về và “Việt hóa” chúng ta sẽ gặp rất nhiều rào cản. Những rào cản ấy là gì?</p> <p class="text-align-justify"><strong>Xem thêm:&nbsp;<a href="https://beautique.vn/insight/10-nhan-dien-thuong-hieu-dep-va-hieu-qua-tu-brands" target="_blank"><em>10 nhận diện thương hiệu đẹp và hiệu quả từ brands</em></a>&nbsp;&nbsp; &nbsp;</strong></p> <h2 class="text-align-justify">Sự khác biệt giữa Tiếng Anh và Tiếng Việt</h2> <p class="text-align-justify">Dù Tiếng Anh và Tiếng Việt cùng là ngôn ngữ thuộc hệ chữ Latin, nhưng với Tiếng Việt chúng ta một bảng chữ cái phức tạp hơn và nó đặc biệt phức tạp khi chúng được thêm dấu.</p> <p class="text-align-justify">Nếu bảng chữ cái Tiếng Anh có 26 ký tự, thì bảng chữ cái Tiếng Việt có 29 ký tự. Trong đó, Tiếng Anh có những chữ cái mà Tiếng Việt không có, như: f, j, w, z. Nhưng ngược lại, Tiếng Việt có thêm dấu chữ, tạo ra các biến thể chữ mà Tiếng Anh không có là: ă, â, ê, đ, ô, ơ, ư.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="1da1a225-c32b-4010-835a-f15f22df8120" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-1_1.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <p class="text-align-justify">Như vậy với Tiếng Anh, số lượng các cặp ký tự sẽ ít hơn Tiếng Anh. Ví dụ, trong Tiếng Anh sẽ chỉ có cặp n-a, mà sẽ không có các cặp n-ă, n-â, tương tự, Tiếng Anh là h-o thì Tiếng Việt sẽ là cả h-o và cả h-ô, h-ơ.</p> <p class="text-align-justify">Và đặc biệt, ngoài dấu chữ, Tiếng Việt còn có dấu giọng (thanh dấu), gồm: huyền, sắc, ngã, nặng, hỏi, khiến cho một cặp n-a trong Tiếng Anh có thể trở thành 18 cặp trong Tiếng Việt là: n-a, n-à, n-á, n-ã, n-ạ, n-ả, n-ă, n-ằ, n-ắ, n-ẵ, n-ặ, n-ẳ, n-â, n-ầ, n-ấ, n-ẫ, n-ậ, n-ẩ.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="11e90afb-8af4-4ae5-abcc-71d28ab7ab4b" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-2_0.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <p class="text-align-justify">Với sự phức tạp này, khi làm việc với font Tiếng Việt chúng ta sẽ đối mặt với những thách thức gì?</p> <h2 class="text-align-justify">Thách thức với font Tiếng Việt</h2> <h3 class="text-align-justify">Hai tầng dấu</h3> <p class="text-align-justify">Tiếng Việt không phải là ngôn ngữ duy nhất có dấu, Tiếng Pháp hay Tiếng Tây Ban Nha cũng có dấu. Tuy nhiên, Tiếng Việt là ngôn ngữ duy nhất có 2 tầng dấu. Ví dụ, từ “đố” là một từ có 2 tầng dấu, gồm cả dấu chữ lẫn dấu giọng.</p> <p class="text-align-justify">Việc có 2 tầng dấu này tạo ra nhiều thách thức cho việc thiết kế font. Thứ nhất, nó ảnh hưởng tới khoảng cách dòng. Với 2 tầng dấu, mật độ của khoảng dương (chữ) sẽ trở nên &nbsp;dầy hơn, khiến cho khoảng âm (khoảng trống) bị hẹp lại. Trong trường hợp này, nếu chúng ta giữ nguyên khoảng cách dòng như với Tiếng Anh, khả năng cao nó sẽ gây khó đọc.</p> <p class="text-align-justify"><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-2-ket-hop-typeface"><em>Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface&nbsp;</em></a></strong></p> <p class="text-align-justify">Điều ấy khiến chúng ta phải cân nhắc tới việc thu nhỏ hoặc thay đổi vị trí dấu. Nhưng nó cũng sẽ trở thành vấn đề thứ hai. Việc thu nhỏ dấu có thể bất hợp lý bới thiết kế font không phù hợp với dấu nhỏ. Tương tự, thay đổi vị trí dấu cũng có thể tạo ra vấn đề kerning.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="edb47edd-f370-49db-b5b1-d35b6f5ffe14" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-5_0.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <h3 class="text-align-justify">Font Tiếng Việt đặt vị trí dấu như thế nào?</h3> <p class="text-align-justify">Trong trường hợp đứng một mình, những chữ cái không có dấu chữ hoặc có là dấu móc, dấu trăng (mũ ngược), việc đặt dấu giọng khá đơn giản. Chúng ta có thể căn giữa, hoặc căn theo trục chữ (đối với font chữ nghiêng).&nbsp;</p> <p class="text-align-justify">Nhưng với những ký tự kèm dấu mũ, ví dụ như â, ô, ê, khi đi cùng dấu sắc hoặc huyền, việc đặt dấu sẽ cần xem xét kỹ hơn. Bởi dấu mũ chiếm một khoảng trống tương đối tính từ x-height lên tới đỉnh mũ, việc thêm thanh dấu ngay chính giữa khiến chữ được cân bằng hơn nhưng lại làm tăng diện tích dấu, có thể làm ảnh hưởng tới khoảng trống cần thiết của khoảng cách dòng.</p> <p class="text-align-justify"><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke"><em><strong>=&gt;&nbsp;Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App</strong></em></a></p> <p class="text-align-justify">Thông thường, dấu sắc và dấu huyền được đặt bên phải của dấu mũ, nó giải quyết vấn đề về khoảng trống nhưng không gây cảm giác khó đọc. Dù vậy, hai dấu này vẫn có thể đặt bên trái nếu nó phù hợp với thiết kế của chữ.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="d6ec6453-33b3-4352-8849-e294a8dfc9d1" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-3_1.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <p class="text-align-justify">Ngoài ra, việc đặt dấu cũng sẽ gặp vấn đề khi chữ cái kết hợp thành cặp. Ví dụ như với cặp ố-t, nếu dấu sắc đặt quá sát về phía chữ t bên trái có thể tạo ra khoảng dấp dính, gẫy khó đọc.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="adfb7283-04e0-4cbb-b12d-4e002074d10e" height="508" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-4_0.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <h3 class="text-align-justify">Kerning trong <a href="https://beau.vn/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">font tiếng Việt</a></h3> <p class="text-align-justify">Cũng với ví dụ của cặp ố-t, để giải quyết vấn đề này chúng ta cần điều chỉnh khoảng trống giữ hai cặp, sao cho giải được vấn đề khó đọc nhưng vẫn giữ đảm bảo tính thẩm mỹ và nhịp điều (giữa chữ và khoảng trống) trong tổng thể font chữ.</p> <p class="text-align-justify"><strong>Xem thêm:&nbsp;<a href="https://beautique.vn/insight/nhan-dien-thuong-hieu-hoc-duoc-gi-tu-logo-cua-starbucks" target="_blank"><em>Nhận diện thương hiệu: Học được gì từ logo của Starbucks?</em></a>&nbsp;&nbsp; &nbsp;</strong></p> <p class="text-align-justify">Tương tự, với những ký tự có dấu móc như ơ và ư, cũng khiến cho việc kerning trở nên khó khăn hơn. Nếu với o hay u, các cặp đi cùng chúng có thể được kerning theo strem của chữ. Vì không có dấu móc nên khoảng cách này cũng sẽ khá giống với khoảng cách khi chúng ta kerning cho các ký tự như a, b, e, p. Tuy nhiên, với ơ hay ư, khi có dấu móc bên phải, việc kerning không thể giống với o, u, thường khoảng cách sẽ phải rộng hơn. Đồng thời khi thiết kế chữ, designer cũng phải xem xét tới yếu tố này để quyết định hình dạng và kích thước của dấu móc.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="60c2fba2-0827-4c7c-b12b-de813b0c1b65" height="509" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-6_0.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <h3 class="text-align-justify">Trọng lượng dấu</h3> <p class="text-align-justify">Không chỉ có dấu móc, hình dạng và kích thước của các dấu khác cũng ảnh hưởng tới các yếu tố khác của font chữ. Bởi vậy, thiết kế của dấu nên được xem xét ngay từ khi bắt đầu thiết kế font chữ.</p> <p class="text-align-justify">Tuy nhiên việc thiết kế dấu Tiếng Việt gặp phải thách thức về việc xác định trọng lượng (diện tích) của dấu. Thường designer sẽ không muốn để trọng lượng dấu lớn bởi sẽ gây khó khăn trong việc điều chỉnh các khoảng cách chữ. Đặc biệt là khi viết hoa, ví dụ như chữ “HẰNG”, dấu của chữ sẽ còn cao hơn cả cap height.</p> <p class="text-align-justify">Dù vậy, trọng lượng dấu quá nhỏ cũng có thể là vấn đề. Với thiết kế dấu nhỏ, mặt chữ sẽ trở nên khó nhận diện. Ví dụ, chữ “chú” hoàn toàn có thể bị đọc nhầm thành “chu”.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="c8229776-a4ae-45b9-8b54-f125b8d9b6e7" height="509" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-7_0.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <h3 class="text-align-justify">Hình dạng dấu trong <a href="https://beau.vn/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">font Tiếng Việt</a></h3> <p class="text-align-justify">Như đã nói, hình dạng dấu tương quan với các yếu tốc khác của toàn bộ font chữ. Hình dạng dấu cần được thiết kế sao cho đáp ứng đủ những tiêu chí về khả năng đọc, nhận diện mặt chữ nhưng cũng phải phù hợp và hài hòa với thiết kế font chữ tổng thể.</p> <p class="text-align-justify">Đây là vấn đề phổ biến nhất của các bộ font chữ Việt hóa. Bởi khi thêm dấu cho một font chữ đã hoàn thiện, việc thiết kế chúng như thế nào để nó được đồng nhất với thiết kế của font là vô cùng khó.&nbsp;</p> <p class="text-align-justify">Bởi vậy mà dấu của font chữ Việt hóa thường xấu, không có cùng ngôn ngữ thị giác với font chữ gốc. Còn ngược lại, nếu chúng ta thiết kế một bộ dấu phù hợp với thiết kế font chữ thì chúng ta vẫn phải điều chỉnh lại toàn bộ các yếu tố khoảng cách. Dù điểu chỉnh xong chưa chắc đã ra một bộ font đẹp.</p> <img alt="font tiếng việt" data-align="center" data-entity-type="file" data-entity-uuid="dbe0c465-5467-4213-8d4d-08938073e8f7" height="509" src="/sites/default/files/muon-neo-duong-ngat-ngoeo-voi-font-chu-tieng-viet-8_0.jpg" width="762" /> <p class="text-align-justify">&nbsp;</p> <p class="text-align-justify"><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website"><em>Bạn đã biết về Quy tắc thiết kế UI cho website?</em></a></strong></p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/nghe-thiet-ke-trai-nghiem-nguoi-dung-ui-ux-designer-co-phai-nghe-sieu-de" hreflang="vi">Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải &quot;nghề siêu dễ&quot;?</a> <a href="/vi/mo-rong-tu-duy-thiet-ke-voi-futures-thinking" hreflang="vi">Mở rộng tư duy thiết kế với Futures Thinking</a> <a href="/vi/muon-neo-duong-ngat-ngoeo-voi-font-tieng-viet" hreflang="vi">Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Mon, 30 May 2022 09:11:30 +0000 content 223 at http://beau.vn