Những cân nhắc nào trong việc thiết kế phông chữ pixel?


14

Tôi đang thiết kế phông chữ pixel đơn cách cho một trò chơi và cho đến nay tôi chỉ có thể làm việc với các kích thước cực nhỏ (lớn nhất tôi đã quản lý là 5x9) vì những phông chữ này dễ thử và sai nhất. Thường thì các kết quả tôi đưa ra với các kích thước dù nhỏ đến 7x13 đều rất tệ và không hấp dẫn.

Tôi đã phân tích một số phông chữ pixel khác và hầu hết các phông chữ hấp dẫn đồ họa tạo ra nhiều cân nhắc thay thế mà tôi không bao giờ nghĩ sẽ thực hiện, chẳng hạn như làm cho toàn bộ các phần chỉ được kết nối theo đường chéo.

Có kích thước khối đặc biệt nào là "tối ưu" để thiết kế phông chữ pixel không? Có vị trí pixel đặc biệt nào mà tôi có thể phải ghi nhớ không? Bởi vì đôi khi khi tôi vẽ một đường chỉ dài 11 pixel (hoặc làm cho mọi thứ giao nhau ở kích thước nhỏ như vậy), nó sẽ trông giống như một thứ khác khi được thu nhỏ.

Câu trả lời:


11

Phông chữ pixel không quá khác biệt so với phông chữ in nhỏ khi bạn truy cập thẳng vào nó *. Một ngoại lệ lớn là bạn biết phương tiện sẽ làm gì với phông chữ pixel - một lợi thế rất lớn.

Thực sự không có lưới pixel lý tưởng. Rõ ràng một lưới lớn hơn cho bạn nhiều chỗ để làm việc. Các loại nhỏ nhất tôi thấy làm việc thành công là thiết kế 7px. Các thiết kế MiniFonts của Joe Gillespie sẽ giúp bạn hiểu thiết kế ở ngưỡng dễ đọc. Một câu hỏi khác ở đây liên quan đến những thiết kế vi mô đó và có thể cho bạn tham khảo thêm.

Bắt đầu từ đâu

Mỗi vấn đề thiết kế bắt đầu với một ràng buộc. Với một phông chữ tốt, nó thường là mục đích sử dụng. Phông chữ pixel của bạn cần phù hợp ở đâu? Trò chơi của bạn sẽ được hưởng lợi từ việc dễ dàng đọc văn bản hay văn bản cần tránh xa và chỉ có sẵn để "giải mã" khi cần?

Bạn sẽ cần phải làm rõ liệu bạn có muốn một trường hợp thấp hơn hay không. Một phông chữ tất cả có thể nằm gọn trong một lưới nhỏ hơn vì hình dạng tương đối đơn giản và thiếu bộ mở rộng (bên dưới đường cơ sở và trên chiều cao nắp). Nhưng chữ thường cũng có thể trở nên khá nhỏ: Minx của Gillespie cung cấp và điểm tham chiếu tuyệt vời cho những gì tôi sẽ xem xét bảng chữ cái chữ thường hợp lý nhỏ nhất.

Minx nhỏ như chữ thường

Các chi tiết

Bạn sẽ nhận thấy một cái gì đó trong các phông chữ pixel tốt nhất: Chúng trông thật tệ khi bạn đến gần và cố gắng tìm ra chúng. Chúng có nghĩa là "nhận thức", đó là những khoảng trống trong thiết kế được lấp đầy bởi bộ não. Vì vậy, hai hình vuông được căn chỉnh đến 45 ° trở thành một đường chéo. Đôi khi một lỗ trên lưới là đường "mỏng" giữa hai nét dày.

Thiết kế gần từ xa : Đó là thách thức của người thiết kế phông chữ pixel. Nói cách khác, bạn tạo và sửa đổi hình dạng của mình ở khoảng cách gần một cách lố bịch trong khi xem xét nó sẽ trông như thế nào khi nhìn ở kích thước bình thường.

Máy tính là người bạn của chúng tôi trong tình huống khó hiểu này: Chỉ cần mở cửa sổ thứ hai với chế độ xem 100% để bạn có thể thấy thiết kế của mình thực sự trông như thế nào . Có một màn hình thứ hai xung quanh cho "cái nhìn thực tế" này làm cho mọi thứ thuận tiện hơn nhiều.

Chứa chữ thường

Vì bạn đã đề cập đến sự cần thiết cho chữ thường ở 6 x 12 ...

Đây là một ví dụ nhanh mà tôi đã tập hợp lại để minh họa những cân nhắc cụ thể với yêu cầu đó.

Tha lỗi cho tôi, đó là một minh họa thô

Để bắt đầu, tôi đã cắt một pixel khỏi chiều cao của bạn. Làm việc ở kích thước nhỏ như vậy, bạn sẽ nhận thấy rằng lợi ích rõ ràng từ cơ thể nhân vật rộng hơn. Các mũ chỉ cần cao hơn một chút so với chữ thường. Hãy xem 9px Verdana để xem làm thế nào một cơ thể rộng có thể có lợi cho mức độ dễ đọc.

Các ký tự chữ thường có chữ nổi bật thường sẽ đọc tốt hơn nếu chúng kéo dài quá một chút so với chiều cao giới hạn (như btrong ví dụ của tôi). Ví dụ của tôi vẫn cố gắng giữ thân hình cao 11px. Điều này được hỗ trợ bởi thực tế là mức độ dễ bị ảnh hưởng bởi các bộ giảm tốc dài: Chỉ cần một vài pixel sẽ làm ở đó.

Ngay cả trên lưới hạn chế này, bạn có thể thấy những nét đẹp nhỏ của phong cách bạn có thể thêm vào mà không làm hỏng hoàn toàn tính dễ đọc.

Phóng to, bạn có thể thấy những điều kỳ lạ nhận được

Với chiều cao x và thân được tô sáng để tham khảo:

nhập mô tả hình ảnh ở đây

Ở kích thước mở rộng, Mminh họa một sự xem xét đáng chú ý. Với lưới số chẵn, bạn không có điểm giữa nào để pixel xuất hiện. Đây không hẳn là một điều xấu, bạn sẽ phải đưa ra một số quyết định có vẻ kỳ quặc khi đóng. MVí dụ, thứ hai , trông khá khó xử khi phóng to nhưng thực sự là một sự cải thiện về kích thước màn hình. Những loại đường ngụ ý này là một thành phần quan trọng của hầu hết các phông chữ pixel.

Tất nhiên, bạn cũng sẽ phải tính đến không gian thừa cần thiết cho khoảng cách chữ. Bạn chắc chắn không có nhiều chỗ để chơi ở đó nhưng đó là một phần quan trọng của tính dễ đọc.

Nhìn đến các bậc thầy

Như với bất kỳ hình thức nghệ thuật nào, bạn sẽ học được nhiều nhất bằng cách cố gắng làm những gì các bậc thầy làm. Các ví dụ tôi đã liên kết ở trên sẽ cung cấp cho bạn nhiều thông tin.

Một nghiên cứu điển hình về sự xuất sắc của phông chữ pixel là Unibody 8 của Underware . Cuốn tiểu thuyết thẳng đứng "in nghiêng" đạt được hiệu quả của nó bằng cách sử dụng các góc 45 ° để ngụ ý góc của một phông chữ nghiêng mà không ảnh hưởng đến toàn bộ phông chữ trong quá trình.

Emigre là một trong những người tiên phong, cùng với Susan Kare trên hệ điều hành Mac đầu tiên.

* Lưu ý bên lề:
Retina là một ví dụ tuyệt vời về cách một phông chữ in gây bất ngờ ở kích thước nhỏ, như những gì tôi sẽ xem là tiền thân Bell Cent Years .

Võng mạc của H & FJ


Tôi thực sự muốn một trường hợp thấp hơn. Tôi muốn phông chữ 6x12 có thể sử dụng được, giả sử là bàn điều khiển.
Joe Z.

Nhưng vâng, đây là một câu trả lời rất hay, với rất nhiều tài nguyên tôi có thể xem thêm. Cảm ơn bạn.
Joe Z.

1
Bổ sung rất nhỏ: có thể dễ dàng đạt được "gần và xa" trong Photoshop bằng cách tạo một cửa sổ mới (menu cửa sổ> sắp xếp> cửa sổ mới cho docname-1) và để một trong số chúng ở kích thước thu phóng 100% sang một bên như một "Bản sao xem trước"
horatio

1
Không phải lo lắng, bạn có được ý tưởng. Tôi thậm chí không nghĩ rằng bạn sẽ cần thêm chiều cao. Tôi chỉ cần thêm pixel trên chiều rộng và để lại chiều cao trong khoảng từ 10 đến 12. Chơi xung quanh với một vài ký tự và xem nơi bạn kết thúc.
thường phục

1
Nhân tiện, một từ kiểm tra tiêu chuẩn chiếm các hình dạng cơ bản của bảng chữ cái La Mã là Hamburgefonts . Nhiều nhà thiết kế loại sẽ bắt đầu với H, nođể có được một cảm giác về những đặc điểm cần thiết.
thường phục
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.