NGHỆ THUẬT SẮP ĐẶT CHỮ

-- lựa chọn Website --Sở tin tức và Truyền thôngSở Nội vụVNPT Viễn thông Đà NẵngVNPT Viễn thông Quảng NamUBND Quận Liên ChiểuUBND Quận Thanh KhêUBND Quận Hải ChâuUBND Quận năm giới SơnUBND Quận Cẩm LệUBND Quận đánh TràUBND thị trấn Hòa VangUBND Huyện đảo Hoàng Sa

Mở đầu:

Thiết kế web đã biến hóa rất nhiều giữa những năm qua. Tự những hạn chế về mặt đường truyền, fonts chữ, cửa hàng v.v. Mang đến đến hiện giờ chúng ta vẫn thấy một kỷ nguyên của xây đắp web.

Bạn đang xem: Nghệ thuật sắp đặt chữ

Nhờ phần lớn kỹ thuật tiên tiến Website hầu như có thể cung cấp người dùng các kỹ thuật tương tác tiên tiến và phát triển nhất. Khi các nhà phân phát triển, lập trình thường xuyên nghiên cứu đều kỹ thuật bắt đầu thì các nhà xây cất có xu hướng áp dụng hầu như kỹ thuật thiết kế đồ họa in ấn vào trong thi công web.

Trong khi đa số quy ước cho kiến thiết in ấn đã gồm từ siêu lâu, và phần lớn đã thành chuẩn mực, thì những nhà kiến thiết web đa số vẫn không thể thống tuyệt nhất được một quy chuẩn chỉnh nhất định – điều này chủ yếu hèn vì vì sao khách quan tới từ sự cửa hàng của người dùng tới xây dựng web.

Từ đa số nghiên cứu shop chúng tôi xác định ra 13 thắc mắc chung về typographic:

Line height (pixel) ÷ độ lớn chữ phần nội dung(pixel) = 1,48

Lưu ý rằng 1,5 là một giá trị hay được đề nghị trong các cuốn sách bom tấn về typographic, do đó nghiên cứu và phân tích của công ty chúng tôi sao lưu những nguyên tắc này. Rất ít các trang web sử dụng tỉ lệ thấp hơn thế. Con số các trang web mà trên 1,48 giảm khi bạn nhận được thêm gần như giá trị này.

Line length (pixel) ÷ mặt đường cao (pixel) = 27,8

Line length trung bình là 538,64 px (không bao hàm margins và paddings ) là tương đối lớn, chú ý rằng những trang web vẫn còn đó sử dụng 12-13 px 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 đã rất ngạc nhiên bởi hiệu quả này. Nó đã cho thấy rằng khoảng cách giữa các đoạn (tức là khoảng trống một trong những dòng ở đầu cuối của một đoạn văn và 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à đặc điểm chính của nhịp điệu 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 hoàn toàn có thể là chữ đầu dòng thường bao hàm các không gian đưa lên vì chưng descenders (ngược cùng với ascender – là phần gạch trên của các chữ như chữ d -. Descenders là phần gạch dưới của những chữ như chữ q, p), và chính vì hầu hết các ký tự không tồn tại descenders, thêm khoảng trắng được tạo thành theo dòng.

Chúng tôi đã đúc rút được một trong những liệu thống kê để tham khảo. để ý rằng các quy tắc này có thể phổ biến, nhưng lại không phải luôn được xem như là tốt nhất.

1. Serif đối với Sans-serif

Thường thì nhà xây cất thích sử dụng serif (có chân ) cho tiêu đề, nguyên nhân chúng quan sát dễ đọc với đẹp lúc ở size lớn. Các tương phản duy trì serif mang đến tiêu đề với sans-serif cho văn bản thường thú vị.

Một số nhà kiến thiết thích serif đến nội dung do họ cho rằng những nét gạch ốp ở chân của nó giúp tín đồ đọc gồm sự links giữa những ký từ với nhau, khiến bọn họ đọc "nhanh" dễ dàng hơn.

Theo nghiên cứu và phân tích của bọn chúng tôi, sử dụng tiêu đề là sans-serif vẫn phổ cập hơn serif, mặc dầu đã giảm xuống những năm gần đây.

60% các trang web áp dụng font sans-serif đến tiêu đề, chủ yếu là Arial, Verdana, Lucida Grande và Helvetica. Lấy ví dụ như: CNN , ArsTechnica , Slate , bbc và NewScientist .

Chỉ có 34% những trang web sử dụng một mặt chữ không chân (sans-serif) đến nội dung. Như: thành phố new york Times, Typographica, Time, AIGA cùng Newsweek.

Các kiểu chữ serif thông dụng nhất cho tiêu đề là Georgia (28%) cùng Baskerville (4%).

Các giao diện chữ serif thông dụng nhất cho văn bản là Georgia (32%) với Times New Roman (4%).

Sans-serif font phổ cập nhất cho tiêu đề là Arial (28%), Helvetica (20%) và Verdana (8%).

Sans-serif font thịnh hành nhất cho văn bản là Arial (28%), Verdana (20%) và Lucida Grande (10%).

Hai phần bacủa các trang web shop chúng tôi điều tra áp dụng font sans-serif mang lại nội dung. Lý do chính chắc hẳn rằng là vày vì, tuy vậy sự thông dụng của kỹ thuật phông cao cấp, chẳng hạn như Cufón, phần nhiều các nhà xây dựng thích những font website cơ bản, trong số đó chủ yếu cung ứng cho chúng ta chỉ bao gồm hai gạn lọc khả thi: Georgia và Times New Roman.

Và cũng chính vì sự tẩy chay với Times New Roman (nó thường làm cho một website hiện đại, thành chú ý đã lỗi thời), chỉ từ lại Georgia.

Các fonts Sans-serif cung cấp đa dạng những lựa chọn đến Web.

2. Những kiểu chữ phổ cập nhất?

Đáng ngạc nhiên, bất chấp sự thông dụng của những kỹ thuật thay thế font cùng sẵn có gia tăng của các phông chữ mới thiết lập sẵn (ví dụ như Windows Vista với phông chữ Mac ),

Các xây cất trong phân tích của chúng tôi chủ yếu áp dụng font chữ truyền thống của Web, chỉ bao gồm 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 với Baskerville.

Là trong những mong đợi, Arial, Georgia và Verdana được thực hiện cho ngày lúc này phần bự ở nội dung. Trong phân tích của bọn chúng tôi, khoảng chừng 80% những trang website được sử dụng một trong các ba phông trên.

Đối với 20% còn lại, "tình yêu với Helvetica" là 1 trong lựa chọn phổ biến, như thể Lucida Grande .

Với tùy lựa chọn như Verdana với Arial có sẵn nhiều như lá thu rơi, bên thiết kế không có lý vị để không những định chuẩn phông chữ để đạt được hiệu quả tốt nhất.

Jon rã 16 áp dụng kiểu chữ serif Baskerville cho tiêu đề với kiểu chữ serif Georgia mang đến nội dung.

Verdana được thực hiện tối thiểu cho những tiêu đề. Chỉ tất cả 10 trang web sử dụng nó cho nội dung, và chỉ tất cả bốn áp dụng nó cho những tiêu đề.

Lý do chính là Verdana đặt nhiều khoảng cách giữa những chữ cái, khiến cho nó không hẳn là gọn gàng để gọi tại một form size lớn. Nếu như khách hàng đang áp dụng nó cho các tiêu đề, chúng ta có thể muốn tận dụng ưu thế của CSS để chỉnh khoảng tầm cách.

Georgia và Arial đa số là những phông chữ thịnh hành cho các tiêu đề.

Cuối cùng, bọn chúng tôi lưu ý rằng "thay cầm – alternative" phông chữ được sử dụng nhiều hơn nữa cho các tiêu đề hơn mang lại nội dung.

Nhà thiết kế bên cạnh đó sẵn sàng xem sét với các tiêu đề của mình 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ối theo của bạn, tiêu đề có thể là nơi dễ nhất để bắt đầu.

3. Nền sáng giỏi tối?

Chúng tôi đã tò mò muốn mày mò mức độ mà những nhà xây cất đã được chuẩn bị để phân tách với màu nền tối. Cửa hàng chúng tôi tìm kiếm bất cứ trang làm sao theo định hướng đó – có một bảng màu tối và rất ngạc nhiên khi công dụng tìm thấy không hẳn là duy nhất.

The New Yorker có color sáng, với Times New Roman được thực hiện cho tiêu đề và nội dung

Nền màu trắng tinh khiết cho nội dung giành chiến thắng vang dội. Mặc dù nhiên, không ít các mẫu kiến thiết tránh sự tương phản bội cao với màu trắng trên màu đen thuần khiết, màu sắc văn bạn dạng thường được thực hiện nhẹ hơn một chút color đen.

Thiết kế rõ ràng tập trung vào khoảng độ dễ đọc và tránh những phân tách với màu nền. Sự tương làm phản của màu đen trắng rất dễ dàng đọc.

4. Kích thước trung bình của Font mang đến tiêu đề

Tất nhiên, câu hỏi lựa chọn size font tiêu đề phụ thuộc vào vào những font áp dụng trong thiết kế. Trong hầu hết trường hợp, nghiên cứu của chúng tôi với các form size font phổ cập trong khoảng chừng 18-29 pixel, thì cùng với 18-20 px và 24-26 px là những sự lựa chọn thịnh hành nhất.

Nghiên cứu vãn của cửa hàng chúng tôi đã không mang lại ngẫu nhiên người chiến thắng rõ ràng. Form size font trung bình mang lại tiêu đề là 25,6 pixel. Nhưng để ý rằng bất kỳ kích thước từ 18 đến 29 pixel, tác dụng của nó dựa vào vào xây dựng tổng thể, về cách thức phù phù hợp với các title trên trang web.

Tuy nhiên, chúng ta có thể thử nghiệm cùng với các form size lớn hơn, bởi vì màn hình luôn luôn trở bắt buộc lớn hơn, như là độ phân giải màn hình.

Xem thêm: "Hướng Dẫn" Cách Mở Micro Trên Máy Tính, Cách Bật Micro Trong Laptop Win 7

Một minh chứng cụ thể là Wilson Miner (ảnh chụp màn hình sau đây ), người tiêu dùng một kích cỡ font to 48 pixel đối với các tiêu đề của mình. Website của ông là một trong những trường hợp sệt biệt, cũng chính vì tất cả các bài viết có tiêu đề khôn xiết ngắn, chỉ có một vài từ.

5. Form size trung bình font ở đoạn nội dung.

Bạn tất cả nhớ khoảng bảy năm trước, các xây cất web siêu nhỏ, cạnh tranh đọc, và văn bản thường là Tahoma 8px? kích cỡ chữ nhỏ tuổ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ừ phân tích của bọn chúng tôi, chúng tôi thấy một xu hướng ví dụ đối với các form size từ 12 và 14 px. Kích cỡ font thông dụng nhất (38%) là 13 px, với 14 px hơi thịnh hành hơn 12 px. Chú ý chung, kích cỡ chữ vừa đủ cho nội dung là 13 px.

Dấu gạch ngang, lốt ngoặc kép, chú thích, tên tác giả, văn phiên bản giới thiệu và những đoạn văn bạn dạng được để cẩn thận, với tầm độ dễ đọc buổi tối ưu trong trái tim trí. Các cấu hình thiết lập cần duy nhất quán, với khôn cùng nhiều không khí thoáng hơn.

Typographica thực hiện cỡ chữ lớn cho những đoạn giới thiệu của mình, và sau đó trở lại trạng một kích thước bình thường cho phần còn sót lại của văn bản.

Tỉ lệ kích thước của tiêu đề cùng nội dung

Để làm rõ hơn mối quan hệ giữa kích thước font tiêu đề với nội dung, chúng tôi chia form size font chữ tiêu đề của mỗi website cho kích cỡ font câu chữ nó sử dụng. Chúng tôi đã mang trung bình của các chỉ số này với thu được một luật lệ chung:

font title ÷ font văn bản = 1,96

Giá trị sau cùng sau sẽ 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 bỏ phần nội dung, bạn cũng có thể muốn nhân nó 2 lần để sở hữu được kích 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, những nguyên tắc sẽ không còn nhất thiết cung cấp cho mình kích thước về tối ưu cho xây dựng của bạn.

Một lựa chọn 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 hiệu quả typographic từ bỏ nhiên.

Chiều cao Line height đang luôn dựa vào vào form size font chúng ta lựa chọn. Vì chưng đó trình diễn bằng biểu thiết bị lựa chọn thông dụng sẽ không có ý nghĩa. Phù hợp hơn cho chính mình khi sử dụng một đương vị tương đối, chẳn hạn như "em" hay "%" để khẳng định khoảng giải pháp line height.

"em"là một đối kháng vị giám sát trong nghành nghề dịch vụ typography. Đơn vị này xác định tỷ lệ chiều rộng và độ cao xung quanh một chữ so với kích thước điểm px của chữ đó.

Theo phân tích của chúng tôi:

Line height (pixel) ÷ độ lớn chữ phần nội dung(pixel) = 1,48

Lưu ý rằng 1,5 là 1 giá trị hay được đề nghị trong những cuốn sách kinh khủng về typographic, 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 những trang web thực hiện tỉ lệ thấp hơn thế. Số lượng các website mà trên 1,48 giảm khi bạn nhận được thêm mọi giá trị này.

Line length (pixel) ÷ đường cao (pixel) = 27,8

Line length vừa đủ là 538,64 pixel (không bao hàm margins và paddings ) là tương đối lớn, chú ý rằng nhiều trang web vẫn tồn tại 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 vẫn rất kinh ngạc bởi công dụng này. Nó đã cho thấy rằng khoảng cách giữa những đoạn (tức là khoảng trống một trong những dòng sau cuối của một quãng văn và dòng đầu tiên của tiếp nối của 1 đoạn không giống ) chỉ gần bởi với chữ đầu dòng – the Leading (đó là đặc điểm chính của nhịp độ thẳng đứng tuyệt đố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 mẫu thường bao hàm các không gian đưa lên bởi vì descenders (ngược 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 dưới của các chữ như chữ q, p), và cũng chính vì hầu hết các ký tự không tồn tại descenders, thêm khoảng tầm trắng được tạo nên theo dòng.

AIGA là một ví dụ hoàn hảo và tuyệt vời nhất tối ưu. Form 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 chính nó là 19,833 pixel(chuyển thay đổi từ ems). Trong 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 giá trị 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 đó, chúng ta cũng có thể nhân giá trị bắt đầu này bằng 27,8 để có được chiều lâu năm dòng về tối ưu. Xem xét rằng cách sắp xếp cũng cần phải có gutters, margins and padding.

The New Scientist có 20 pixel của khoảng cách giữa các đoạn.

Theo một quy luật truyền thống của website typography, 55-75 là một vài lượng buổi tối ưu của các ký trường đoản cú trên từng dòng. Đáng ngạc nhiên, phân tích của chúng tôi cho thấy hầu hết những trang website có số lượng cao hơn.

Chúng tôi đếm gồm bao nhiêu chữ có thể phù hợp trên một dòng bằng cách sử dụng kích cỡ font mặc định. Tác dụng là vừa phải 88,74 ký kết tự trên mỗi mẫu (tối đa ) là khôn cùng cao.

Giữa 73 cùng 90 cam kết tự trên mỗi dòng là một trong lựa chọn phổ cập trong thiết kế, nhưng chúng tôi cũng tra cứu thấy ngoại lệ: Monocle (47 cam kết tự/ dòng) với Boxes và Arrows (125 ký tự/ dòng).

46% các trang web áp dụng underline tại từng link, trong những lúc những tín đồ khác chỉ lưu lại với màu sắc hay phông đậm.

6% của những trang web được sử dụng một trong những hình ảnh thay cố cho title hoặc nội dung (ví dụ như Monocle, New Yorker, Newsweek).

96% website không thực hiện justify text. (dàn hầu hết trong một cột văn bản).

Trang web mang lại văn bạn dạng căn trái vừa phải 11,7 px (tính từ khoanh vùng biên trái của nội dung).

Kết luận

Nghiên cứu vớt này cho biết những hình dáng sử dụng phổ cập và trả lời để Setting trong xây đắp Web. Lưu ý rằng đông đảo phát hiện nay này chưa hẳn là kỹ thuật và thực hiện như là hướng dẫn sơ bộ:

serif hay sans-serif phông chữ giỏi cho tiêu đề và nội dung, nhưng lại phông chữ sans-serif vẫn còn thông dụng hơn cho cả hai loại.

Lựa lựa chọn chung cho các tiêu đề là Georgia, Arial cùng Helvetica.

Lựa chọn chung cho câu chữ là Georgia, Arial, Verdana và Lucida Grande.

Kích thước font phổ biến nhất mang lại tiêu đề là 1 trong phạm vi từ 18 cho 29 pixel.

Kích thước font phổ biến nhất đến nội dung là 1 phạm vi thân 12 và 14 pixel.

Kích thước phông chữ tiêu đề ÷ size phông ngôn từ = 1,96.

Line height (pixel) ÷ size chữ phần văn bản (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ý tự buổi tối ưu của mỗi loại là từ bỏ 55 và 75, nhưng từ 75 cùng 85 ký kết tự trên mỗi chiếc là thịnh hành 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 lưu lại bằng chữ đậm tuyệt màu sắc.

Tất nhiên đầy đủ "quy tắc" không phải là cầm cố định. Vắt vào đó hãy thiết lập setting cơ bạn dạng về Typo cho thi công của bạn. Mỗi website cần độc đáo, và bạn có thể muốn biến hóa lựa chọn ở từng quá trình của kiến tạo cho tương xứng với cách sắp xếp của bạn.