Font chữ

Sử dụng web font như thế nào - Guide hoàn chỉnh từ BeauType

content2 — Thu, 09 Mar 2023 07:51:23 +0000

Sử dụng web font như thế nào - Guide hoàn chỉnh từ BeauType content2 T5, 03/09/2023 - 14:51 Branding

Bài viết này sẽ đem đến các kiến thức cơ bản dễ nắm vững và dễ áp dụng. Chúng tôi cũng sẽ cung cấp các nguồn chuyên sâu hơn để giúp các developer có thể hoàn thiện tất cả các khía cạnh của việc sử dụng web font.

typo tập đoàn Font chữ

Thiết kế phông chữ độc quyền là một trong những yếu tố nhận diện thương hiệu cao cấp mà doanh nghiệp nào cũng nên cân nhắc. Tuy nhiên, sau đó, làm sao để sử dụng font này trên website?

Font formats

Khi bạn thiết kế hoặc mua bản quyền web font, bạn sẽ nhận được một gói tệp font bao gồm các định dạng sau:

Web Open Font Format (WOFF): Được phát triển vào năm 2009 dưới dạng wrapper cho font TrueType và OpenType. WOFF nén các tệp file và được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Web Open Font Format 2 (WOFF2): Đây là bản cập nhật cho định dạng WOFF gốc. Được phát triển bởi Google, đây được coi là định dạng tốt nhất vì nó cung cấp các kích thước tệp nhỏ hơn và hiệu suất tốt hơn cho các trình duyệt hiện đại.

TrueType (TTF): Đây là một định dạng font được phát triển bởi Microsoft và Apple vào những năm 1980. Tệp TTF hiện đại còn được gọi là font TrueType OpenType. TTF khá hữu ích để mở rộng sự hỗ trợ cho các trình duyệt cũ hơn, đặc biệt là trên điện thoại di động nếu bạn cần.

Embedded OpenType (EOT): Đây là một định dạng kế thừa do Microsoft phát triển. Các phiên bản Internet Explorer cú hơn yêu cầu EOT để hiển thị web font. EOT thường được serve dưới dạng không nén, vì vậy, nếu bạn không yêu cầu hỗ trợ trình duyệt IE8 trở xuống, bạn sẽ không cần định dạng này.

Nếu bạn chủ yếu nhắm tới người dùng và trình duyệt hiện đại, WOFF và WOFF2 là đủ. Hai định dạng này cung cấp khả năng nén tốt nhất và cho phép bạn xử lý ít tệp hơn trong bộ code.

Nếu thiết bị người dùng quá cũ đến mức không hỗ trợ một trong hai định dạng này, bạn nên cung cấp chỉ một font hệ thống duy nhất để đảm bảo hiệu suất. Nếu bạn cần mở rộng sự hỗ trợ, hãy lựa chọn TTF.

Embed Web Fonts

@font-face là một giao thức để thêm font vào CSS. Đây là mức sử dụng sâu nhất trên web, hỗ trợ tất cả các định dạng tệp mà chúng ta đã nhắc đến ở trên.

@font-face { 
font-family: FontName;  
src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'), url('path/filename.ttf') format('truetype'); 
}

Bạn có thể bỏ đi một chút code nếu chỉ cần hỗ trợ các trình duyệt hiện đại:

@font-face { 
font-family: FontName; 
src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'); 
}

Sau khi hệ thống đã nhận font, ta có thể bắt đầu sử dụng font cho các đối tượng khác nhau. Ví dụ:

body { 
font-family: 'FontName', Helvetica, Arial, sans-serif; 
}

Host Web Fonts

Cách linh hoạt nhất để sử dụng web font là tự host. Nghĩa là bạn lưu trữ các tệp trên máy chủ riêng mình và font sẽ luôn có sẵn để sử dụng khi khách truy cập vào trang web mà không cần sự phụ thuộc vào một bên thứ ba. Bạn sẽ không cần track code hoặc Javascript để tải các tệp font tự host.

Khi bạn ký hợp đồng phát triển custom typeface, hãy để ý liệu bạn có thể tải xuống để tự lưu trữ và host, vì theo quan điểm của chúng tôi, đó vẫn là cách tốt nhất để sử dụng. Một vài bên cung cấp giải pháp lưu trữ hộ, nhưng cũng khiến bạn phụ thuộc vào dịch vụ lưu trữ và cam kết về khả năng hoạt động của họ.

Điều này dẫn đến lưu ý sau: Hãy đảm bảo là bạn hiểu hợp đồng sử dụng web font của bên cung cấp, vì sự khác biệt về lựa chọn lưu trữ và điều khoản sử dụng có thể ảnh hưởng đến cách bạn triển khai typeface.

Tại Beau, chúng tôi luôn cung cấp đầy đủ giấy phép và tệp file để khách hàng có thể tự lưu trữ và host trên bất kỳ nền tảng nào.

Đọc thêm: 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

Tính năng nâng cao

Hãy xem xét một số tính năng nâng cao hơn của web font.

Spacing và Kerning

Đây là hai cài đặt bạn có thể sử dụng trong tệp file web font để xác định khoảng cách giữa các ký tự:

Spacing: Sử dụng thông số này để điều chỉnh side bearing - khoảng cách ở bên trái và bên phải của mỗi ký tự.
Kerning: Sử dụng thông số này để điều chỉnh sự kết hợp khoảng cách giữa các ký tự cụ thể.

Trên website, bạn không thể tắt spacing vì nếu không trình duyệt sẽ không thể render được các kỹ tự. Tuy nhiên, một số trình duyệt cũ hơn có thể tắt kerning theo mặc định và bạn cần bật lên trong file CSS.

Kiểm soát kerning thật ra khá dễ dàng, đây là cách để kích hoạt trên tất cả các trình duyệt.

p { 
font-feature-settings: "kern" 1; font-kerning: normal; 
}

Nếu bạn không sử dụng Autoprefixer để giúp quản lý trình duyệt trong CSS thì bạn sẽ cần ghi thủ công các prefix cho cài đặt kerning để mở rộng sự hỗ trợ cho các trình duyệt cũ hơn.

/* All vendor prefixes for `font-feature-settings` */ 
p { 
-moz-font-feature-settings: "kern" 1; 
-ms-font-feature-settings: "kern" 1; 
-o-font-feature-settings: "kern" 1; 
-webkit-font-feature-settings: "kern" 1; 
font-feature-settings: "kern" 1; 
font-kerning: normal; 
}

Tính năng nâng cao cho OpenType

Bạn cũng có thể sử dụng cài đặt để kiểm soát nhiều tính năng nâng cao khác với OpenType. Có rất nhiều tiềm năng sử dụng và bạn cũng không cần sử dụng nhiều file để có được một hiệu ứng. Tuy nhiên, hãy hỏi xem liệu font designer của bạn có sử dụng các tính năng của OpenType hay không.

Để mô tả cách các tính năng nâng cao của OpenType có thể được sử dụng cùng nhau, hãy xem đoạn code sau. Đoạn code này sẽ kích hoạt các ký tự số của font để hỗ trợ của chữ số cơ bản (onum) và chữ số tỷ lệ (pnum), đồng thời bật kerning và vài style khác trong font:

.my-element { 
font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1; 
}

Dưới đây là danh sách các tính năng bạn có thể dùng trong cách kiểu typeface:

kern: Kerning rất quan trọng để có khoảng cách hợp lý giữa các ký tự. Mặc định bật.
liga: Các kiểu chữ ghép phổ biến như fi và fl. Mặc định bật.
dlig: Các kiểu chữ ghép hiếm gặp hơn và có thể không cần luôn bật. Ví dụ như sự kết hợp giữa s và t.
calt: Các lựa chọn hiển thị tuỳ theo ngữ cảnh, thường dùng với các kiểu chữ script.
smcp: Small Caps để biến chữ cái thường thành chữ hoa nhỏ, trong khi các chữ viết hoa thì vẫn giữ nguyên.
c2sc: Small Caps from Caps. Nếu bạn muốn tất cả các ký tự trong một câu có kích cỡ giống nhau, tính năng này sẽ biến cả chữ hoa thành chữ hoa nhỏ. Thường dùng với Small Caps.
lnum: Lining numerals - Đặt các số trên một đường baseline và có cùng chiều cao với các chữ viết hoa.
onum: Old style numeral thường được dùng nhiều trong văn bản bodycopy, đặc biệt là với các kiểu chữ serif. Một số con số nằm bên dưới đường cơ sở và có chiều cao thay đổi để phù hợp với chữ.
pnum: Proportional numeral - số tỷ lệ sẽ chiếm nhiều hoặc ít không gian tuỳ theo con số.
tnum: Tabular numeral - các chữ số dạng bảng chiếm diện tích giống nhau.
ss01-ss20: Các set style chứa các thiết kế thay thế cho các chữ cái nhất định. Sử dụng để mở rộng khả năng typeface.

Spacing ký tự và Spacing từ

CSS từ lâu đã hỗ trợ các thuộc tính khoảng cách giữa các chữ và các từ. Khi sử dụng đúng cách, cả hai đều cung cấp khả năng kiểm soát với cách typeface hiển thị.

Như với typography, bạn sẽ cần học cách đánh giá các tuỳ chọn khác nhau cả về mặc chức năng lẫn hình ảnh và đưa ra các quyết định đúng đắn. Các bối cảnh khác nhau đem đến các nhu cầu về khoảng cách khác nhau.

Ở kích thước nhỏ hơn, hầu hết các kiểu chữ sẽ đẹp hơn với việc thêm khoảng cách giữa các ký tự và từ. Trong các ngữ cảnh lớn hơn, như tiêu đề, kiểu chữ có thể cần khoảng cách hẹp hơn. Trong cả hai trường hợp, những quyết định đúng đắn đòi hỏi sự chú ý và phán đoán tốt nhất của designer.

Đọc thêm: 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

Font render

Sử dụng typeface trên màn hình sẽ cần cân nhắc về cách render. Typeface thường được thiết kế trên lưới grid khoảng 1000 đơn vị hoặc lớn hơn, nhưng lại hiển thị ở môi trường bé font chỉ 16px.

Do tác động qua lại giữa thiết bị, màn hình, và phần mềm, việc giảm độ phân giải đòi hỏi một số quyết định thông minh để làm cho font chữ nhỏ dễ nhìn và đẹp mắt. Hãy kiểm tra trên nhiều trình duyệt và phát đoán để đưa ra phương án tốt nhất.

Nguồn tham khảo web font

Nếu bạn đã sẵn sàng để tìm hiểu sâu hơn về web font, đây là vài nguồn tham khảo mà bạn có thể sử dụng:

Clagnut’s OpenType CSS Sandbox của Richard Rutter: Một nơi để bạn thử các tính năng của OpenType và xem các code CSS cần thiết.
Webfont Handbook của Bram Stein: Một cuốn sách chuyên sâu để đọc về web font, font rendering, và hiệu năng font.
Copy Paste Character: Một website để lấy về bất kỳ ký tự đặc biệt nào mà bạn muốn sử dụng.
@font-face của CSS Tricks: Bài viết này cung cấp các đoạn mã để khai báo web font dựa trên sự hỗ trợ của trình duyệt.

Các lựa chọn nâng cao hơn nữa cho web font

Đối với những ai đã sẵn sàng nâng cấp lên các kỹ thuật nâng cao hơn nữa, đây là những lựa chọn của bạn:

Tải font bản quyền lên Github

Nếu bạn commit một project vào một public repo và sử dụng các tệp font có bản quyền, hãy đảm bảo rằng chúng nằm trong tệp .gitignore để không bị tự động tải lên. Làm vậy sẽ ngăn người khác lấy và sử dụng tệp font, đồng thời ngăn vi phạm các điều khoản sử dụng của các font bản quyền.

Load web font

Để load web font, bạn có thể đơn giản sử dụng @font-face nhưng không chắc điều này sẽ có hiệu suất tốt nhất. Hãy đọc bài viết “A Comprehensive Guide to Font Loading Strategies” của Zach Leatherman để xem các phương pháp cải thiện khả năng load và trải nghiệm người dùng.

CSS Text Decoration

W3C đã ra mắt CSS Text Decoration Module Level 3 vào tháng 8 năm nay để giúp ích cho việc trang trí các ký tự, chủ yếu là về hiển thị gạch chân tốt hơn và dễ hơn trong CSS. Hãy thử dùng xem.

Lời cuối

Bài viết này có rất nhiều thông tin, nên hy vọng bạn đã có thể hiểu rõ về cách thức web font hoạt động và tất cả những cách thú vị để áp dụng vào chính website công ty của mình.

Nếu bạn cần hỗ trợ, hãy liên hệ với chúng tôi tại BeauType để phát triển và triển khai một custom typeface cho thương hiệu.

Khách hàng nhìn nhận thương hiệu của bạn như thế nào? Premier League năng động trên mọi nền tảng với custom brand typeface ấn tượng Sony - Một typeface tập đoàn ứng dụng cho 93 ngôn ngữ toàn cầu Tính cách thương hiệu - Brand Personality: Hình dung và Các ứng dụng 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 Cách thiết kế và khai thác dấu hiệu hình ảnh để người xem không cần phải nghĩ

Off

Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay

content2 — Tue, 01 Nov 2022 10:07:00 +0000

Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay content2 T3, 11/01/2022 - 17:07

Câu chuyện về ngành làm font và lịch sử của typography

Chữ viết luôn là một phần quan trọng đi cùng với sự phát triển của nền văn minh nhân loại. Bắt đầu với những chữ tượng hình trong hầm mộ của các Pharaoh kể lại những hiển tích, hay chữ viết tay trong các tài liệu tôn giáo được lưu truyền suốt hàng ngàn năm lịch sử. Và việc phát minh ra máy in đã lần đầu tiên cách mạng hoá quá trình truyền đạt thông tin của con người. Tới thời kỳ cách mạng công nghiệp, lần đầu tiên năng suất của nhân loại tăng vọt nhờ vào sự phát triển vượt bậc của cơ khí, máy móc. Sản phẩm mà con người tạo ra không còn chỉ đủ mà tới mức dư thừa, điều này đã thúc đẩy việc cạnh tranh trong thị trường tại những quốc gia có nền kinh tế mở như Anh Quốc.

Ngành thiết kế font chữ tại Anh, đặc biệt là London phát triển rực rỡ và bước tới thời kì hoàng kim nhất trong suốt giai đoạn trị vì của nữ hoàng Victoria, font chữ không còn được sử dụng để dùng cho mục đích in ấn sách, truyện hay báo mà còn để phục vụ cho nhu cầu quảng bá sản phẩm cho các doanh nghiệp trên thị trường. Ngành làm font chữ thực chất cũng không còn quá mới mẻ như chúng ta nghĩ mà đã xuất hiện hàng trăm năm vừa qua. Từ khi con người sáng tạo ra những quy trình in ấn hiện đại hơn như in dập bản/ print press vào khoảng giữa thế kỷ 15, cũng kéo theo sự hình thành của các nhà chế tạo font chữ. Bắt đầu từ thế kỷ 17, London trở thành trung tâm của việc sản xuất và thiết kế font chữ, đi đầu là type foundry của nhà làm font nổi tiếng William Caslon trên phố Chiswell.

Tới nửa đầu của thế kỷ 20, khi thế giới bước vào những cuộc chiến tranh trên phạm vi toàn cầu, nhu cầu truyền đạt thông tin của con người là cần thiết hơn bao giờ hết. Nhưng đi kèm với đó là việc mọi nguyên liệu và tài nguyên cần được sử dụng một cách có trách nhiệm và tối ưu nhất. Điều này đã thúc đẩy những nhà sản xuất font chữ gây dựng nên những bộ font có tính ứng dụng cao hơn cũng như tiết kiệm nhiều chi phí hơn trong việc sản xuất. Có thể kể một trong những bộ chữ nổi tiếng mà vẫn được sử dụng cho tới hiện tại là Futura được thiết kế bởi Bauer Type Foundry tại Đức.

Futura được định nghĩa bởi sự đơn giản, từ phần khung được hình thành từ những hình khối hình học cơ bản cho tới từng chi tiết tinh giản, đồng đều của con chữ. Việc thiết kế kiểu chữ đơn giản, ít chi tiết rườm rà giúp tiết kiệm rất nhiều chi phí từ sản xuất tới in ấn cho những quốc gia lâm vào cảnh bần cùng sau thế chiến như Đức.

Đến sau những năm 50 của thế kỷ 20, khi nền kinh tế dần được phục hồi sau thế chiến thứ 2, các doanh nghiệp lại quay lại với công cuộc phát triển kinh tế, điều này đã thúc đẩy một nhu cầu cạnh tranh trên thị trường giữa các tập đoàn kinh tế của các quốc gia phát triển như Hoa Kỳ hay Anh. Với nhu cầu đó của thị trường, là sự lên ngôi của các họ chữ nổi tiếng như Helvetica hay Akzidenz Grotesk đến từ các type foundry tại Thuỵ Sỹ. Những font chữ trên với dáng vẻ chắc chắn, form chữ tối ưu nhất cho việc đọc nhưng cũng không hề có những chi tiết thừa thãi đã mang lại một cảm giác chuyên nghiệp, hiện đại mà các tập đoàn kinh tế thời điểm bấy giờ cần thiết để truyền thông và quảng bá về bản thân tới khách hàng

Trước đây mô hình của ngành làm font đó là việc người dùng trả tiền để có quyền sử dụng sản phẩm font chữ khi họ ứng dụng trên các ấn phẩm truyền thông hoặc phục vụ cho các công việc kinh doanh trong một khoảng thời gian được quy định trước tuỳ thuộc vào dạng hợp đồng. Các nhà làm font sẽ tổ chức và nghiên cứu để thực hiện các bộ font có khả năng ứng dụng và độ phủ rộng rãi nhất cho nhiều đối tượng với nhiều nhu cầu khác nhau nhất có thể nhằm tối ưu hoá lợi nhuận của sản phẩm. Điều này vẫn đúng và vẫn được các nhà làm font trên thế giới thực hiện cho tận tới ngày hôm nay, tuy nhiên thế giới của chúng ta cũng đã thay đổi khác xa với thời kì mà William Caslon hay Paul Renner sinh sống.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Ngành làm font hiện đại

Bước vào thế kỷ 21, kỷ nguyên bùng nổ của công nghệ thông tin và sự phổ cập của các thiết bị công nghệ cá nhân như máy tính hay điện thoại đã hình thành nên một thế giới số và mở ra nhiều triển vọng hơn nữa cho cả ngành làm font chữ. So với trước kia, thiết kế đồ họa, typography hay sâu hơn nữa đó là thiết kế font chữ trên thế giới vốn được gắn liền với định nghĩa là một ngành học thuật chỉ dành cho người được đào tạo chuyên nghiệp bài bản nay đã không còn trở nên quá xa lạ với phần đông công chúng. Với máy tính cá nhân, người dùng không chỉ là người tiếp nhận những sản phẩm typography được thiết kế từ những người có chuyên môn như sách, báo, tạp chí, poster,… Với những công cụ soạn thảo văn bản đơn giản như MS Word, chính người dùng phổ thông hiện nay cũng đã là người vận dụng typography.

Công nghệ phát triển nên các công cụ làm font chữ cũng phát triển. Với trước kia, font chữ thiết kế và sản xuất trên những khối kim loại dưới bàn tay của những người thợ lành nghề, những nhà thiết kế font chữ với vốn kiến thức sâu rộng. Bởi rào cản về mặt kỹ thuật và cơ sở vật chất, vậy nên một người bình thường khó có thể bắt tay vào tự chế tạo một bộ font chữ. Nhưng ngày nay, sự ra đời của những ứng dụng thiết kế font chữ số đơn giản, tiện dụng và ai cũng có thể cài trong máy tính cá nhân của mình như FontForge, Birdfont hay FontLab.

Tuy nhiên theo nhà sáng lập của FontLab Thomas Phinney nhận định, những phần mềm trên dù có đưa việc thiết kế một bộ font chữ đến gần với những người dùng cá nhân hơn nhưng vẫn đòi hỏi người dùng phải có một nền tảng kiến thức về font chữ nhất định trong khi phần lớn những người dùng hay thậm chí design có nhu cầu làm cho mình một font chữ riêng lại là những người có bản năng nghệ thuật và còn có phần khó tiếp cận với những kiến thức kỹ thuật, khô cứng của việc làm font. Tìm thấy được pain point này của những người dùng phổ thông, một số nền tảng thiết kế font chữ trực tuyến như Prototypo đã ra đời, nơi cho người dùng tương tác kéo thả những thanh lăn và nhìn thấy ngay tác động của chúng đối với font chữ mà thậm chí chẳng cần phải suy nghĩ quá nhiều về x-hight, serif, descender hay một mớ yếu tố chuyên ngành phức tạp khác để tạo ra một bộ font họ mong muốn.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface

Nhờ những công nghệ thiết kế font chữ ngày càng đơn giản và nhỏ gọn, nguồn thông tin và kiến thức chuyên môn về thiết kế chữ viết và typography cũng được chia sẻ một cách cởi mở hơn. Tất cả những thuận lợi trên đã đẩy ngành thiết kế nói chung cũng như nền thiết kế font chữ nói riêng đạt một dấu mốc mới. Chắc hẳn không khó để bạn có thể nhìn thấy một dự án thiết kế font chữ do một design trẻ thực hiện trên behance, và trên thực tế, số lượng dự án hay font chữ được thiết kế mới chẳng dừng lại tại con số vài chục hay thậm chí là vài trăm mà đó là hàng nghìn.

Nhưng đằng sau sự phát triển này không chỉ kể đến sự phát triển của yếu tố công nghệ mà còn cả yếu tố kinh tế. Như bất kỳ những sản phẩm trí tuệ nào khác, công việc khó nhất mà các doanh nghiệp đối mặt đó là việc bảo vệ quyền lợi kinh tế đến từ những sản phẩm trí tuệ của mình trước việc bị sử dụng trái phép hay thậm chí là làm nhái. Công việc thiết kế font chữ từ lâu vốn chỉ dành cho những công ty hay tổ chức thiết kế lớn với đội ngũ pháp lý hùng hậu để giúp doanh nghiệp bảo vệ bản thân. Còn đối với những designer thấp cổ bé họng, việc này tạo nên một rào cản khá lớn.

Nhưng đó chỉ là câu chuyện khi font chữ phần lớn được sử dụng in ấn hay cho ứng dụng cá nhân. Sự phát triển của công nghệ cũng đặt ra một bài toán mới trong lĩnh vực làm font chữ, khi mà lượng thông tin được xuất bản trên các nền tảng số, ngày càng nhiều hơn gấp nhiều lần so với thông tin được in ấn. Việc kiểm soát bản quyền font chữ cho nền tảng số cũng cần có phương pháp hiệu quả hơn nhiều so với giấy phép dạng văn bản EULAs truyền thống.

Một nền tảng cấp phép sử dụng font chữ cho website mới đã được ra đời mang tên “Webfont Licencing”. Để hiểu rõ hơn, font chữ dùng cho website khác với việc sử dụng font chữ cho máy tính, trước đây người lập trình website chỉ có một vài font chữ để lựa chọn sử dụng để hiển thị cho website của mình, nhưng với sự phát triển của ngành thiết kế font chữ cũng đi kèm với nhu cầu sử dụng nhiều font chữ một cách đa dạng hơn trên nền tảng web. Để dùng được font chữ cho web lập trình viên cần nhúng một đoạn mã lệnh CSS đặc biệt từ nhà phát hành vào nền tảng dữ liệu của website sau đó font chữ mới sẽ được hiển thị (rendering) nhờ sự hỗ trợ của trình duyệt web.

=> 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

Điểm mấu chốt ở đây đó là webfont được cài đặt trên web server thay vì trên chính máy tính cá nhân, và chính vì việc hệ thống internet luôn liên kết với nhau nên điều đặc biệt chính là việc website không nhất thiết phải được cài đặt trên cùng một server mà website nó hiển thị đang được cài đặt. Điều này đồng nghĩa với việc các nhà phát hành font không nhất thiết phải gửi cho bạn một bản cài đặt font để bạn có thể sử dụng được chúng, thay vào đó họ sẽ cấp phép cho bạn quyền được hiển thị thông tin trên website bằng font chữ mà họ sáng tạo ra.

Tất nhiên cũng không thể tránh khỏi một vài trường hợp cá biệt mà người dùng vẫn có thể ăn cắp được đoạn mã font chữ để cài đặt cho website của mình. Nhưng quay lại một yếu tố mà tôi đã kể phía trên, nhờ có sự minh bạch trên môi trường internet, mọi trường hợp vi phạm, sử dụng font chữ lậu đều có thể bị phát hiện và ngăn chặn kịp thời, bảo đảm cho quyền lợi của các tác giả. Đây là lần đầu tiên các nhà phát hành font chữ vừa có thể kiểm soát được quyền tác giả của mình, vừa có thể thay thế mô hình cấp phép và thu phí sử dụng sản phẩm trí tuệ của mình dựa trên số lượng người xem sản phẩm (reader/viewer). Điều này đã đảm bảo một nguồn lợi về mặt kinh tế cho các nhà thiết kế cũng nhưng giúp doanh nghiệp, designer website có nhiều sự lựa chọn hơn không nhàm chán, gò bó chỉ với một vài kiểu chữ đơn điệu và mang lại một trải nghiệm đọc tốt hơn cho khán giả.

Với nhu cầu sử dụng font chữ nói riêng và các công cụ, tư liệu sáng tạo nói chung ngày càng ra tăng của người dùng. Kết hợp với sự phát triển của mạng internet giúp kết nối mọi người ở khắp nơi trên thế giới một cách dễ dàng hơn đã thúc đẩy sự hình thành của cộng đồng và nền tảng chia sẻ, kinh doanh sản phẩm sáng tạo như Behance, Dribbble,v...v....

Tính đến 2018, Behance đã có tới 10 triệu người dùng, còn một nền tảng non trẻ hơn là Dribbble cũng có cho mình gần 500 ngàn thành viên. Nhờ có những nền tảng này mà designer nói chung và font designer nói riêng có cơ hội để showcase và giới thiệu sản phẩm của mình tới khách hàng doanh nghiệp và những designer khác, những người hoàn toàn có khả năng trở thành khách hàng sử dụng font chữ của họ. Để chứng minh cho sự thành công của những nền tảng trên và cơ hội mà chúng mang lại cho designer, làm một phép tính đơn giản khi tìm kiếm từ khóa “font”, chỉ tính riêng nền tảng Behance đã trả ra hơn 11 triệu kết quả tìm kiếm khác nhau. Không chỉ có những nền tảng giúp designer giới thiệu sản phẩm và dự án như behance phát triển mà còn cả những kênh phân phối và bán sản phẩm sáng tạo đi kèm như Creative Market, Envato, MyFonts,v...v… cũng đã trở thành trợ thủ đắc lực dành cho những nhà thiết kế sản phẩm hậu cần ngành thiết kế sáng tạo.

Như bao chợ thương mại điện tử khác, vendor hay ở đây là các designer có thể dễ dàng đăng và bày bán các sản phẩm của mình, các nền tảng sẽ là nơi chung gian cho thuê các “gian hàng" và thu phí theo sản phẩm mà họ bán được. Công việc này giúp tạo ra một sân chơi uy tín, tối ưu nhất cho các designer nhỏ lẻ, thiếu nguồn lực để bắt đầu công việc kinh doanh của mình. Đồng thời cũng giúp khách hàng có một điểm đến để mua sắm đa dạng các mặt hàng sáng tạo, thứ mà trước đây họ hoàn toàn phải tự tìm kiếm từ các nguồn nhỏ lẻ thậm chí còn thiếu uy tín.

Xem thêm: Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?

Sự phát triển của công nghệ cũng như những công cụ hữu ích đã mang lại một sự đổi mới cho ngành công nghiệp thiết kế font chữ nói riêng và cả ngành thiết kế sáng tạo nói chung. Ước tính ngành công nghiệp phát triển font chữ đã đạt tới hơn 800 triệu đô la tổng doanh thu trong năm 2017. Với sự phát triển của các nền tảng thiết kế font như đã được đề cập trong bài thì còn ước tính sẽ tiếp tục phát triển hơn nhiều trong các năm tiếp theo. Điều này vừa mang lại cơ hội nhưng cũng không kém những thách thức mà design sẽ phải đối mặt trong tương lai. Mời bạn cùng đón đọc thêm tại những số tiếp theo của chủ đề.

Bài viết gốc Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay đến từ blog của Beautique - Brand & Creative Agency.

Typography Typo Font chữ

Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay

Chữ viết luôn là một phần quan trọng đi cùng với sự phát triển của nền văn minh nhân loại.

Câu chuyện về ngành làm font và lịch sử của typography

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Ngành làm font hiện đại

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface

=> 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

Xem thêm: Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?

Bài viết gốc Ngành Công Nghiệp Làm Font Và Nhu Cầu Hiện Nay đến từ blog của Beautique - Brand & Creative Agency.

Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface 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 Truyền Thông Thị Giác: Nhận Thức Và Thao Túng Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI

Off

Tương quan phức tạp giữa dấu và khoảng trống trong font Tiếng Việt

content — Wed, 08 Jun 2022 03:08:42 +0000

Tương quan phức tạp giữa dấu và khoảng trống trong font Tiếng Việt content T4, 06/08/2022 - 10:08 Cảm hứng thiết kế sáng tạo

Trong bài viết trước, chúng ta đã bàn luận về những thách thức khi thiết kế font Tiếng Việt. Tiếp tục chủ đề ấy, nhưng trong bài viết này, ta sẽ cùng nhau bàn kỹ hơn về khoảng trống và dấu trong font chữ Tiếng Việt.

Kerning, tracking và leading luôn là vấn đề đau đầu của các type designer. Bởi tương quan giữa khoảng âm (khoảng trống) và khoảng dương (chữ) rất quan trọng và nó ảnh hướng lớn tới thẩm mỹ của font chữ. Việc căn chỉnh khoảng trống này không thể chỉ dừng lại ở việc giãn cho đủ rộng để các ký tự không bị chạm vào nhau. Mà chúng cần tìm được một khoảng cách thích hợp để đảm bảo cả độ dễ đọc lẫn thẩm mỹ của font chữ.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Và khi chúng ta xét trong trường hợp của font Tiếng Việt, việc căn chỉnh khoảng cách này càng trở nên phức tạp hơn. Với bộ dấu gồm cả dấu chữ và dấu giọng, thiết kế font Tiếng Việt có thể gặp nhiều vấn đề như:

Ảnh hưởng tới khoảng cách dòng
Ảnh hưởng tới khoảng cách khi bắt cặp với các chữ cái khác
Một số trường hợp sẽ phải lựa chọn giữa tính dễ đọc và thẩm mỹ của font

=> Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết

Chữ cái có móc: ư, ơ trong font Tiếng Việt

Vấn đề chính của ư và ơ là kerning. Trong trường hợp khi nó bắt cặp với những chữ cái như n, m, u, t phía sau, móc của chúng có thể chạm vào stem hoặc ear của chữ cái sau. Đặc biệt là khi font chữ đó là font có chân, chân của n, m, u càng khiến việc kerning trở nên khó khăn.

Có hai hướng giải quyết. Thứ nhất, chúng ta có thể điều chỉnh thiết kế sao cho dấu móc và chân chữ có thể tối ưu được khoảng cách kerning. Hoặc chúng ta phải điều chỉnh khoảng cách ấy rộng hơn so với các cặp tương tự của u và o. Tuy nhiên khoảng cách này không được rộng hơn quá nhiều, tránh để tổng thể font bị lỏng lẻo.

Nếu xét riêng về ơ, vì có cấu trúc là đường tròn nên vị trí trục tung (trục dọc) của dấu móc sẽ lệch sang trái, giúp chữ được gọn hơn và dễ kerning hơn so với chữ ư.

Dù khác cấu trúc nhưng, thiết kế của dấu móc trong cả hai chữ vẫn phải giống nhau, đồng thời vị trí của chúng trên trục hoành (trục ngang) cũng nên tương đồng. Dấu móc này khi đặt vị tró cao hơn (hình trái) chữ sẽ dễ kerning nhưng khó đặt dấu giọng, khó leading. Ngược lại, khi nó đặt ở vị trí thấp hơn sẽ dễ đặt dấu giọng và leading hơn, nhưng nó sẽ khó kerning hơn.

Mốt số designer giải quyết vấn đề này bằng cách biến tấu hoặc xoay dấu móc. Tuy nhiên, nó chỉ có thể ứng dụng cho font display.

Với ư và ơ, khi có một khoảng âm bên phải (móc) việc đặt dấu giọng cần xem xét sao cho có sự cân bằng cả khi chữ cái đứng một mình lẫn khi ghép cặp với chữ cái khác.

Chữ có mũ: Â, â, Ê, ê, Ô, ô trong font Tiếng Việt

Vấn đề lớn nhất của nhóm có mũ đó là khi được thêm dấu giọng chữ sẽ trở thành 2 tầng dấu và nó sẽ ảnh hưởng tới khoảng cách dòng (leading). Khi có 2 tầng dấu, khoảng cách dòng của font buộc phải rộng hơn. Bởi nếu khoảng cách quá nhỏ sẽ khiến dấu dính với dòng trên, đặc biệt là khi dòng trên có những chữ như p, g, y.

Trong trường hợp không thể điều chỉnh khoảng cách, chúng ta sẽ phải điều chỉnh thiết kế và vị trí của font chữ. Với thiết kế chúng ta có thể giảm độ dầy nét để dấu không còn chiếm nhiều không gian. Tuy nhiên, không phải bộ font nào cũng có thể đi với dấu nét mảnh. Bởi vậy chúng ta sẽ cần điều chỉnh vị trí của dấu sao cho tối ưu được không gian giữa hai dòng.

Cụ thể hơn chúng ta sẽ phải điều chỉnh vị trí của dấu giọng, bởi vị trí dấu mũ cần đi theo trục chữ (axis). Chúng ta có ba vị trí có thể đặt dấu giọng là: trái, phải và đỉnh.

Đối với dấu ngã, hầu hết các trường hợp cũng sẽ được đặt theo trục chữ. Bởi nếu đặt bên trái sẽ không đúng với chiều tay viết chữ. Còn đăt bên phải sẽ có thể khiến dấu bị dính vào chữ phía sau. Một số trường hợp với font all caps, nó vẫn được đặt bên phải để làm khối chữ nhìn chắc chắn hơn, đồng thời, tránh ảnh hưởng tới khoảng cách dòng.

Trong khi đó, dấu hỏi có chiều rộng hẹp hơn dấu ngã nên nó thường được đặt bên phải của dấu mũ. Dù vậy, vẫn có thể đặt nó tại đỉnh để chữ được cân bằng hơn, đảm bảo về thẩm mỹ hơn, tuy nhiên vị trí này không tối ưu cho leading. Ngược lại, khi đặt nó bên phải, leading được tối ưu nhưng chữ lại kém cân bằng.

Tương tự với dấu sắc và dấu huyền, chúng sẽ tối ưu hơn nếu đặt bên phải dấu mũ. Một số font chữ, dấu huyền được đặt bên phải, tuy nhiên dấu sắc không bao giờ đặt ở vị trí này. Nguyên nhân vẫn là do ngược với chiều tay viết, gây mất tự nhiên.

Ngoài ra, vị trí dấu còn phụ thuộc vào độ cao của ascender. Đối với font có ascender cao, dấu sẽ có nhiều không gian hơn và ngược lại, ascender thấp dấu sẽ có ít không gian hơn.

Bên cạnh đó, kerning cũng là một vấn đề đối với nhóm â, ê, ô khi có thêm dấu giọng. Việc kerning cần đảm bảo tính dễ đọc, tránh để dấu dính với những chữ như đ hay t khi bắt cặp.

Một số font chữ, hình dạng dấu khác nhau khi có 1 tầng dấu chuyển thành 2 tầng dấu. Việc này nhằm tối ưu leading, tuy nhiên, nó sẽ ảnh hưởng tới thẩm mỹ của font chữ.

Xem thêm: Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

Chữ có mũ ngược: Ă, ă trong font Tiếng Việt

Tương tư như dấu mũ, dấu mũ ngược cũng gặp vấn đề về leading khi thêm dấu giọng. Tuy nhiên, khác với dấu mũ, cấu trúc của dấu mũ ngược có có hai đỉnh kèm không gian trống ở giữa. Điều này khiến cho các dấu giọng khi đi kèm dấu mũ ngược buộc phải đặt ở đỉnh.

Trong trường hợp muốn tối ưu leading của những cặp dấu này, chúng ta buộc phải thay điều chỉnh thiết kế chữ. Nhưng khi xem xét vấn đề này, nó sẽ lại liên quan tới thiết kế của các cặp dấu đi với dấu mũ. Dù dấu giọng khi đi với dấu mũ và khi đi với dấu mũ ngược có thể khác nhau, tuy nhiên chúng ta vẫn phải đảm bảo tính đồng bộ để thiết kế font được hài hòa.

Chữ có gạch ngang: Đ, đ trong font Tiếng Việt

Cấu trúc của đ tương tự như d, chỉ có thêm gạch ngang (ear). Thường gạch ngang này cũng sẽ được thiết kế với vị trí thiên về bên trái với chữ in thường và thiên về phải với in hoa. Vậy nên đ không gây nhiều vấn đề về kerning.

Vấn đề chỉ xảy ra khi nó bắt cặp với các chữ có dấu. Bởi phần gạch ngang ấy cũng sẽ lấn một phần diện tích khoảng trống, trong trường hợp chữ cái bên cạnh có hai tầng dấu, đ có thể dính với dấu giọng của chữ bên cạnh. Đó cũng là lý do nên hạn chế đặt dấu bên trái. Ví dụ với từ “đồng”, nếu dấu huyền ở bên trái sẽ làm khoảng trống giữa đ và ô rối mắt.

Typography Typo Font Tiếng Việt Font chữ UX/UI UI Thiết kế UI Thị trường Việt Nam

Trong bài viết trước, chúng ta đã bàn luận về những thách thức khi thiết kế font Tiếng Việt. Tiếp tục chủ đề ấy, nhưng trong bài viết này, ta sẽ cùng nhau bàn kỹ hơn về khoảng trống và dấu trong font chữ Tiếng Việt.

Chữ cái có móc: ư, ơ trong font Tiếng Việt

Mốt số designer giải quyết vấn đề này bằng cách biến tấu hoặc xoay dấu móc. Tuy nhiên, nó chỉ có thể ứng dụng cho font display.

Chữ có mũ: Â, â, Ê, ê, Ô, ô trong font Tiếng Việt

Xem thêm: Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

Chữ có mũ ngược: Ă, ă trong font Tiếng Việt

Chữ có gạch ngang: Đ, đ trong font Tiếng Việt

Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu? Bạn đã biết về Quy tắc thiết kế UI cho website? Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"? Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt Phân tích tâm lý - 3 lớp cảm xúc của thiết kế UI Designer cần biết

Off

Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

content — Mon, 30 May 2022 09:11:30 +0000

Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt content T2, 05/30/2022 - 16:11 Cảm hứng thiết kế sáng tạo

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.

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.

=> Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

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”.

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ì?

Xem thêm: 10 nhận diện thương hiệu đẹp và hiệu quả từ brands

Sự khác biệt giữa Tiếng Anh và Tiếng Việt

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.

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à: ă, â, ê, đ, ô, ơ, ư.

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-ơ.

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-ẩ.

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ì?

Thách thức với font Tiếng Việt

Hai tầng dấu

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.

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.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface

Đ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.

Font Tiếng Việt đặt vị trí dấu như thế nào?

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).

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.

=> 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

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ữ.

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.

Kerning trong font tiếng Việt

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ữ.

Xem thêm: Nhận diện thương hiệu: Học được gì từ logo của Starbucks?

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.

Trọng lượng dấu

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ữ.

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.

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”.

Hình dạng dấu trong font Tiếng Việt

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ể.

Đâ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ó.

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.

Xem thêm: Bạn đã biết về Quy tắc thiết kế UI cho website?

Typography Thiết kế UI UI UX/UI Typo Font chữ Font Tiếng Việt Humanist Typeface Typeface web design Thiết kế Website

Bài viết liên quan

=> Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Xem thêm: 10 nhận diện thương hiệu đẹp và hiệu quả từ brands

Sự khác biệt giữa Tiếng Anh và Tiếng Việt

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ì?

Thách thức với font Tiếng Việt

Trọng lượng dấu

Hình dạng dấu trong font Tiếng Việt

Xem thêm: Bạn đã biết về Quy tắc thiết kế UI cho website?

Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"? Mở rộng tư duy thiết kế với Futures Thinking Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

Off