Cách điều chỉnh thuộc tính văn bản trong Adobe XD

Khi bạn có văn bản trong dự án Adobe XD của mình, bạn có thể bắt đầu thay đổi các thuộc tính văn bản. Các thuộc tính này bao gồm Font Family, Font Size, Font Weight, Alignment, Character Spacing (kerning và theo dõi), Line Spacing (hàng đầu), Fill, Border (nét), Shadow (đổ bóng) và Background Blur. Vì vậy, chúng ta hãy xem lại cách các thuộc tính đó được áp dụng.

Giới thiệu về khả năng đọc và lựa chọn phông chữ

Việc lựa chọn một phông chữ là rất quan trọng. Bạn có thể có nhiều lựa chọn phông chữ trong hệ thống của mình, nhưng chỉ một số lựa chọn sẽ cắt nó thành lựa chọn thành công để đọc trên màn hình. Một số đặc điểm cần tìm trong lựa chọn phông chữ của bạn bao gồm:

• Serif hay không serif? Dưới đây, bạn thấy một họ phông chữ ở kiểu serif ở trên cùng và một kiểu sans serif ở dưới cùng. Serifs có một hình chiếu nhỏ kết thúc một nét của một chữ cái. Mặt khác, Sans serif không có hình chiếu nhỏ như vậy. Các kiểu chữ Sans serif có xu hướng trông hiện đại hơn và là một lựa chọn phổ biến cho các ứng dụng và trang web tương tác. Trước đây, người ta tin rằng các họ phông chữ có serifs sẽ dễ đọc hơn khi có một lượng lớn văn bản. Các thử nghiệm được thực hiện với thiết bị theo dõi mắt đã chứng minh rằng không có sự khác biệt lớn về khả năng đọc giữa serif hoặc sans-serif, vì vậy hãy thoải mái chọn một trong hai kiểu miễn là bạn chú ý đến một số đặc điểm phông chữ khác theo sau.

  Một kiểu chữ serif ở trên cùng, sans-serif ở dưới cùng.

• Chiều rộng đường thẳng, đều: Bởi vì kiểu của bạn sẽ được tạo từ pixel, tốt nhất là không có nhiều sự thay đổi về chiều rộng của văn bản. Bạn có thể thấy sự khác biệt, trong bản xem trước pixel, giữa lựa chọn phông chữ có sự thay đổi về chiều rộng (trên cùng) và phông chữ nhất quán về chiều rộng của nó.

  Phông chữ trên cùng có sự thay đổi về độ dày và nét mảnh tạo ra phông chữ; phông chữ dưới cùng nhất quán và dễ đọc hơn trên màn hình.

• Bộ đếm mạnh: Bộ đếm là những lỗ mà bạn nhìn thấy trong các chữ cái như “O,” “B” và “R”. Hãy chú ý đến độ lớn của những bộ đếm đó vì chúng cũng có thể gây ra các vấn đề về khả năng đọc nếu chúng đóng lại khi được hiển thị dưới dạng pixel trên màn hình. Chế độ xem pixel của hai họ phông chữ khác nhau xuất hiện; xem các quầy trông như thế nào so với nhau.

  Tìm kiếm các bộ đếm mở mạnh mẽ trong lựa chọn họ phông chữ của bạn.

• Dấu giảm dần và chiều cao nắp: Các phần giảm dần ngắn và chiều cao của nắp thấp rất quan trọng đối với khả năng đọc trên màn hình. Ở trên cùng, bạn thấy một họ phông chữ với các chiều giảm dần ngắn và chiều cao giới hạn thấp; ở dưới cùng, một phông chữ có chiều dài giảm dần và chiều cao của chữ cái cao.

  Họ phông chữ với các dấu giảm dần ngắn và chiều cao giới hạn thấp thường dễ đọc hơn trên màn hình.

Chọn họ phông chữ của bạn

Bây giờ bạn đã biết điều gì làm cho việc lựa chọn phông chữ tốt hơn để dễ đọc, hãy sử dụng bảng Thuộc tính để chọn một phông chữ. Những điều cần lưu ý khi thực hiện lựa chọn của bạn bao gồm những điều sau:

• Họ phông chữ: Sau khi bạn đã nhập một số kiểu trên màn hình, bạn có thể chọn kiểu đó và chọn menu thả xuống Họ Phông chữ trong phần Văn bản của bảng Thuộc tính. Nếu bạn biết phông chữ bạn muốn, chỉ cần bắt đầu nhập tên phông chữ vào hộp văn bản Font Family và nếu nó có trong hệ thống của bạn, nó sẽ được tìm thấy trong danh sách của bạn.

  Đừng quên rằng bạn có sẵn các phông chữ thông qua Adobe TypeKit.

• Trọng lượng phông chữ: Sau khi bạn chọn một họ phông chữ, bạn có thể chọn trọng số từ trình đơn thả xuống Trọng lượng phông chữ. Tùy thuộc vào phông chữ mà bạn có trong hệ thống của mình, bạn sẽ có các lựa chọn trọng lượng phông chữ khác nhau.

  Chọn họ phông chữ và trọng lượng phông chữ.

• Kích thước phông chữ: Bạn có thể chỉ cần nhập kích thước phông chữ vào hộp văn bản Kích thước phông chữ, nhưng nếu bạn không chắc kích thước nào phù hợp nhất, bạn có thể đặt con trỏ bên dưới hộp văn bản Kích thước phông chữ và nhấp và kéo. Tìm mũi tên hai đầu trước khi kéo. Kéo lên làm giảm kích thước; xuống làm tăng kích thước.

  Nhấp và kéo để thay đổi kích thước phông chữ một cách trực quan.

• Căn chỉnh: Bạn có thể thay đổi văn bản đã chọn của mình thành Căn trái, Căn giữa hoặc Phải bằng các nút Căn chỉnh trong phần Văn bản của bảng Thuộc tính.
• Khoảng cách giữa các ký tự: Khoảng cách giữa các ký tự đề cập đến khoảng cách giữa các ký tự. Điều này được gọi là theo dõi . Tại đây, bạn sẽ thấy kết quả của việc tăng khoảng cách giữa các ký tự.

  Các ký tự ở khoảng cách bình thường, đặt ở 0 (không) và sau đó đặt ở 150.

Lưu ý rằng bạn có thể sử dụng cùng một kỹ thuật nhấp và kéo có sẵn trong hộp văn bản Kích thước Phông chữ để thay đổi khoảng cách ký tự một cách trực quan.

Bạn cũng có thể thay đổi kích thước của khoảng cách ký tự một cách trực quan bằng cách nhấp và kéo.

• Chiều cao dòng: dòng chiều cao là hàng đầu , khoảng cách giữa các dòng văn bản. Điều này có thể đóng một vai trò quan trọng trong thiết kế thông tin, vì vậy hãy đảm bảo rằng bạn đang sử dụng điều này một cách nhất quán trong suốt quá trình thiết kế của mình. Bạn cũng có thể định vị con trỏ của mình bên dưới hộp văn bản Chiều cao dòng và nhấp và kéo lên hoặc xuống để giảm và tăng chiều cao dòng của bạn.
• Màu: Thay đổi màu Tô bằng cách nhấp vào hộp bên cạnh Tô màu trong bảng Thuộc tính. Bạn thực hiện tác vụ này giống như cách bạn làm với bất kỳ hình dạng nào. Chọn hộp Tô màu và chọn một màu từ Bộ chọn màu. Bạn cũng có thể chọn độ trong suốt cho văn bản của mình từ trang chiếu Độ trong suốt có sẵn ở bên phải của Bộ chọn màu.
• Đường viền: Áp dụng đường viền sẽ đặt một nét xung quanh văn bản của bạn. Điều này không được khuyến khích vì nó có thể gây ra các vấn đề về khả năng đọc. Sử dụng nó một cách tiết kiệm và có lẽ chỉ cho các hiệu ứng đặc biệt. Hình ảnh dưới đây cho thấy một ví dụ về kiểu chữ lớn hơn có nét mảnh và tô màu trắng trên nền tối hơn. Trong tình huống như thế này, một đường viền có thể hoạt động, nhưng với văn bản nhỏ hơn thì không.

  Một đường viền nhỏ với màu trắng trên nền tối.