Nghệ thuật sắp đặt chữ
Mở đầu:
Thiết kế website đã biến đổi rất nhiều trong số những năm qua. Trường đoản cú những tinh giảm về mặt đường truyền, font chữ, can dự v.v. Mang lại đến hiện nay chúng ta sẽ thấy một kỷ nguyên của kiến thiết web.
Bạn đang xem: Nghệ thuật sắp đặt chữ
Nhờ rất nhiều kỹ thuật tiên tiến và phát triển Website hầu như hoàn toàn có thể cung cấp người dùng các kỹ thuật tương tác tiên tiến nhất. Khi các nhà phát triển, lập trình liên tiếp nghiên cứu phần lớn kỹ thuật bắt đầu thì các nhà thi công có xu hướng áp dụng phần nhiều kỹ thuật thi công đồ họa in ấn và dán vào trong thiết kế web.
Trong khi đều quy mong cho xây cất in ấn đã gồm từ vô cùng lâu, và hầu hết đã thành chuẩn chỉnh mực, thì những nhà kiến tạo web số đông vẫn không thể thống độc nhất vô nhị được một quy chuẩn chỉnh nhất định – vấn đề đó chủ yếu vì tại sao khách quan tới từ sự địa chỉ của người dùng tới xây đắp web.
Từ phần đa nghiên cứu công ty chúng tôi xác định ra 13 vướng mắc chung về typographic:
Line height (pixel) ÷ kích thước chữ phần nội dung(pixel) = 1,48
Lưu ý rằng 1,5 là một giá trị thường xuyên được đề nghị trong các cuốn sách kinh điển về typographic, vị đó nghiên cứu và phân tích của công ty chúng tôi sao lưu các nguyên tắc này. Vô cùng ít các trang web sử dụng tỉ lệ ít hơn thế. Số lượng các website mà bên trên 1,48 giảm khi bạn nhận được thêm mọi giá trị này.
Line length (pixel) ÷ mặt đường cao (pixel) = 27,8Line length mức độ vừa phải là 538,64 pixel (không bao gồm margins cùng paddings ) là hơi lớn, chú ý rằng các trang web vẫn còn đấy sử dụng 12-13 px cho kích cỡ font nội dung.
Không gian giữa các đoạn văn (pixel) ÷ Line height (pixel) = 0,754Chúng tôi đã rất ngạc nhiên bởi công dụng này. Nó chỉ ra rằng rằng khoảng cách giữa các đoạn (tức là khoảng chừng trống giữa những dòng cuối cùng của một quãng văn cùng dòng đầu tiên của tiếp đến của 1 đoạn khác ) chỉ gần bằng với chữ đầu mẫu – the Leading (đó là điểm sáng chính của nhịp độ thẳng đứng tuyệt đối hoàn hảo ).
Thường xuyên hơn, khoảng cách giữa những đoạn (pharaghap spacing) là 75% của line height. Lý do có thể là chữ đầu loại thường bao gồm các không khí đưa lên bởi vì descenders (ngược cùng với ascender – là phần gạch ốp trên của những chữ như chữ d -. Descenders là phần gạch men dưới của các chữ như chữ q, p), và chính vì hầu hết những ký tự không tồn tại descenders, thêm khoảng chừng trắng được tạo nên theo dòng.
Chúng tôi đã đúc rút được một vài liệu thống kê để tham khảo. Lưu ý rằng các quy tắc này rất có thể phổ biến, tuy thế không phải luôn luôn được xem như là tốt nhất.
1. Serif so với Sans-serif
Thường thì nhà thi công thích thực hiện serif (có chân ) đến tiêu đề, lý do chúng quan sát dễ đọc cùng đẹp khi ở kích thước lớn. Các tương phản giữ serif đến tiêu đề với sans-serif cho nội dung thường thú vị.
Một số nhà kiến thiết thích serif mang đến nội dung bởi vì họ nhận định rằng những nét gạch men ở chân của chính nó giúp bạn đọc tất cả sự link giữa những ký tự với nhau, khiến bọn họ đọc "nhanh" dễ ợt hơn.
Theo phân tích của chúng tôi, áp dụng tiêu đề là sans-serif vẫn thịnh hành hơn serif, cho dù đã giảm sút những năm gần đây.
60% các trang web thực hiện font sans-serif cho tiêu đề, chủ yếu là Arial, Verdana, Lucida Grande và Helvetica. Lấy ví dụ như như: CNN , ArsTechnica , Slate , bbc và NewScientist .
Chỉ gồm 34% những trang web áp dụng một khía cạnh chữ ko chân (sans-serif) đến nội dung. Như: new york Times, Typographica, Time, AIGA cùng Newsweek.
Các dạng hình chữ serif phổ biến nhất cho tiêu đề là Georgia (28%) với Baskerville (4%).
Các hình trạng chữ serif thịnh hành nhất cho văn bản là Georgia (32%) với Times New Roman (4%).
Sans-serif font thịnh hành nhất mang lại tiêu đề là Arial (28%), Helvetica (20%) cùng Verdana (8%).
Sans-serif font thông dụng nhất cho câu chữ là Arial (28%), Verdana (20%) và Lucida Grande (10%).
Hai phần bacủa những trang web chúng tôi điều tra thực hiện font sans-serif mang đến nội dung. Nguyên nhân chính chắc hẳn rằng là bởi vì, tuy vậy sự phổ cập của kỹ thuật fonts cao cấp, ví dụ như Cufón, phần nhiều các nhà kiến thiết thích những font web cơ bản, trong đó chủ yếu hỗ trợ cho họ chỉ tất cả hai chắt lọc khả thi: Georgia với Times New Roman.
Và cũng chính vì sự tẩy chay với Times New Roman (nó thường khiến cho một trang web hiện đại, thành quan sát đã lỗi thời), chỉ với lại Georgia.
Các phông Sans-serif cung cấp đa dạng các lựa chọn cho Web.
2. đầy đủ kiểu chữ phổ cập nhất?
Đáng ngạc nhiên, bất chấp sự thịnh hành của các kỹ thuật sửa chữa thay thế font cùng sẵn có tăng thêm của các phông chữ mới thiết lập sẵn (ví dụ như Windows Vista và phông chữ Mac ),
Các xây cất trong nghiên cứu và phân tích của chúng tôi chủ yếu thực hiện font chữ truyền thống lâu đời của Web, chỉ có trường đúng theo ngoại lệ là Lucida Grande (mà đi kèm thiết lập chỉ trên máy tính xách tay Mac ), Helvetica cùng Baskerville.
Đối cùng với 20% còn lại, "tình yêu thương với Helvetica" là 1 lựa lựa chọn phổ biến, như thể Lucida Grande .
Với tùy lựa chọn như Verdana và Arial bao gồm sẵn các như lá thu rơi, nhà thiết kế không tồn tại lý vì để không những định chuẩn chỉnh phông chữ để đạt được kết quả tốt nhất.
Verdana được thực hiện tối thiểu cho những tiêu đề. Chỉ gồm 10 trang web sử dụng nó mang đến nội dung, và chỉ tất cả bốn thực hiện nó cho các tiêu đề.
Lý do chính là Verdana đặt nhiều khoảng cách giữa những chữ cái, tạo nên nó không hẳn là gọn gàng để đọc tại một form size lớn. Nếu khách hàng đang sử dụng nó cho những tiêu đề, chúng ta có thể muốn tận dụng ưu thế của CSS nhằm chỉnh khoảng chừng cách.
Georgia với Arial số đông là những phông chữ phổ biến cho những tiêu đề.
Cuối cùng, chúng tôi xem xét rằng "thay gắng – alternative" font chữ được sử dụng nhiều hơn nữa cho những tiêu đề hơn cho nội dung.
Nhà thiết kế bên cạnh đó sẵn sàng nghiên cứu với những tiêu đề của họ hơn là với các phần nội dung. Nếu bạn muốn mang lại một trong những biến thể typographic vào thiết tiếp đến theo của bạn, tiêu đề rất có thể là nơi dễ nhất để bắt đầu.
3. Nền sáng giỏi tối?
Chúng tôi đã hiếu kỳ muốn tìm hiểu mức độ mà các nhà kiến tạo đã được chuẩn bị để phân tách với color nền tối. Shop chúng tôi tìm kiếm bất kể trang như thế nào theo định hướng đó – gồm một bảng màu buổi tối và rất quá bất ngờ khi công dụng tìm thấy chưa hẳn là duy nhất.
Nền màu trắng tinh khiết cho nội dung giành thắng lợi vang dội. Tuy nhiên, không ít các mẫu kiến tạo tránh sự tương bội nghịch cao với màu trắng trên màu black thuần khiết, màu sắc văn phiên bản thường được thực hiện khối lượng nhẹ hơn một chút màu đen.
Thiết kế cụ thể tập trung vào lúc độ dễ dàng đọc và tránh những phân tích với màu sắc nền. Sự tương bội phản của màu black trắng rất đơn giản đọc.
4. Kích thước trung bình của Font mang lại tiêu đề
Tất nhiên, vấn đề lựa chọn size font tiêu đề dựa vào vào các font sử dụng trong thiết kế. Trong hồ hết trường hợp, phân tích của chúng tôi với các size font phổ cập trong khoảng 18-29 pixel, thì cùng với 18-20 px và 24-26 px là rất nhiều sự lựa chọn phổ cập nhất.
Tuy nhiên, chúng ta cũng có thể thử nghiệm với các form size lớn hơn, cũng chính vì màn hình luôn luôn trở buộc phải lớn hơn, như là độ phân giải màn hình.
Xem thêm: Thiền Viện Trúc Lâm Thiền Viện Đà Lạt, Ghé Thăm Thiền Viện Trúc Lâm Đà Lạt
Một minh chứng ví dụ là Wilson Miner (ảnh chụp màn hình dưới đây ), người tiêu dùng một kích thước font to 48 pixel đối với các tiêu đề của mình. Trang web của ông là một trong những trường hợp sệt biệt, bởi vì tất cả các bài viết có tiêu đề vô cùng ngắn, chỉ gồm một vài từ.
Bạn gồm nhớ khoảng tầm bảy năm trước, các xây dựng web hết sức nhỏ, cực nhọc đọc, và câu chữ thường là Tahoma 8px? độ lớn chữ bé dại đã thành quá khứ, các và nhiều hơn thế nữa những nhà thiết kế hiện đại đang chuyển sang kích thước chữ lớn.
Từ nghiên cứu và phân tích của bọn chúng tôi, shop chúng tôi thấy một xu hướng rõ ràng đối với các form size từ 12 cùng 14 px. Size font thông dụng nhất (38%) là 13 px, với 14 px hơi phổ biến hơn 12 px. Quan sát chung, độ lớn chữ mức độ vừa phải cho ngôn từ là 13 px.
Tỉ lệ size của tiêu đề cùng nội dung
Để nắm rõ hơn quan hệ giữa size font tiêu đề cùng nội dung, chúng tôi chia size font chữ tiêu đề của mỗi trang web cho kích thước font câu chữ nó sử dụng. Shop chúng tôi đã lấy trung bình của các chỉ số này cùng thu được một luật lệ chung:
font tiêu đề ÷ font câu chữ = 1,96
Giá trị sau cuối sau đó là 1,96. Điều này có nghĩa rằng khi chúng ta đã lựa chọn 1 kích thước font cho chỗ nội dung, bạn có thể muốn nhân nó 2 lần để sở hữu được kích thước font tiêu đề.
Điều này, tất nhiên, dựa vào vào phong cách của bạn, hồ hết nguyên tắc sẽ không nhất thiết cung cấp cho bạn kích thước buổi tối ưu cho xây đắp của bạn.
Một chọn lọc khác là sử dụng một quy mô truyền thống (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) hoặc dãy Fibonacci (ví dụ 16-24 – 40 – 64 – 104) để sở hữu được kết quả typographic từ bỏ nhiên.
Chiều cao Line height vẫn luôn phụ thuộc vào vào size font bạn lựa chọn. Vị đó trình bày bằng biểu trang bị lựa chọn phổ biến sẽ không có ý nghĩa. Phù hợp hơn cho chính mình khi áp dụng một đương vị tương đối, chẳn hạn như "em" tốt "%" để xác định khoảng giải pháp line height.
"em"là một solo vị giám sát trong lĩnh vực typography. Đơn vị này xác định tỷ lệ chiều rộng lớn và độ cao xung quanh một chữ đối với kích thước điểm px của chữ đó.
Theo phân tích của bọn chúng tôi:
Line height (pixel) ÷ khuôn khổ chữ phần nội dung(pixel) = 1,48
Lưu ý rằng 1,5 là 1 giá trị thường xuyên được đề nghị trong các cuốn sách kinh khủng về typographic, vì đó phân tích của chúng tôi sao lưu các nguyên tắc này. Vô cùng ít những trang web áp dụng tỉ lệ ít hơn thế. Con số các trang web mà trên 1,48 giảm khi chúng ta nhận được thêm đều giá trị này.
Line length (pixel) ÷ con đường cao (pixel) = 27,8
Line length vừa phải là 538,64 px (không bao gồm margins với paddings ) là khá lớn, xem xét rằng các trang web vẫn còn đó sử dụng 12-13 pixel cho kích thước font nội dung.
Không gian giữa các đoạn văn (pixel) ÷ Line height (pixel) = 0,754
Chúng tôi đang rất không thể tinh được bởi tác dụng này. Nó chỉ ra rằng rằng khoảng cách giữa những đoạn (tức là khoảng chừng trống trong những dòng sau cuối của một quãng văn với dòng thứ nhất của sau đó của 1 đoạn khác ) chỉ gần bởi với chữ đầu cái – the Leading (đó là điểm sáng chính của nhịp điệu thẳng đứng tuyệt vời ).
Thường xuyên hơn, khoảng cách giữa những đoạn (pharaghap spacing) là 75% của line height. Lý do hoàn toàn có thể là chữ đầu chiếc thường bao gồm các không gian đưa lên vị descenders (ngược cùng với ascender – là phần gạch men trên của các chữ như chữ d -. Descenders là phần gạch dưới của các chữ như chữ q, p), và bởi vì hầu hết các ký tự không có descenders, thêm khoảng trắng được tạo thành theo dòng.
AIGA là một ví dụ tuyệt đối hoàn hảo tối ưu. Size font của chính nó là 13,21 điểm (chuyển đổi từ ems) và chiều cao dòng của nó là 19,833 pixel(chuyển thay đổi từ ems). Vào thực tế, 19,8333 ÷ 13,2167 = 1,5011. (Chữ I là the Leading ).
Vì vậy, một khi bạn đã quyết định size font nội dung, nhân giá trị này lên 1.5 đã cung cấp cho mình số Line height tối ưu. Một khi bạn đã có điều đó, bạn cũng có thể nhân giá bán trị new này bằng 27,8 để sở hữu được chiều lâu năm dòng về tối ưu. Xem xét rằng cách bố trí cũng cần có gutters, margins và padding.
Theo một quy luật cổ xưa của website typography, 55-75 là một trong những lượng buổi tối ưu của những ký tự trên từng dòng. Đáng ngạc nhiên, nghiên cứu và phân tích của chúng tôi cho biết thêm hầu hết những trang web có số lượng cao hơn.
Chúng tôi đếm có bao nhiêu chữ gồm thể phù hợp trên một dòng bằng phương pháp sử dụng form size font mặc định. Tác dụng là mức độ vừa phải 88,74 ký tự bên trên mỗi mẫu (tối đa ) là khôn xiết cao.
46% các trang web thực hiện underline tại từng link, trong những lúc những bạn khác chỉ lưu lại với màu sắc hay font đậm.
6% của những trang website được sử dụng một trong những hình ảnh thay vắt cho tiêu đề hoặc ngôn từ (ví dụ như Monocle, New Yorker, Newsweek).
96% trang web không thực hiện justify text. (dàn mọi trong một cột văn bản).
Trang web mang đến văn bạn dạng căn trái vừa đủ 11,7 pixel (tính từ khu vực biên trái của nội dung).
Kết luận
Nghiên cứu giúp này cho thấy thêm những loại sử dụng phổ biến và hướng dẫn để Setting trong xây dựng Web. Xem xét rằng những phát hiện nay này chưa hẳn là kỹ thuật và thực hiện như là phía dẫn sơ bộ:
serif tốt sans-serif fonts chữ xuất sắc cho tiêu đề với nội dung, tuy nhiên phông chữ sans-serif vẫn còn thịnh hành hơn cho tất cả hai loại.
Lựa lựa chọn chung cho những tiêu đề là Georgia, Arial cùng Helvetica.
Lựa chọn thông thường cho nội dung là Georgia, Arial, Verdana cùng Lucida Grande.
Kích thước font thịnh hành nhất cho tiêu đề là 1 phạm vi từ bỏ 18 cho 29 pixel.
Kích thước font phổ biến nhất mang lại nội dung là một trong những phạm vi thân 12 với 14 pixel.
Kích thước phông chữ tiêu đề ÷ size phông ngôn từ = 1,96.
Line height (pixel) ÷ kích cỡ chữ phần nội dung (pixel) = 1,48.
Line length (pixel) ÷ Line height (pixel) = 27,8.
Không gian giữa những đoạn – pararaphs (pixels) ÷ Line height (pixel) = 0,754.
Số ký kết tự về tối ưu của mỗi cái là từ bỏ 55 với 75, tuy nhiên, từ 75 và 85 cam kết tự bên trên mỗi dòng là phổ biến hơn,
Văn bản nội dung là canh trái, sửa chữa thay thế bằng hình ảnh hiếm lúc được sử dụng. Liên kết được gạch men chân hay đánh dấu bằng chữ đậm giỏi màu sắc.
Tất nhiên phần nhiều "quy tắc" chưa phải là thế định. Cầm cố vào đó hãy tùy chỉnh setting cơ bạn dạng về Typo cho xây dựng của bạn. Mỗi website cần độc đáo, và bạn cũng có thể muốn thay đổi lựa chọn ở từng quy trình của thi công cho cân xứng với cách bố trí của bạn.
