LNT's Blog

<div class="extract">Thậm chí, với một số Options tương đối hạn chế  trong CSS, typography cũng có thể rất khác nhau như khi sử dụng cú pháp  CSS thuần túy. Dùng kiểu chữ serif hay sans-sefif? Font chữ lớn hay nhỏ?  Chiều cao dòng, khoảng trắng, kích thước font và padding… Có rất nhiều  điều cần phải quan tâm.</div><div class="linkweb-tag"><a href="http://designs.vn/tin-tuc/Chiem-nguong-kien-truc-quang-truong-Septemberplein-18_6420.html"><br />
</a><a href="http://designs.vn/tin-tuc/30-mau-logo-phong-cach-chau-A_6451.html"></a></div><div class="noi-dung"><div style="text-align: justify;">Để  tìm thấy những mẫu thiết kế typography phổ biến trong thiết kế Web   hiện đại và giải quyết một số vấn đề phổ biến có liên quan đến   typography, chúng tôi đã tiến hành nghiên cứu trên 50 website phổ biến   mà trong đó typography được chú trọng hơn rất nhiều (hoặc ít nhất được   chú trọng hơn bình thường). Chúng tôi chọn những tờ báo, tạp chí và blog   phổ biến cũng như các trang web khác nhau có liên quan đến typography.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Chúng tôi cẩn thận phân tích typography  và style của những trang này, tìm các điểm giống và khác nhau. Chúng tôi  cũng có một bảng số liệu nghiên cứu hiển thị những giá trị khác nhau  của các trang web này (ví dụ tỷ lệ giữa chiều cao và chiều dài của  dòng).</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Cuối  cùng, chúng tôi đã xác định 13 vấn  đề chính về typography, các vấn đề  có liên quan đến thiết kế  typography và cố tìm câu trả lời thông qua  nghiên cứu của chúng tôi:</div><div style="text-align: justify;"><br />
</div><ol><li style="text-align: justify;">Kiểu chữ serif và sans-serif thường được dùng như thế nào trong phần nội dung và headline?</li>
<li style="text-align: justify;">Font chữ nào được thường xuyên sử dụng nhất?</li>
<li style="text-align: justify;">Kích thước font chữ trung bình là bao nhiêu?</li>
<li style="text-align: justify;">Tỷ lệ trung bình giữa kích thước font chữ trong phần headline và phần nội dung?</li>
<li style="text-align: justify;">Chiều cao trung bình của dòng trong phần nội dung?</li>
<li style="text-align: justify;">Tỷ lệ trung bình giữa chiều cao và kích thước font chữ trong phần nội dung?</li>
<li style="text-align: justify;">Tỷ lệ trung bình giữa chiều cao và chiều dài của dòng trong phần nội dung?</li>
<li style="text-align: justify;">Khoảng cách trung bình giữa các paragraph?</li>
<li style="text-align: justify;">Tỷ lệ trung bình của khoảng cách giữa các paragraph với chiều cao của dòng trong phần nội dung?</li>
<li style="text-align: justify;">Đặc trưng của link liên kết?</li>
<li style="text-align: justify;">Thường có bao nhiêu ký tự mỗi dòng trong phần nội dung?</li>
<li style="text-align: justify;">Link liên kết thường được gạch dưới như thế nào?</li>
<li style="text-align: justify;">Sử dụng font chữ thay thế (sIFR…) như thế nào?</li>
</ol><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Chúng  ta sẽ kết thúc bài viết bằng dữ  liệu thô mà chúng tôi đã đánh giá và  chuẩn bị cho bài viết này. Dựa  trên các số liệu thống kê, chúng tôi xác  định một số “nguyên tắc ngón  tay cái” hữu ích. Lưu ý rằng có thể cân  nhắc sử dụng các quy tắc này  nhưng không phải lúc nào cũng là cách tốt  nhất.</div><div style="text-align: justify;"><br />
</div><h2 style="text-align: justify;">1. Kiểu chữ Serif & Sans-serif</h2><br />
<div style="text-align: justify;">Các designer nên  sử dụng font chữ serif  hay sans-serif cho phần nội dung luôn là một  trong những câu hỏi đã  được đưa ra thảo luận và vẫn chưa có câu trả lời  về vấn đề thiết lập  font chữ trên web. Một số nhà thiết kế muốn dùng  font serif để phần  tiêu đề trông hấp dẫn hơn (nếu headline ngắn, dùng  trang trí cho dòng  kết thúc cuối trang). Lý do chính để lựa chọn font  chữ serif cho  headline của bạn là với kích thước lớn, font serif dễ đọc  và trông khá  đẹp. Sự tương phản giữa font serif cho headline và font  sans-serif cho  phần nội dung có thể khá thú vị.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Một số designer  thích dùng font serif  cho phần nội dung bởi họ tin rằng những dòng trang  trí cuối trang có  tác dụng hướng dẫn người đọc sang trang tiếp theo,  giúp việc scan và  đọc thoải mái hơn.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="sans headlines Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="351" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/sans-headlines.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Theo  nghiên cứu của chúng tôi, font  sans-serif dùng cho phần headline thì  phổ biến hơn font serif, dù chúng  đã ít phổ biến hơn trong những năm gần  đây.</div><div style="text-align: justify;"><br />
</div><ul><li style="text-align: justify;">60% website sử dụng typography sans-serif cho headline, chủ yếu là Arial, Verdana, Lucida Grande và Helvetica. Trong đó có: <a href="http://www.cnn.com/">CNN</a>, <a href="http://www.arstechnica.com/">ArsTechnica</a>, <a href="http://www.slate.com/">Slate</a>, <a href="http://news.bbc.co.uk/">BBC</a> và <a href="http://www.newscientist.com/">NewScientist</a>.</li>
<li style="text-align: justify;">Chỉ 34% website sử dụng typography serif cho phần văn bản. Trong đó có: <a href="http://www.nytimes.com/">New York Times</a>, <a href="http://www.typographya.org/">typographya</a>, <a href="http://www.time.com/">Time</a>, <a href="http://www.aiga.org/">AIGA</a> và <a href="http://www.newsweek.com/">Newsweek</a>.</li>
<li style="text-align: justify;">Typography serif phổ biến nhất cho headline là Georgia (28%) và Baskerville (4%).</li>
<li style="text-align: justify;">Typography serif phổ biến nhất cho phần body là Georgia (32%) và Times New Roman (4%).</li>
<li style="text-align: justify;">Typography san-serif phổ biến nhất cho headline là Arial (28%), Helvetica (20%) và Verdana (8%).</li>
<li style="text-align: justify;">Typography san-serif phổ biến nhất cho phần nội dung là Arial (28%), Verdana (20%) và Lucida Grande (10%).</li>
</ul><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">2/3  trang web mà chúng tôi khảo sát đều  sử dụng font chữ sans-serif cho  phần nội dung. Lý do chính có thể là  do bất chấp sự phổ biến của kỹ thuật thay thế font chữ, như Cufón,  hầu  hết các designer đều muốn dùng font của Web, chủ yếu là: Georgia và   Times New Roman. Và bởi vì Times New Roman thường làm trang web hiện   đại trông lỗi thời, các designer thường dùng Georgia hơn. Các font chữ   Sans-serif mang lại sự lựa chọn đa dạng hơn cho Web.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="serif body copy Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="344" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/serif-body-copy.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><h2 style="text-align: justify;"> </h2><h2 style="text-align: justify;">2. Typography nào là phổ biến nhất?</h2><br />
<div style="text-align: justify;">Điều  đáng ngạc nhiên là bất chấp sự phổ  biến của kỹ thuật thay thế font và  sự gia tăng các font chữ (như các  kiểu font Windows Vista và Mac), những  thiết kế trong nghiên cứu của  chúng tôi chủ yếu đều sử dụng font chữ  web truyền thống, trừ Lucida  Grande (chỉ có trên máy Mac), Helvetica và  Baskerville.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="most popular typefaces Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="325" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/most-popular-typefaces.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Ngày  nay, các font chữ Arial, Georgie  và Verdana được sử dụng cho phần lớn  nội dung. Trong nghiên cứu của  chúng tôi, khoảng 80% trang web sử dụng  một trong 3 font chữ này. Trong  số 20% còn lại, Helvetica là font chữ  phổ biến và được nhiều designer  lựa chọn, ví dụ như Lucida Grande.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Với  các lựa chọn sẵn có như Verdana và  Arial, một designer không có lý do  rằng không xác định kiểu font chữ để  mang lại hiệu quả tốt nhất. Bạn có  thể tìm hiểu thêm về font trong CSS  ở bài viết Better CSS Font Stacks của Nathan Ford và Build Better CSS  Font Stacks của CodeStyle..</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://jontangerine.com/"><img alt="jontan Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="596" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/jontan.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Verdana  ít được sử dụng cho phần  headline. Chỉ 10 website sử dụng nó cho phần  nội dung, và chỉ 4 website  sử dụng cho phần headline. Đó là do khoảng  cách giữa các dòng trong  kiểu chữ Verdana qua lớn, điều đó sẽ gây khó  nếu đọc ở kích thước lớn.  Nếu bạn dự tính sử dụng nó cho phần headline,  bạn có thể chọn  letter-spacing trong CSS. Georgia và Arial là những font  chữ phổ biến  nhất cho heading.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Cuối cùng, tôi lưu ý rằng tất cả  những  font chữ thay thế thường được sử dụng cho phần headline hơn là  phần nội  dung. Các designer sẵn sàng thử nghiệm với tiêu đề của họ hơn  là phần  nội dung. Nếu bạn muốn một số typography cho thiết kế tiếp theo  của  bạn, sẽ dễ dàng hơn khi bạn bắt đầu từ phần headline.</div><div style="text-align: justify;">  </div><h2 style="text-align: justify;">3. Background sáng hay tối?</h2><br />
<div style="text-align: justify;">Chúng  tôi tò mò tìm hiểu tại sao các  designer muốn sử dụng background màu sắc  tổi. Chúng tôi tìm kiếm các  website có background tối và thật ngạc  nhiên khi chúng tôi đã tìm thấy  rất nhiều trang tương tự.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://www.newyorker.com/arts/critics/musical/2009/08/24/090824crmu_music_frerejones"><img alt="ny Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="522" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/ny.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Background  trắng khá đẹp. Tuy nhiên,  rất nhiều designer tránh sự tương phản rõ  ràng của màu trắng và đen vì  thế màu sắc văn bản thường ít đen hơn. Các  designer tập trung vào mức  độ dễ đọc và tránh việc thử nghiệm với  background đầy màu sắc. Tương  phản của chữ màu đen trên nền trắng giúp  dễ đọc, ít nhất là những trang  web này đã làm được.</div><div style="text-align: justify;"><br />
</div><h2 style="text-align: justify;">4. Kích thước font chữ trung bình cho headline</h2><br />
<div style="text-align: justify;">Tất  nhiên, sự lựa chọn kích thước font  chữ phụ thuộc vào font chữ mà bạn sử  dụng trong thiết kế. Trong mọi  trường hợp, nghiên cứu của chúng tôi về  kích thước font chữ phổ biến  nhất dao động từ 18 đến 29 pixel, từ 18 đến  20 pixel và 24 đến 26 pixel  là chọn lựa phổ biến nhất.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="font size headlines Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="391" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/font-size-headlines.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Nghiên  cứu của chúng tôi không xác định  con số cụ thể rõ ràng. Kích thước font  trung bình cho tiêu đề là 25,6  pixel. Nhưng lưu ý rằng bất kỳ kích  thước từ 18 đến 29 pixel đều mang  lại hiệu quả, phụ thuộc vào phần  heading như thế nào so với thiết kế  tổng thể của trang. Tuy nhiên, bạn  có thể thử các kích thước lớn hơn,  bởi tất cả đều có tiêu đề rất ngắn,  chỉ một vài từ.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://www.wilsonminer.com/"><img alt="miner Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="543" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/miner.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></a></div><h2 style="text-align: justify;"> </h2><h2 style="text-align: justify;">5. Kích thước font trung bình cho phần nội dung</h2><br />
<div style="text-align: justify;">Bạn  có nhớ khoảng 7 năm trước đây, khi  các thiết kế Web còn chưa phát  triển, các yếu tố giúp dễ đọc và nội  dung chỉ 8 pixel với font Tahoma  không? Kích thước nhỏ đã lỗi thời, các  designer hiện đại đều chuyển sang  dùng kích thước font lớn. Ví dụ,  chúng ta thấy xu hướng dùng kích thước  12 và 14 pixel. Kích thước font  phổ biến nhất là 13 pixel (38%) và 14  pixel thì ít phổ biến hơn. Nhìn  chung, kích thước trung bình cho nội  dung là 13 pixel.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="body copy font size Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="404" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/body-copy-font-size.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Các  chi tiết typography nhỏ nhất cũng  cần được lưu ý. Cần lưu ý đến dấu  gạch ngang, dấu ngoặc kép, chú thích,  tên tác giả, phần giới thiệu văn  bản và các paragraph. Thiết lập nhất  quán với khoảng trắng, leading và  padding.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="turning Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="393" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/turning.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><h3 style="text-align: justify;"> </h3><h3 style="text-align: justify;">Tỷ lệ kích thước font của heading và nội dung</h3><br />
<div style="text-align: justify;">Để  dễ dàng hiểu mối quan hệ giữa tiêu  đề và nội dung, chúng tôi chia tiêu  đề mỗi trang web bằng kích thước  nội dung của nó. Chúng tôi lấy số trung  bình giữa các tỷ lệ này và “quy  tắc ngón tay cái” cho bạn:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Kích thước font heading ÷ Kích thước font nội dung = 1,96</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Theo  giá trị chung của các trang web là  1,96. Điều đó có nghĩa là khi bạn  lựa chọn kích thước font cho nội  dung, bạn sẽ nhân nó với 2 để có kích  thước font của phần tiêu đề. Tất  nhiên điều này cũng phụ thuộc vào phong  cách của bạn, “nguyên tắc ngón  tay cái” không phải lúc nào cũng mang  lại kích thước tối ưu cho thiết  kế cụ thể của bạn Một số lựa chọn truyền  thống (6, 7, 8, 9, 10, 11, 12,  14, 16, 18, 21, 24, 36, 48, 60, 72) hoặc  chuỗi Fibonacci (ví dụ 16 –  24 – 40 – 64 – 104) để có typography tự  nhiên nhất.</div><div style="text-align: justify;"><br />
</div><h2 style="text-align: justify;">6. Chiều cao tối ưu cho phần nội dung</h2><br />
<div style="text-align: justify;">Leading  (hay chiều cao dòng) sẽ luôn  phụ thuộc vào kích thước font chữ mà bạn  lựa chọn và measure (hoặc  chiều dài dòng). Nói chung, measure càng dài,  leading càng dài. Do đó,  trình bày một biểu đồ là lựa chọn phổ biến cho  phần leading, sử dụng  pixel ở đây không mang lại ý nghĩa gì. Thích hợp  hơn là nên dùng đơn vị  tương đối, chẳng hạn như em hoặc giá trị phần  trăm, xác định mối liên  hệ giữa leading và và giữa leading và kích thước  font.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Theo nghiên cứu của chúng tôi:</div><div style="text-align: justify;"><br />
</div><ul><li style="text-align: justify;">Chiều cao dòng (pixel) ÷ Kích thước font nội dung = 1.48<br />
Lưu ý rằng 1.5 là giá trị được khuyến cáo trong những cuốn sách   typography cổ điển, nghiên cứu của chúng tôi cũng dựa vào nguyên tắc   này. Rất ít các trang web sử dụng con số lớn hơn. Càng tiến gần đến con   số 1.48, số lượng các trang web dùng càng ít.</li>
<li style="text-align: justify;">Chiều dài dòng (pixel) ÷ Chiều cao dòng(pixel) = 27.8<br />
Chiều dài trung bình của dòng là 538.64 pixel (không bao gồm margin  và  padding) là khá lớn, lưu ý rằng rất nhiều trang web vẫn sử dụng từ  12  đến 13 pixel cho kích thước font nội dung.</li>
<li style="text-align: justify;">Khoảng cách giữa các paragraph (pixel) ÷ đường cao = 0.754<br />
Chúng tôi đã rất ngạc nhiên vì kết quả này. Kết quả cho thấy khoảng   cách giữa các paragraph (ví dụ khoảng cách giữa dòng cuối cùng của   paragraph này với dòng đầu tiên của paragraph tiếp theo). Khoảng cách   chỉ là 75% của hàng đầu tiên. Lý do có thể hàng đầu tiên thường có   khoảng cách do descender, và vì hầu hết ký tự đều không có descender, vì   vậy có thêm không gian trống dưới dòng.</li>
</ul><br />
<div style="text-align: justify;"><a href="http://aiga.org/content.cfm/when-its-cool-to-say-cool"><img alt="aiga Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="490" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/aiga.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Vì  vậy một khi bạn đã quyết định kích  thước font chữ nội dung, hãy nhân  giá trị này với 1.5, bạn sẽ có chiều  cao tối ưu. Sau đó, bạn có thể nhân  giá trị mới này với 27.8 để có  chiều dài dòng tối ưu. Lưu ý rằng khi bố  trí cũng cần lưu ý đến gutter,  margin và padding để phần nội dung trông  thoáng hơn.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="newsc Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="490" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/newsc.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><h2 style="text-align: justify;"> </h2><h2 style="text-align: justify;">7. Có bao nhiêu ký tự mỗi dòng?</h2><br />
<div style="text-align: justify;">Theo  nguyên tắc cổ điển của typography  Web, 55 đến 75 là số ký tự tối ưu  trên mỗi dòng. Đáng ngạc nhiên là  nghiên cứu của chúng tôi cho thấy hầu  hết các website có con số cao  hơn. Chúng tôi đã đếm xem có bao nhiêu ký  tự là phù hợp trên mỗi dòng  bằng cách sử dụng kích thước font chữ mặc  định của thiết kế. Kết quả là  có trung bình 88,74 ký tự trên mỗi dòng là  tối đa, một con số rất cao.  Tất nhiên đây là số ký tự tối đa khác với  số ký tự trung bình mỗi  dòng, trung bình khoảng 75 và 85 ký tự mỗi dòng.  Tuy nhiên, đây chỉ là  khoảng thông thường.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><img alt="characters per line Nghệ Thuật Sử Dụng Typography trong Thiết Kế" height="325" src="http://media.smashingmagazine.com/wp-content/uploads/images/type-survey/characters-per-line.gif" title="Nghệ Thuật Sử Dụng Typography trong Thiết Kế" width="570" /></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Từ 73 và 90 ký tự mỗi dòng là sự lựa  chọn phổ biến của các designer nhưng chúng tôi cũng phát hiện một số  ngoại lệ: Monocle (47 ký tự mỗi dòng) và Boxes và Arrows (125 ký tự mỗi  dòng). Để biết chính xác số ký tự cho mỗi website, bạn sẽ cần số ký tự  trung bình từ nhiều dòng.</div><div style="text-align: justify;"><br />
</div><h2 style="text-align: justify;">Một số phát hiện thú vị</h2><br />
<ul><li style="text-align: justify;">46% làm nổi bật link trong phần nội dung website của họ trong khi số còn lại chỉ in đậm hoặc dùng màu sắc.</li>
<li style="text-align: justify;">6% trang web sử dụng một số kiểu hình ảnh thay thế cho heading hoặc nội dung (Ví dụ như Monocle, New Yorker, Newsweek).</li>
<li style="text-align: justify;">96% website không canh lề cho văn bản.</li>
<li style="text-align: justify;">Các website có padding trái trung bình 11.7 pixels (kể từ lề trái).</li>
</ul><h2 style="text-align: justify;"> </h2><h2 style="text-align: justify;">Kết luận</h2><br />
<div style="text-align: justify;">Nghiên  cứu cho thấy một thiết lập rõ  ràng trong thực tế và hướng dẫn để có thể  cài đặt trong thiết kế Web.  Lưu ý rằng những kết quả này không có tính  khoa học, chúng chỉ là hướng  dẫn thô:</div><div style="text-align: justify;"><br />
</div><ol><li style="text-align: justify;">Dùng font chữ serif hoặc sans-serif cho nội dung và heading đều được nhưng font sans-serif vẫn phổ biến hơn.</li>
<li style="text-align: justify;">Lựa chọn phổ biến cho các heading là Georgia, Arial và Helvetica.</li>
<li style="text-align: justify;">Lựa chọn phổ biến cho nội dung là Georgia, Arial, Verdana và Lucida Grande.</li>
<li style="text-align: justify;">Kích thước font chữ phổ biến cho heading là từ 18 đến 29 pixel.</li>
<li style="text-align: justify;">Kích thước font chữ phổ biến cho nội dung là từ 12 đến 14 pixel.</li>
<li style="text-align: justify;">Kích thước font heading ÷ Kích thước font nội dung = 1,96.</li>
<li style="text-align: justify;">Chiều cao dòng (pixel) ÷ kích thước font nội dung = 1.48.</li>
<li style="text-align: justify;">Chiều dài (pixel) ÷ đường cao (pixel) = 27.8.</li>
<li style="text-align: justify;">Khoảng cách giữa các paragraph (pixel) ÷ đường cao = 0.754.</li>
<li style="text-align: justify;">Ký tự tối ưu trên mỗi dòng từ 55 đến 75 nhưng 75 đến 85 ký tự mỗi dòng thì phổ biến hơn</li>
<li style="text-align: justify;">Nội  dung thường được canh trái,  hình ảnh thay thế hiếm khi được sử dụng và  có thể làm nổi bật các đường  link bằng cách in đậm hoặc dùng màu sắc.</li>
</ol><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Tất  nhiên những nguyên tắc này rất linh  hoạt. Chúng là những hướng dẫn thô  mà bạn có thể sử dụng để thiết lập  cho typography. Mỗi trang web là duy  nhất và bạn có thể muốn thay đổi  tùy vào mỗi giai đoạn thiết kế cho phù  hợp với layout của bạn. Bạn cũng  có thể nhìn vào số liệu của nghiên cứuvà xuất để phân tích thêm.<br />
<br />
<div style="text-align: right;">Nguồn Internet | LNT </div></div></div>

Quy tắc sử dụng Typor trong Web - CẦN PHẢI ĐỌC

Thậm chí, với một số Options tương đối hạn chế trong CSS, typography cũng có thể rất khác nhau như khi sử dụng cú pháp CSS thuần túy. Dùng...

Đọc thêm »

Quy tắc sử dụng Typor trong Web - CẦN PHẢI ĐỌC

McBess