Bạn đang xem: Nghệ thuật sắp đặt chữ
Typography là gì?Theo giải pháp nhìn đơn giản nhất, đó là việc sắp để chữ cùng kiểu chữ. Nhưng không chỉ là có thế, typography đã còn rất nhiều điều cần tò mò tùy theo vụ việc mà chúng ta quan tâm.Đối cùng với tôi, typography thực hiện trong kiến tạo là cỗi nguồn của chủ thể tổng thể, nhịp điệu và thông điệp mà bạn có nhu cầu gởi. Nó kết hợp với bố cục, hệ thống lưới cùng màu sắc lựa chọn để sinh sản thành một xây đắp hoàn chỉnh.Sự chọn lựa của các bạn là loại chữ, kỹ thuật của người tiêu dùng là tạo thành sự tùy chỉnh cấu hình các ký kết tự, nhịp điệu với kiểu dáng. Nó không những giúp bạn xem đọc dễ mà còn hỗ trợ họ gắn kết với chủ đề thiết kế.Một minh họa đơn giản dễ dàng về sức tác động của typography , các bạn hãy nhìn vào những đoạn chữ có cùng một nội dung, cơ mà được sử dụng các kiểu chữ không giống nhau. Bạn hãy xem typography có thể định nghĩa và chuyển đổi thông điệp đó như thế nào:
Ở cấp độ tương tác với chủ đề thiết kế, typography là hiện tượng hữu hiệu nhất gồm trong tay nhà thiết kế.Tiếp theo họ sẽ mày mò qua một vài thuật ngữ và khái niệm cơ bản của typography.Lines – những đường gióngCó ít nhất 5 một số loại đường gióng mà các ký tự buộc phải so hàng. Đây là những đường gióng ngang (horizontal guide lines)cho những chữ in hoa (capital letters), phần đầu chữ (ascenders), chữ thường (lowercase) cùng phần đuôi chữ (descenders).
Baseline (đường cơ sở) đây là đường gióng phổ biến nhất, nó đó là đường các đại lý mà những chữ nằm ở đó.Cap height (hay cap line): Đây là con đường gióng ngang qua đỉnh các chữ in.X-height (or midline): Đây là mặt đường gióng bộc lộ chiều cao của chữ hay (ngoại trừ những ký tự có phần đầu chữ (ascenders) cùng phần đuôi chữ (descenders) như h,k,p,y ..). Nó còn theo luồng thông tin có sẵn như dường gióng ngang đỉnh và xác minh chiều cao của chữ x.Descender height (hay beardline): Là mặt đường gióng ngang phần bên dưới cuốu cùng của những chữ (như chữ p hay y)
Các thuật ngữ phổ cập của Typography:Leading – DòngLeading là 1 trong những yếu tố gồm sức ảnh hưởng mạnh mẽ. Nó quyết định kĩ năng đọc của các đoạn văn bản.Khi thông số kỹ thuật leading nhỏ, những dòng chữ đã gần lại cùng với nhau, khiến các khối văn phiên bản trông có vẻ nhỏ gọn hơn. Nếu sử dụng leading quá nhỏ, bạn sẽ làm những dòng chữ đụng nhau tại phần trên (đầu chữ) cùng phần bên dưới của chữ (râu chữ) , vấn đề đó gây tác động xấu đến kỹ năng đọc. Mặc dù nhiên, ở góc độ trực quan, áp dụng leadingnhỏ để giúp tăng tốc độ đọc ở fan xem, mặc dù tạo cảm xúc chật chội với chứng khó chịu không gian chật hẹp, dẫu vậy đó cũng rất có thể là giải pháp mà bạn có nhu cầu diễn đạt.Tăng thông số kỹ thuật leading, đã làm sút nhịp điệu chữ, bạn có thể thực hiện điều này băng giải pháp tăng những khoảng trắng. Nó sẽ giúp trình bày những đoạn văn phiên bản trông nháng hơn. Mà lại nếu tăng số leading vượt lớn, nó đang gây xấu đi đến tính liên tục, chính vì mắt luôn luôn phải dõi theo những dòng chữ vượt xa nhau.Hãy quan sát các ví dụ mặt dưới. Toàn bộ đều áp dụng cùng một kiểu dáng chữ. Mặc dù chúng thực hiện các thông số kỹ thuật leading khác nhau.
Ví dụ 1: thông số kỹ thuật leading dược thiết lập cấu hình ớ cực hiếm âm (nhỏ hơn size chữ), bạn cũng thấy các chữ chạm nhau ở chỗ đầu chữ (ascenders) và phần dưới đuôi chữ (descenders), điều này ảnh hưởng đến kĩ năng đọc cùng tính thẩm mỹ.Ví dụ 2: Đây là thông số chuẩn, thường được đề xuất sử dụng: 120% so với kích thước chữ. Điều này có nghĩa là nếu bạn sử dụng kích thước chữ là 10pt, thì leading sẽ là 12pt
Ví dụ 3: thông số kỹ thuật là 200% so với size chữ. Như chúng ta cũng thấy, nó phá nhịp điệu cái chữ cùng và tài năng đọc chữ lưu loát.Tracking – khoảng cách chữTracking (hay nói một cách khác là letter-spacing) là khoảng cách của những nhóm chữ (Trong CSS đó là thuộc tính letter-spacing)
Tracking gồm hai tinh thần để miêu tả là thoáng (loose) xuất xắc chặt (tight). Loose tracking là tâm lý khi các nhóm chữ giải pháp nhau với khoảng cách lớn. Tight tracking là khi những nhóm chữ có khoảng cách gần nhau.Quy tắc của tracking giống như như leading, tất cả những biểu lộ thực tiễn rất tốt đó vẫn là kỹ năng đọc.Một câu càng lâu năm thì khoảng cách chữ cần được thoáng. Quy luật này sẽ không cứng ngắc. Nó còn tùy trực thuộc vào hình dạng chữ, color nền, số cột chữ và các yếu tố bao quanh trong thiết kế, cũng ảnh hưởng đến khả năng đọc của đoạn văn bản. Trước khi cấu hình thiết lập các thông số cho một doạn văn bản, bạn phải có cái nhìn tổng thể.Kerning – khoảng cách giữa những chữKerning là thông số khoảng cách giữa nhị chữ.
Chắc hẳn các bạn sẽ bối rối khi tách biệt giữa tracking cùng kerning. Tracking là thiết lập toàn cục ảnh hưởng đến khoảng cách tất cả những chữ, trong khi đó kerning chỉ tác động cục bộ, đó là khoảng cách giữa nhì chữ. Một số phối hợp hai chữ cùng với nhau phải một thông số kerning to hơn các loại khác để tránh đụng vào nhau. (thí dụ như cặp chữ KX đối với ll).Một điều chắc chắn là rằng, nếu cùng một chữ được đặt cạnh nhau, chúng sẽ khởi tạo ra một khoảng không gian buổi tối thiểu. Lấy ví dụ chữ l của loại chữ Helvetica là hình chữ nhật, nếu để cạnh nhau như lllll thì khoảng cách giữa các chữ đều bởi nhau.Bây giờ bọn họ hãy chu đáo chữ in W, không gian nó thu được định nghĩa là khoảng cách dưới chân chữ, vị trí đường chéo cánh cuối cùng kết thúc. Nếu khách hàng đã gọi điều này, khi xếp chữ cạnh nó, bạn cần phải lưu ý sự khác hoàn toàn này với những chữ còn lại.
Ví dụ 1: 5 chữ l để cạnh nhau có khoảng cách giữa chúng bằng nhau, khác với khoảng cách chữ “W” khi đặt cạnh chữ “e”Kerning là thẩm mỹ và nghệ thuật điều chỉnh khoảng cách giữa các chữ làm vậy nào để mắt hoàn toàn có thể lướt đọc thuận tiện các đoạn văn bạn dạng mà không xẩy ra phân tâm vì chưng sự không tuyệt nhất quán. Bạn nên nhớ rằng: lúc typography được thiết lập tốt thì không khi nào gây ra sự phân trọng tâm khi đọc.Alignment – so các hàng chữTùy theo phong cách bạn so những hàng chữ thế nào thì chúng hoàn toàn có thể tác hễ đến fan đọc và cảm thấy của họ như vậy đó. Ra quyết định so những hàng chữ nên kết nối với công ty đề thiết kế mà nhiều người đang lên ý tưởng, và tất nhiên chúng phải thỏa mãn nhu cầu các yếu hèn tố dễ dàng đọc với rõ ràng.So mặt hàng trái (Flush Left, Ragged Right giỏi Left Aligment)So hàng bên trái những đoạn văn bản là một bổ thể trong bí quyết đọc tự nhiên của văn hóa truyền thống phương Tây. Nếu tiến hành đúng cách, nó là giữa những yếu tố giúp tăng năng lực đọc của đoạn văn bản.Bạn phải để ý phần bên bắt buộc của đoạn văn bản, Điều đặc biệt quan trọng là phải đảm bảo an toàn tốt sự cân bằng của mẫu chữ, phải có lẽ chúng không quá đều nhau, nhưng cũng không quá bóc biệt
So hàng bắt buộc (Flush Right, Ragged Left tuyệt Right Aligment)Nếu đọc chữ từ bỏ trái lịch sự phải, việc so hàng mặt phải sẽ gây nên trở ngại mẫu đọc tự nhiên. Sử dụng nó vào trường hợp bạn có nhu cầu đoạn văn phiên bản này khác hoàn toàn với tất cả phần văn bạn dạng còn lại để triển khai nổi bật chúng.Chú ý các dấu chấm câu bên phải rất có thể phá vỡ hình dáng so mặt hàng này
So mặt hàng đều phía 2 bên – JustifiedSo hàng hầu hết cả phía 2 bên trái và phải một đoạn văn bản, sẽ tạo cho khối chữ trông gọn gàng gàng cũng chính vì nó được gói vào một khối hộp. So hàng giao diện này có thể gây khó khăn đọc ở khía cạnh trực quan, chính vì cách ngắt những dòng chữ. Mặt khác, nó hoàn toàn có thể tạo ra những khoảng trắng giữa những chữ khi cố gắng cân bởi khối văn bản cả ở phía hai bên trái với phải.Cẩn thận sự lân dụng hầu như dấu gạch men nối (hyphenation) , ở một số trong những chương trình dấu gạch nối sẽ tự động hóa được đưa vào để giữ mang đến đoạn chữ được justified. Kế bên ra, một vài loại sẽ có vô số khoảng trắng, bạn cũng có thể phải ngắt dòng để kiểm soát và điều chỉnh nếu phải thiết.So mặt hàng trung tâm- CenteredBạn nên bình an khi thực hiện so sản phẩm trung tâm, không tồn tại gì tồi tệ hơn khi so hàng trung trọng tâm một cách đối kháng điệu. Chúng không tồn tại điểm gì để phân tách sẽ tại nơi ban đầu và xong các dòng,vì vậy rất khó khăn đọc.So sản phẩm trung trọng tâm chỉ thích hợp cho những đoạn văn phiên bản có từ nhì đến cha dòng.Nếu tiến hành đúng cách, đẳng cấp so sản phẩm trung tâm sẽ đem đến vẻ bề ngoài thanh lịch cùng sang trọng. Phải chắc chắn là rằng khoảng không gian để khối chữ phải đủ rộng để chúng ta cũng có thể ngắt dòng một cách phải chăng và tạo sự tương bội phản ngắn, dài giữa các dòng với nhau, mang đến sự mời call cho cái chữ.
Typography vào Photoshop với IllustratorCác ứng dụng đồ họa như Photoshop và Illustrator có những chứa năng cấu hình thiết lập sắp xếp chữ tuyệt vời. Phần đa khái niệm chúng ta đã trao đổi ở trên đều phải sở hữu sẵn vào cả hai phần mềm này.Hai bảng chức năng có thể mở nghỉ ngơi menu haracter Panel (Window > Character) với Paragraph Panel (Window > Paragraph).
Một vài thủ thuật typographyChia cấp bậc tầm quan trọng của thông tinKhi chúng ta lên một phiên bản kế hoạch thiết kế, điều đặc biệt quan trọng là bạn phải xác định kết cấu và cấp bậc thông tin. Những tiêu đề, chủ đề sẽ sở hữu được tô đậm với lớn như vậy nào? các phụ đề, ngôn từ thân bài xích và chữ chú giải hình hình ảnh sẽ được định dạng ra sao?
Bạn cũng nên xem xét bài toán sử dụng các kiểu chữ khác nhau, nó hoàn toàn có thể sẽ giúp bạn tạo ra sự khác biệt giữa những đoạn chữ ở cấp độ khác nhau. Nhiều ấn phẩm thành công được kết hợp nhiều kiểu chữ không giống nhau để tạo ra kiểu dàn trang phong cách truyền thống và cả đương đại.Tạo ra một hệ thống phân cấp hợp lý trong thiết kế sẽ giúp đỡ nó dễ dàng đọc.Chọn hình dạng chữ gắn kết với nhà đềHãy lưu ý đến về những chủ đề thiết kế của người tiêu dùng trong khi lựa chọn kiểu chữ, nó sẽ giúp đỡ bạn chỉ dẫn quyết định. Đây là quá trình có thể mất thời hạn nhưng thú vị. Sau khoản thời gian lên danh sách các kiểu chữ say mê hợp, chúng ta hãy đánh giá những hình dáng nào không phù hợp với chủ đề của bạn.Làm quen với các bước sắp xếp chữKhi có tác dụng một công việc nào kia càng thường xuyên xuyên, bạn chắc hẳn rằng sẽ ngày dần đạt tác dụng tốt hơn. Điều này cũng đúng vào trường phù hợp này, bạn nên thực hành nhiều cùng với typography không còn mức nếu có điều kiện. Hãy tạo ra niềm mê man trong quá trình này.Hãy xem thêm các thành phầm của các nhà xây cất danh tiếng, học hỏi cách họ áp dụng typography trong các bước tuyệt vời của họ. Ghi chép tên các kiểu chữ mà chúng ta cảm thấy bị hấp dẫn và làm nỗ lực nào để lấy nó vào chính công việc của bạn
Làm quen với nghệ thuật và kỹ thuật của công việc sắp xếp chữ, không tồn tại gì mang về sự sáng sủa trong quyết dịnh của bạn hơn loài kiến thức. Việc thông qua quyết định của chính bản thân mình một cách tự tin và ví dụ cùng với loài kiến thức vừa đủ về công việc và nghề nghiệp là khôn xiết quan trọng.Sử dụng cách tự tấn công giáKhi bàn bạc với tôi các quy tắc trên có phần cứng ngắc, sau khoản thời gian đọc chúng ta cũng có thể sử dụng giải pháp tự mình reviews tốt hơn. Thiết lập chữ là một hình thức nghệ thuật cũng tương tự khoa học.Khi nói đến các phép tắc của typography, diều quan trọng là chúng ta phải phân biệt sự khác hoàn toàn của công việc. Một trang đôi, một trang web, một danh thiếp, một tiêu dề thư đều có mục tiêu và sự suy nghĩ riêng của thiết yếu nó.Tất cả gần như điều trên, cũng thật sự là những vụ việc của các bước thiết kế.Typography sinh hoạt khắp mọi nơiChữ là một phần tử của ngành thiết kế, nó lộ diện khắp nơi xung quanh chúng ta. Bạn dạng chỉ đường, bìa tạp chí, poster, quảng cáo của TV, đoạn giới thiệu phim … bạn chẳng nên nhìn đâu xa khi mong biết typography.Khi các bạn quan cạnh bên chữ, hãy suy nghĩ xem các bạn dang nhìn phần nhiều gì và nguyên nhân họ lại chọn cách đó. Chẳng bao lâu, bạn sẽ nhận ra phần đa hình thái tùy chỉnh thiết lập chữ dù nhỏ dại cũng thường sẽ tạo nên sự biệt lập lớn giữa những việc sắp xếp chữ đẹp cùng xấu.
Mở đầu:
Thiết kế website đã biến đổi rất nhiều trong những năm qua. Từ bỏ những tiêu giảm về mặt đường truyền, phông chữ, shop v.v. đến đến hiện giờ chúng ta đang thấy một kỷ nguyên của thiết kế web.
Nhờ đầy đủ 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 các nhà phân phát triển, lập trình liên tiếp nghiên cứu các kỹ thuật new thì những nhà thi công có xu thế áp dụng phần đông kỹ thuật thiết kế đồ họa in ấn và dán vào trong xây dựng web.
Trong khi đầy đủ quy cầu cho xây dựng in ấn đã có từ vô cùng lâu, và số đông đã thành chuẩn mực, thì những nhà kiến thiết web hầu hết vẫn chưa thể thống độc nhất vô nhị được một quy chuẩn chỉnh nhất định – điều đó chủ yếu ớt vì tại sao khách quan tới từ sự tương tác của người dùng tới xây dựng web.
Từ hầu hết nghiên cứu shop chúng tôi xác định ra 13 thắc mắc chung về typographic:
Làm cụ nào để phối hợp Serif với Sans-serif vào tiêu đề và nội dung.
Phông chữ làm sao được sử dụng liên tục nhất.
Cỡ chữ trung bình là bao nhiêu?
Tỉ lệ vừa phải giữa form size font tiêu hầu như và font văn bản 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 giữa Line height và form size font ở đoạn nội dung là bao nhiêu?
Tỉ lệ trung bình giữa chiều cao của mỗi dòng với độ dài trong dòng?
Tỉ lệ vừa đủ của khoảng cách giữa các đoạn văn bản.
Tỉ lệ trung bình 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 hình dạng nào nhằm báo biết có links liên kết?
Ở phần nội dung, từng nào kỹ tự trên mỗi loại thì phổ cập nhất?
Các link có gạch chân tất cả sử dụng liên tiếp không?
Các font sửa chữa thay thế (s
IFR, v.v. ) có liên tiếp được sử dụng?
Chúng tôi đã đúc rút được một số trong những liệu thống kê để tham khảo. để ý rằng những quy tắc này có thể phổ biến, dẫu vậy không phải luôn được xem là tốt nhất.
1. Serif so với Sans-serif
Thường thì nhà thi công thích sử dụng serif (có chân ) đến tiêu đề, vì sao chúng chú ý dễ đọc với đẹp lúc ở form size lớn. Những tương phản giữ lại serif đế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 vày họ nhận định rằng những nét gạch men ở chân của nó giúp fan đọc tất cả sự link giữa những ký từ bỏ với nhau, khiến họ đọc "nhanh" thuận tiện hơn.
Theo 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 sút những năm sát đây.
60% những trang web thực hiện font sans-serif đến tiêu đề, chủ yếu là Arial, Verdana, Lucida Grande với Helvetica. Ví dụ như: CNN , Ars
Technica , Slate , bbc và New
Scientist .
Chỉ bao gồm 34% các trang web áp dụng một phương diện chữ ko chân (sans-serif) đến nội dung. Như: new york Times, Typographica, Time, AIGA và Newsweek.
Các đẳng cấp chữ serif thông dụng nhất cho tiêu đề là Georgia (28%) với Baskerville (4%).
Các loại chữ serif thông dụng nhất cho văn bản là Georgia (32%) và Times New Roman (4%).
Sans-serif font thịnh hành nhất đến tiêu đề là Arial (28%), Helvetica (20%) cùng Verdana (8%).
Sans-serif font thịnh hành nhất cho câu chữ là Arial (28%), Verdana (20%) cùng Lucida Grande (10%).
Hai phần ba của các trang web chúng tôi điều tra áp dụng font sans-serif đến nội dung. Nguyên nhân chính có lẽ rằng là vị vì, tuy nhiên sự thông dụng của kỹ thuật font cao cấp, ví dụ như Cufón, phần nhiều các nhà xây dựng thích những font website cơ bản, trong những số đó chủ yếu cung ứng cho bọn họ chỉ có hai tuyển lựa khả thi: Georgia và Times New Roman.
Và chính vì sự kỳ thị 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ỉ còn lại Georgia.
Các fonts Sans-serif cung cấp đa dạng những lựa chọn mang đến Web.
2. Phần nhiều kiểu chữ thịnh hành nhất?
Đáng ngạc nhiên, mặc kệ sự phổ biến 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 dựng trong nghiên cứu 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ỉ gồm trường hợp ngoại lệ là Lucida Grande (mà đi kèm setup chỉ trên máy tính Mac ), Helvetica cùng Baskerville.
Là giữa những mong đợi, Arial, Georgia cùng Verdana được thực hiện cho ngày lúc này phần lớn ở nội dung. Trong phân tích của bọn chúng tôi, khoảng 80% những trang web được sử dụng một trong các ba font trên.
Đối cùng với 20% còn lại, "tình yêu thương với Helvetica" là 1 trong những lựa chọn phổ biến, như thể Lucida Grande .
Với tùy lựa chọn như Verdana với Arial bao gồm sẵn nhiều như lá thu rơi, đơn vị thiết kế không tồn tại lý vày để không chỉ có định chuẩn chỉnh phông chữ để đạt được kết quả tốt nhất.
Verdana được sử dụng tối thiểu cho các tiêu đề. Chỉ có 10 trang web sử dụng nó cho nội dung, cùng chỉ bao gồm bốn thực hiện nó cho các tiêu đề.
Lý do đó là Verdana đặt 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 để phát âm tại một form size lớn. Nếu như khách hàng đang thực hiện nó cho những tiêu đề, bạn cũng có thể muốn tận dụng ưu thế của CSS nhằm chỉnh khoảng cách.
Georgia với Arial đa số là những phông chữ thịnh hành cho những tiêu đề.
Cuối cùng, chúng tôi lưu ý rằng "thay nạm – alternative" fonts chữ được sử dụng nhiều hơn thế nữa cho các tiêu đề hơn mang lại nội dung.
Nhà thiết kế ngoài ra sẵn sàng thí điể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 tốt tối?
Chúng tôi đã tò mò và hiếu kỳ muốn tìm hiểu mức độ mà những nhà thiết kế đã được chuẩn bị sẵn sàng để thể nghiệm với màu sắc nền tối. Công ty chúng tôi tìm kiếm bất cứ trang nào theo định hướng đó – bao gồm một bảng màu tối và rất kinh ngạc khi tác dụng tìm thấy không phải là duy nhất.
Nền white color tinh khiết cho văn bản giành thắng lợi vang dội. Mặc dù nhiên, không ít các mẫu xây cất tránh sự tương làm phản cao với màu trắng trên màu đen 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 color đen.
Thiết kế rõ ràng tập trung vào thời gian độ dễ đọc và nên tránh 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 đơn giản đọc.
4. Form size trung bình của Font mang lại tiêu đề
Tất nhiên, việc lựa chọn kích thước font tiêu đề nhờ vào vào những font áp dụng trong thiết kế. Trong rất nhiều 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 phổ cập trong khoảng chừng 18-29 pixel, thì với 18-20 px và 24-26 px là gần như sự lựa chọn phổ biến nhất.
Nghiên cứu giúp của chúng tôi đã không mang lại bất kỳ người thắng lợi rõ ràng. Form size font trung bình mang đến tiêu đề là 25,6 pixel. Nhưng lưu ý rằng bất kỳ kích thước tự 18 mang đến 29 pixel, tác dụng của nó nhờ vào vào xây cất tổng thể, về phương thức phù hợp với các tiêu đề trên trang web.
Tuy nhiên, bạn có thể thử nghiệm cùng với các form size lớn hơn, chính vì màn hình luôn 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 cụ thể là Wilson Miner (ảnh chụp màn hình tiếp sau đây ), người tiêu dùng một kích cỡ font phệ 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 đề vô cùng ngắn, chỉ bao gồm một vài ba từ.
5. Kích thước trung bình font tại đoạn nội dung.
Bạn gồm nhớ khoảng chừng bảy năm trước, các kiến tạo web siêu nhỏ, khó khăn đọc, và ngôn từ thường là Tahoma 8px? cỡ chữ nhỏ đã thành thừa khứ, những và nhiều hơn nữa nữa những nhà thiết kế tân tiến đang đưa 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 với các kích thước từ 12 và 14 px. Kích thước font phổ biến nhất (38%) là 13 px, với 14 px hơi phổ cập hơn 12 px. Chú ý chung, kích cỡ chữ trung bình cho nội dung là 13 px.
Dấu gạch ốp ngang, dấu 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 bản được để cẩn thận, với tầm độ dễ dàng đọc buổi tối ưu trong tâm địa trí. Các thiết lập cần tốt nhất quán, với khôn cùng nhiều không khí thoáng hơn.
Tỉ lệ size của tiêu đề và nội dung
Để hiểu rõ hơn mối quan hệ giữa form size font tiêu đề với nội dung, chúng tôi chia kích thước font chữ title của mỗi website cho size font nội dung nó sử dụng. Chúng tôi đã đem trung bình của những chỉ số này và thu được một luật lệ chung:
font title ÷ font nội dung = 1,96
Giá trị sau cuối sau đó là 1,96. Điều này 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 form size font tiêu đề.
Điều này, tất nhiên, nhờ vào vào phong thái của bạn, đều nguyên tắc sẽ không nhất thiết cung cấp cho mình kích thước buổi tối ưu cho xây đắp của bạn.
Một chắt lọc 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 từ nhiên.
6. độ cao (line height ) buổi tối ưu giữa những dòng ở vị trí nội dung.
Chiều cao Line height đang luôn nhờ vào vào form size font chúng ta lựa chọn. Vị đó trình bày bằng biểu đồ lựa chọn thông dụng sẽ không tồn tại ý nghĩa. Phù hợp hơn cho bạn khi áp dụng một đương vị tương đối, chẳn hạn như "em" tuyệt "%" để xác minh khoảng bí quyết line height.
"em" là một trong những đơn vị thống kê giám sát trong nghành typography. Đơn vị này xác minh tỷ lệ chiều rộng và độ cao xung 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) ÷ độ lớn chữ phần nội dung(pixel) = 1,48
Lưu ý rằng 1,5 là 1 trong giá trị thường xuyên được đề nghị trong những cuốn sách kinh điển 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. Siêu ít các trang web áp dụng tỉ lệ thấp hơn thế. Số lượng các trang web mà bên 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 gồm margins cùng paddings ) là tương đối lớn, lưu ý rằng những 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 những đoạn văn (pixel) ÷ Line height (pixel) = 0,754
Chúng tôi sẽ rất quá bất ngờ bởi kết quả này. Nó đã cho thấy rằng khoảng cách giữa những đoạn (tức là khoảng tầm trống trong số những dòng cuối cùng của một đoạn văn với 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 chiếc – the Leading (đó là đặc điểm chính của tiết điệu thẳng đứng tuyệt vời và hoàn hảo 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 rất có thể là chữ đầu chiếc thường bao gồm các không khí đưa lên vị descenders (ngược cùng 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 ốp 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 có descenders, thêm khoảng tầm trắng được tạo thành theo dòng.
Vì vậy, một khi chúng ta đã quyết định kích cỡ font nội dung, nhân cực hiếm này lên 1.5 đang cung cấp cho chính 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ởi 27,8 để sở hữu được chiều nhiều năm dòng tối ưu. Chú ý rằng cách sắp xếp cũng cần có gutters, margins và padding.
7. Từng nào chữ trong một dòng?
Theo một quy luật cổ xưa của web typography, 55-75 là một vài lượng tối ưu của những ký từ trên từng dòng. Đáng ngạc nhiên, phân tích của chúng tôi cho biết hầu hết những trang website có số lượng cao hơn.
Chúng tôi đếm tất cả bao nhiêu chữ tất cả thể tương xứng trên một dòng bằng cách sử dụng form size font khoác định. Hiệu quả là vừa phải 88,74 ký tự trên mỗi cái (tối nhiều ) là siêu cao.
Giữa 73 với 90 cam kết tự trên từng dòng là 1 trong lựa chọn thông dụng trong thiết kế, nhưng chúng tôi cũng kiếm tìm thấy ngoại lệ: Monocle (47 ký tự/ dòng) với Boxes và Arrows (125 ký kết tự/ dòng).
Những phát hiện khác
46% những trang web áp dụng underline tại mỗi link, trong khi những người khác chỉ đánh dấu với màu sắc hay fonts đậm.
6% của các trang website được sử dụng một số hình hình ảnh thay rứa cho title hoặc câu chữ (ví dụ như Monocle, New Yorker, Newsweek).
96% website không sử dụng justify text. (dàn hầu như trong một cột văn bản).
Trang web mang đến văn phiên bản căn trái vừa phải 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 vớt này cho biết thêm những hình dáng sử dụng thông dụng và trả lời để Setting trong xây đắp Web. Xem xét rằng đều phát hiện nay này chưa phải là khoa học và thực hiện như là phía dẫn sơ bộ:
serif tuyệt sans-serif phông chữ xuất sắc cho tiêu đề cùng 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 chọn chung cho các tiêu đề là Georgia, Arial và Helvetica.
Lựa chọn bình thường cho văn bản là Georgia, Arial, Verdana cùng Lucida Grande.
Kích thước font phổ biến nhất mang đến tiêu đề là 1 trong những phạm vi tự 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ới 14 pixel.
Kích thước fonts chữ tiêu đề ÷ form size phông nội dung = 1,96.
Line height (pixel) ÷ kích cỡ chữ phần câu chữ (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ố ký kết tự buổi tối ưu của mỗi cái là từ bỏ 55 và 75, tuy nhiên, từ 75 với 85 ký tự trên mỗi loại là thông dụng hơn,
Văn bản nội dung là canh trái, thay thế sửa chữa bằng hình ảnh hiếm khi được sử dụng. Liên kết được gạch men chân hay khắc ghi bằng chữ đậm tuyệt màu sắc.
Tất nhiên đều "quy tắc" không phải là rứa định. Cố kỉnh vào kia hãy thiết lập cấu hình setting cơ bản về Typo cho thiết kế của bạn. Mỗi website cần độc đáo, và bạn có thể muốn biến đổi lựa lựa chọn ở từng quy trình tiến độ của kiến tạo cho phù hợp với cách bố trí của bạn.
Bạn cũng có thểThích
