Tìm hiểu về lý do tại sao bạn thường sẽ được lợi khi sử dụng một chút khoảng cách chữ cái trên các phần tử văn bản viết hoa - và cách thực hiện với CSS.
Trong kiểu chữ, khi bạn sử dụng chữ hoa / hoa toàn bộ (chữ in hoa) trên các thành phần văn bản, bạn thường cần thêm một chút khoảng trống giữa các chữ cái, nếu không, chúng trở nên quá chật để đọc thoải mái.
Khoảng cách chữ cái còn được gọi là theo dõi. Chúng là từ đồng nghĩa. Cả hai đều đề cập đến khoảng cách giữa một nhóm các chữ cái (từ). Trong giao tiếp, thuật ngữ khoảng cách giữa các chữ cái được sử dụng nhiều hơn trên web, trong khi theo dõi được sử dụng nhiều hơn trong kiểu chữ in.
Hãy xem một số ví dụ.
Chữ thường so với chữ hoa
So sánh các phần tử văn bản sau, chữ hoa thường và tất cả chữ hoa / chữ hoa:
Kiểu chữ
Kiểu chữ
Bạn có thấy vấn đề không?
Không sao cả nếu bạn không. Khi sử dụng trọng số phông chữ bình thường / mặc định, điều đó thường không thành vấn đề. Nó phụ thuộc vào thiết kế kiểu chữ và cách nó được sử dụng.
Trong CSS, font-weight thông thường có thể được khai báo bằng cách sử dụng font-weight: normal; hoặc font-weight: 400; - nó giống nhau.
Chữ thường so với chữ hoa (bold)
Bây giờ chúng ta hãy so sánh các ví dụ tương tự, nhưng lần này chúng ta thêm một font-weight in đậm:
Kiểu chữ
Kiểu chữ
Bạn có thấy văn bản viết hoa toàn bộ trông chặt chẽ như thế nào bây giờ khi chúng ta sử dụng các nét chữ dày hơn (in đậm) không? Bây giờ bạn có thể thấy rằng một số chữ cái đang chạm vào nhau.
Trong CSS, một font-weight đậm có thể được khai báo bằng cách sử dụng
font-weight: bold;. Bạn cũng có thể sử dụng các giá trị số, nhưng hãy đảm bảo rằng bạn biết có bao nhiêu tùy chọn trọng lượng phông chữ có sẵn từ họ phông chữ mà bạn lựa chọn.700thường tương đương với in đậm - nhưng không phải lúc nào cũng vậy.
Letterspacing (còn gọi là theo dõi)
Hãy tạo một bản sao của ví dụ về phần tử văn bản chữ hoa từ trước đó và cung cấp cho nó 4px khoảng cách chữ cái và xem hai phần tử này so sánh như thế nào:
Kiểu chữ
Kiểu chữ
Chà, thật là khác biệt! Ví dụ đầu tiên gần như gợi lên phản ứng ngột ngạt, trong khi ví dụ thứ hai cho tác động ngược lại.
Trong CSS, khoảng cách giữa các chữ cái được khai báo bằng
letter-spacingthuộc tính, ví dụ:letter-spacing: 4px;Nó có thể được đánh vần có hoặc không có dấu gạch ngang (-) bằng ngôn ngữ thông thường, nhưng trong CSS, nó luôn với dấu gạch ngang.
Hãy để tôi được rõ ràng. Tôi không gợi ý rằng ví dụ về phần tử văn bản thứ hai với khoảng cách chữ cái được thêm vào luôn là sự lựa chọn tốt hơn. Nó phụ thuộc vào loại bầu không khí / tâm trạng mà bạn đang cố gắng thiết lập trong trường hợp sử dụng cụ thể của mình.
Một trong những công cụ mạnh mẽ nhất để thể hiện và củng cố chủ đề của một bộ phim trên áp phích là kiểu chữ. Một người sắp chữ có tay nghề cao sẽ cẩn thận đưa ra quyết định về:
- typeface / font-family
- phân loại kiểu chữ (serif, sans-serif, v.v.)
- kích thước phông chữ
- cách viết hoa chữ cái (viết hoa, viết thường, v.v.) ***
- font-weights (bình thường, in đậm, v.v.)
- kiểu phông chữ (thông thường / bình thường / nghiêng)
Cho dù bạn đang làm việc trên áp phích phim, bìa sách, nhãn thực phẩm hay thứ gì khác, các quyết định định dạng kiểu chữ của bạn phải dựa trên bối cảnh của nhiệm vụ hiện tại.
Khoảng cách chữ chỉ là một, nhưng là một yếu tố mạnh mẽ của kiểu chữ:
CAPTIVITY
TỰ DO
Bạn có cảm nhận được sự khác biệt không?
Cảm xúc sang một bên, hãy cân nhắc điều này: Nói chung, văn bản viết hoa đã khó đọc hơn văn bản viết hoa bình thường, bởi vì cấu trúc đối xứng và tương xứng mà các chữ cái có được khi sử dụng kiểu chữ cái này, khiến cho việc phân biệt các chữ cái riêng lẻ trong một từ trở nên khó khăn - đặc biệt là trong một câu hoặc đoạn văn.
Tóm lại:
- Vì mục đích thân thiện với người đọc, hãy sử dụng văn bản viết hoa một cách tiết kiệm. Nó có thể hoạt động tốt đối với tiêu đề hoặc tiêu đề ngắn, nhưng không hoạt động tốt đối với toàn bộ câu hoặc đoạn văn.
- Theo quy tắc viết hoa / viết hoa toàn bộ, văn bản viết hoa có lợi khi nhận được một chút, đôi khi là rất nhiều, khoảng cách giữa các chữ cái để làm cho văn bản dễ hiểu hơn.
- Văn bản có xu hướng thẩm mỹ hơn khi trông không giống như bạn đã dán các chữ cái lại với nhau. Hình ảnh quan trọng.
- Đôi khi theo dõi chặt chẽ / khoảng cách giữa các chữ cái chính xác là phù hợp.
Nó không phải là màu đen và trắng. Bối cảnh là chìa khóa.