Quá trình tạo phông chữ viết tay

 (kokorobot.ca)
3 điểm bởi GN⁺ 2023-11-28 | 1 bình luận | Chia sẻ qua WhatsApp
  • Khi chữ viết tay trong truyện tranh hakum có kích thước và độ dễ đọc dao động giữa các trang, tác giả quyết định tạo phông chữ TTF từ chính nét chữ của mình thay vì dùng phông có sẵn
  • Lần thử thứ hai, dùng chữ viết trên giấy được quét lại, trông tự nhiên và hữu cơ hơn so với nét chữ số viết bằng bảng vẽ
  • Phạm vi thực hiện được giới hạn ở A-Z, a-z, các chữ số 0-9 và dấu câu cơ bản; các tính năng mở rộng như đậm, nghiêng, ligature không nằm trong mục tiêu
  • Quy trình được thực hiện bằng cách dọn ảnh quét trong Gimp, tách ra thành PNG, rồi chỉnh đường viền glyph, khoảng trắng hai bên và kerning trong FontForge
  • Trong quá trình Autotrace và xuất file, có thể phát sinh các vấn đề kiểm tra như missing points at extrema, self intersecting, nên phông chữ viết tay cần khá nhiều hậu xử lý

Vì sao biến chữ viết tay thành phông chữ

  • Trước đây, phần chữ trong truyện tranh hakum được viết số trực tiếp bằng bảng vẽ
  • Kết quả nhìn ổn, nhưng ngay trong cùng một trang, kích thước chữ thường lúc to lúc nhỏ khiến độ dễ đọc bị dao động
  • Vì không muốn dùng phông chữ có sẵn, tác giả quyết định tạo một phông dựa trên chính nét chữ của mình
  • Mục tiêu là một phông TTF để đăng web, chỉ bao gồm một bộ ký tự giới hạn
    • Không làm bản đậm hay nghiêng
    • Đây là lần đầu làm phông và dùng FontForge, nên có thể vẫn còn những cách tốt hơn

Hai lần thử và thuật ngữ cơ bản của kiểu chữ

  • Phông đầu tiên được tạo dựa trên chữ viết tay số bằng bảng vẽ
  • Phông thứ hai được tạo từ ảnh quét chữ viết trên giấy, và chữ trên giấy trông kém chính xác hơn nên lại hữu cơ và tự nhiên hơn
  • Trong quá trình làm phông, tác giả học các thuật ngữ về cấu trúc kiểu chữ; hiểu chức năng của từng phần sẽ giúp đưa ra lựa chọn thiết kế tốt hơn và tạo ra phông hoạt động hiệu quả hơn
    • Ascender: phần vươn lên trên x-height ở chữ thường
    • Baseline: đường cơ sở nơi phần lớn ký tự nằm trên đó và descender đi xuống dưới
    • Cap Height: đường thể hiện chiều cao của phần lớn chữ in hoa
    • Descender: phần đi xuống dưới baseline như ở p, q
    • X-Height: khoảng cách giữa baseline và mean line của chữ thường

Ảnh quét và khâu dọn dẹp trong Gimp

  • Các ký tự được làm gồm chữ in hoa A-Z, chữ thường a-z, số 0-9 và dấu câu cơ bản như dấu phẩy, chấm than, dấu hỏi
  • Ban đầu, tác giả kẻ các đường baseline, cap height, x-height, descender bằng bút chì trên sổ phác thảo rồi viết chữ
  • Nhưng khi viết giữa các đường chuẩn đó, chữ trở nên quá cứng, nên về sau tác giả viết nhiều lần câu "The quick brown dog jumps over the lazy fox" bằng cả chữ hoa và chữ thường
    • Câu này chứa đầy đủ mọi ký tự cần thiết từ a-z
    • Khi viết thành câu, tác giả không quá chú ý đến từng chữ cái nên cho ra hình dạng tốt hơn
    • Khi vẽ trên lưới, chỉ còn tập trung vào ràng buộc
  • Câu được viết đẹp nhất được chọn để làm phông, và một số ký tự từ bản viết trên lưới cũng được tận dụng
  • Vì cách làm này, sau đó phải căn chỉnh cap-height, x-height và descender của từng ký tự bằng kỹ thuật số
  • Ảnh chữ quét được xử lý trong Gimp bằng Color > Threshold để loại bỏ sắc xám
  • Do đặc tính của bút chì và giấy, cùng với việc không dùng lưới, tác giả sửa các khuyết điểm của chữ bằng công cụ bút chì trong Gimp
    • Trong Tool Options, tắt toàn bộ dynamics để có nét sạch
  • Các ký tự đã dọn được sao chép sang một tài liệu Gimp mới, với kích thước đủ chứa ký tự lớn và rộng nhất là chữ in hoa M
  • Ở bước này, tác giả kiểm tra để độ dày nét không chênh lệch quá nhiều
  • Mọi ký tự sau đó được xuất riêng thành PNG vào thư mục dự án

Tạo glyph trong FontForge

  • FontForge được chọn vì chạy trên Linux và được người xung quanh khuyên dùng; trải nghiệm sử dụng cũng khá tốt
  • Khi tạo dự án mới, Font View Window mở ra và hiển thị mọi ô glyph của phông dưới dạng bảng
  • Trong Element > Font Info, nhập thông tin phông và thêm tên phông dưới mục PS Names
  • Để xuất dưới dạng TTF, trong mục General của cùng cửa sổ, đổi Em size thành 1024
    • UPM của phông TrueType theo thông lệ dùng lũy thừa của 2 như 1024 hoặc 2048
    • Phông OTF có yêu cầu khác
    • Trong thời kỳ chữ đúc kim loại, mỗi ký tự được đặt trong một không gian riêng để đồng bộ chiều cao, và chiều cao của khối chữ đó được gọi là ‘em’
  • Nhấp đúp vào một glyph trong Font View sẽ mở Character View
    • Tại đây có thể vẽ hoặc chỉnh sửa glyph
    • Có thể xem từng glyph qua giao diện tab, hoặc dùng tệp văn bản đã chuẩn bị để xem các từ nằm cạnh nhau
  • Trong danh sách layer ở góc dưới bên trái, chọn layer Back rồi dùng File > Import để nhập PNG của ký tự tương ứng
  • Sau đó tạo đường viền glyph theo một trong hai cách
    • Tự vẽ đường viền
    • Chọn layer Fore rồi dùng Select > Autotrace để tự động tạo đường viền
  • Autotrace tham chiếu ảnh nền để tạo đường viền với các điểm điều khiển và đường cong Bézier, nhưng có thể sinh quá nhiều điểm hoặc gặp lỗi thiếu extrema
  • Khi hình dạng khép kín được tạo xong, glyph đó cũng sẽ hiển thị trong các cửa sổ khác

Khoảng trắng hai bên và xem trước

  • Với mỗi glyph, điều chỉnh side bearing bên trái và bên phải để xác định độ rộng cuối cùng của glyph
  • Để tự động căn giữa tất cả glyph, dùng Metrics > Auto Width
  • Để đặt mọi glyph vào giữa phần độ rộng của chúng, dùng Metrics > Center In Width
  • Khi sửa đường viền, việc tắt layer tham chiếu sẽ hữu ích
  • Nếu muốn làm lại một glyph từ đầu, chọn glyph đó trong Font Window rồi dùng Edit > Clear
  • Nếu chỉ muốn xóa layer tham chiếu, dùng Edit > Clear Background
  • Trong ô văn bản phía trên vùng làm việc của Character View, nhập một từ hoặc ký tự bất kỳ sau chữ hiện tại để xem trước cách các chữ đứng cạnh nhau
  • Quá trình này phải lặp lại cho mọi glyph; riêng glyph Space, nếu không chỉnh side bearing trái và phải thì khoảng cách giữa các từ sẽ quá lớn

Thiết lập kerning

  • Kerning là quá trình điều chỉnh khoảng cách giữa các ký tự để chữ trông dễ đọc hơn
  • Trong Font Window, vào Element > Font Info, rồi ở tab GPOS của Lookups nhấn Add Lookup
  • Trong menu Type, chọn Pair Position (Kerning)
  • Ở cột Feature, nhấn mũi tên cạnh New, chọn Kern Horizontal Kerning, rồi xác nhận
  • Chọn mục GPOS vừa tạo, nhấn Add Subtable, giữ tên mặc định rồi xác nhận
  • Các ký tự cần kerning được kéo chọn ở cả hai bảng
    • Cần chọn cả chữ hoa lẫn chữ thường
    • Để chọn hai tập trong cùng một bảng, dùng Shift
  • Khi nhấn pairings, phiên bản phóng to của cặp glyph sẽ hiện ở phía dưới cửa sổ
  • Kéo glyph thứ hai lại gần hoặc ra xa glyph thứ nhất để mọi tổ hợp ký tự đều trông ổn

Kiểm tra và xác thực khi xuất file

  • Để thử phông và kerning trong FontForge, dùng File > Print
  • Văn bản mặc định không hiển thị hết mọi tổ hợp có thể có, nên có thể tự thêm văn bản để thử
  • kern_pairings.txt chứa mọi tổ hợp kerning và có thể dán vào màn hình kiểm tra

  • Những vấn đề có thể gặp khi xuất file

    • Khi xuất bằng File > Generate Fonts, FontForge có thể đánh dấu một số ký tự cần xem lại
    • Non-integral coordinates là khi một hoặc nhiều điểm trong đường viền glyph có tọa độ thập phân như 2.25
    • Chọn glyph có vấn đề, vào Element > Validation > Find Problems, đánh dấu "non-integral coordinates", rồi lặp lại thao tác sửa
    • Với phông viết tay không quá phụ thuộc vào độ chính xác tuyệt đối, việc chuyển sang tọa độ nguyên rất gần có thể không tạo ra thay đổi lớn
    • Missing points at extrema là khi điểm điều khiển của đường cong đẩy đường cong ra ngoài ranh giới của nó
    • Cần chỉnh điểm điều khiển để điểm cao nhất hoặc các điểm cực trị của đường cong trở thành các điểm màu vàng
    • Element > Add Extrema có thể hữu ích, nhưng cũng có thể làm méo glyph hoặc tạo thêm lỗi non-integral coordinates
    • Dù lỗi này xuất hiện trong log, phông vẫn có thể được tạo, nhưng có thể phát sinh những biến dạng nhỏ và khó chịu
    • Phông viết tay dễ gặp vấn đề extrema nếu nét chữ lộn xộn hoặc có dùng Autotrace
    • Self intersecting là khi đường viền glyph tự chồng lên chính nó
    • Cần kiểm tra toàn bộ các nét để loại bỏ chỗ chồng lấn

Chọn TTF và cài đặt

  • Với mục đích sử dụng này, TTF(TrueType Font) là đủ
  • OTF là không cần thiết vì tác giả không định lưu quá nhiều glyph, không muốn đưa đậm hay nghiêng thành các style riêng, và cũng không cần ligature
  • Nội dung dùng phông này sẽ được đăng lên web, và TTF phù hợp với mục đích đó
  • Để tạo phông từ toàn bộ glyph trong Font View, dùng File > Generate Fonts
  • Chọn TTF làm định dạng xuất trong menu dưới tên phông rồi xác nhận, phông sẽ được lưu vào thư mục dự án
  • Phông đã tạo chỉ cần được chuyển vào vị trí lưu phông của hệ thống
  • Tài liệu tham khảo và ví dụ sử dụng

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-11-28
Ý kiến trên Hacker News

  • Phần tổng quan về FontForge rất hay, trước đây tôi cũng từng nghịch qua một chút
    Nó hơi thô, nhưng tôi cũng không chắc các sản phẩm thương mại cạnh tranh có tốt hơn nhiều không. Thật ra tôi còn chẳng biết tên sản phẩm nào
    Và trang web của nó rất đẹp. Độc đáo và có cá tính rất rõ

    • FontForge là mã nguồn mở, đa nền tảng và khá nhiều tính năng nên rất đáng quý, nhưng theo trải nghiệm trực tiếp của tôi thì các đối thủ thương mại thực sự tốt hơn hẳn
      Nếu bạn có macOS thì có thể tự thử Glyphs(/Mini) hoặc RoboFont, vì bản dùng thử của chúng khá đủ dài. Dù vậy, điều đáng mong đợi nhất vẫn là thế hệ công cụ tiếp theo, gồm cả các công cụ nền web như fontra.xyz
    • Cũng đáng tiếp tục theo dõi xem MFEK có tiến tới trạng thái hoàn thiện hơn không
      Mọi thứ tôi từng thấy liên quan đến MFEK cho đến nay đều trông khá ấn tượng
      https://mfek.org/
    • Nhân tiện đang nói về FontForge, tôi muốn hỏi có ai biết cách xem trước phông chữ bằng vài đoạn văn bản trong lúc tạo font không
      Chỉ một câu “quick brown fox” thường là chưa đủ

  • 100r.co cũng rất đáng xem
    Devine và Rekka vận hành studio trên thuyền buồm Pino và ghi lại cuộc sống, hành trình cùng các dự án của họ

  • Bản tóm tắt về FontForge rất tốt
    Như bài viết có ngụ ý, với việc tạo font từ chữ viết tay thì cũng có những lựa chọn dễ hơn và tự động hơn. Sau đó bạn vẫn có thể chỉnh sửa lại font kết quả
    https://www.calligraphr.com/en/ trước đây có tên là MyScriptFont

  • Font đã làm trông khá giống với font tôi từng làm
    https://imgur.com/a/g8bIoUY
    Tôi không đào sâu vào các tối ưu như kerning, nhưng 3~4 phần mềm tôi từng dùng đều cực kỳ bực bội, hỏng hóc hoặc khó thao tác. Cũng có thể là do cách tôi dùng, và phần mềm trả phí có lẽ sẽ tốt hơn nhiều. Việc làm đến cùng thật đáng nể

  • Tôi tò mò đâu là cách đơn giản nhất để gộp nhiều font thành một font duy nhất
    VS Code không hỗ trợ thiết lập font theo ngôn ngữ hay token. Ví dụ, không thể dùng Comic Sans cho phần chú thích và font khác cho phần còn lại, dù nó có hỗ trợ các thiết lập như nghiêng/đậm

  • Tôi đã thích font từ thời Desktop Publishing bùng nổ vào thập niên 80 và font bắt đầu được dùng rộng rãi
    Có thể nói đã có một giai đoạn chúng bị lạm dụng, nhưng đó là một trong những thứ đầu tiên khiến tôi cảm nhận được tầm quan trọng của thiết kế. Dù sao thì đây là một font đẹp và phần tổng quan cũng rất hay

  • Tôi tò mò liệu có ai thực sự làm font bằng MetaFont/MetaPost không
    Tôi cũng không biết FontForge có chức năng scripting hay không. Tôi chưa từng dùng trực tiếp mà chỉ đọc về nó, nhưng tôi đã đọc cả 5 tập “Computers and Typesetting” của Knuth

  • Tôi tò mò không biết đã có startup wrapper AI nào làm dịch vụ tạo font chưa
    Prompt chắc sẽ rất thú vị. Ví dụ kiểu “hãy thiết kế một font Giáng sinh thân thiện với trẻ em, chịu ảnh hưởng mạnh từ vùng Balkan nhưng pha cả Soviet brutalism”
    Về mặt thương mại, việc dùng các font mang cảm giác ngoại lai cũng nên trở nên tự nhiên hơn về mặt văn hóa. Tôi hiểu vì sao Helvetica, Roboto, Noto Sans và các font hiện đại hơn lại được dùng, nhưng thành thật mà nói thế giới đang hơi nhạt nhẽo đi một chút

  • Thật tiếc là bài blog đó lại không dùng chính font của tác giả; đúng là một cơ hội bị bỏ lỡ

  • Câu đúng phải là cáo nhảy qua chó, chứ không phải “chó nhảy qua cáo” ;-)
    Vì chó thì lười còn cáo thì nhanh