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