Tìm hiểu về font chữ trong thiết kế
fonts
4
style
3
text
1
White

Sarah Nguyen viết ngày 14/01/2021

Tìm hiểu về font chữ

alt text

1. Khái niệm

Font chữ là sự sáng tạo kết hợp giữa typo và graphic: Nghệ thuật sắp đặt và kỹ thuật sử dụng font chữ.

Khi nói về kiểu chữ, các thuật ngữ font chữ và kiểu chữ có xu hướng trộn lẫn và được sử dụng gần như đồng nghĩa với nhau.

Sự nhầm lẫn này cho thấy thuật ngữ ngành thay đổi nhanh chóng như thế nào với sự ra đời của các quy trình và công nghệ mới.

Hầu hết thời gian, hai từ được sử dụng thay thế cho nhau và nó không có vấn đề gì. Tuy nhiên khi phân tích ở cấp độ kỹ thuật, bạn sẽ thấy rằng trên thực tế các thuật nghữ này có các định nghĩa khác nhau.

2. Phân biệt font chữ và kiểu chữ

  • Kiểu chữ ( Hoặc họ kiểu ) là tên của bộ sưu tập font chữ cụ thể

Ví dụ: Kiểu chữ Roboto, kiểu chữ Arial ...

  • Font chữ: Trong khi đó font chữ lại đề cập tới trọng lượng, chiều rộng, tức là style của kiểu chữ đó.

Ví dụ: Roboto là kiểu chữ được chọn cho giao diện của bạn, nhưng font chữ là Roboto regular

3. Đường trung bình và đường cơ sở

alt text

Thông thường, các kiểu chữ được đặt trên một đường thẳng, tạo ra một bản trình bày trực quan gọn gàng. Các công cụ chính hỗ trợ các nhà thiết kế trong quá trình này là Đường trung bình và Đường cơ sở.

Đầu tiên, đánh dấu phần trên cùng và dưới cùng của phần thân ký tự. Những dòng như vậy cho phép tạo font chữ. Thậm chí, bao gồm các đường kẻ vô hình trong các giao diện sau khi các nhà thiết kế hoàn thành giao diện của họ.

4. Khoảng trắng

Khoảng trắng, còn được gọi là không gian âm. Là khoảng cách giữa các yếu tố trong giao diện thiết kế.

Người đọc không nhận thức được vai trò quan trọng của khoảng trắng, nhưng các nhà thiết kế cần phải chú ý tới nó.

Trong trường hợp khoảng trắng không được cân bằng, văn bản sẽ rất khó đọc:

alt text

5. Căn chỉnh text

Tạo kiểu chữ hiệu quả không phải là dễ dàng, và nó bao gồm nhiều quy trình.

Ví dụ căn chỉnh căn bản cũng là một yếu tố hết sức quan trọng. Trong giai đoạn này, các nhà thiết kế hướng tới việc chuyển đổi các phần văn bản được đặt ngẫu nhiên thành một bố cục thống nhất.

alt text

6: Khoảng cách dòng

Khoảng cách dòng (line-height) thực sự quan trọng trong việc thiết kế giao diện.

Khoảng cách dòng được đo với tỷ lệ phần trăn font-size. Và khoảng 120% - 150% là lý tưởng cho khả năng đọc.

Công thức tính khoảng cách dòng:
Line-height = font-size * tỷ lệ % font-size

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Sarah Nguyen

1 bài viết.
3 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
Male avatar
1 0
Một ngày nào đó, bạn mới dựng source code lên. Bạn luôn hi vọng khi vào site sẽ hiển thị đẹp mắt và yếu tố đẹp mắt ban đầu sẽ là text của site của ...
skul169 viết hơn 4 năm trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
3 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!