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