Tất cả về phông chữ web. Dòng này quá dài. Các tập tin phông chữ nên ở định dạng nào?

Có hàng triệu điều cần suy nghĩ khi tạo ra một thiết kế web hoàn hảo: tạo đồ họa, chọn màu sắc, chọn hình ảnh phù hợp... Nhưng có một điều mà mọi người thường đánh giá thấp khi tạo trang web và chọn phông chữ. Đừng phạm sai lầm tương tự. Sự lựa chọn phông chữ đúng có thể có tác động rất lớn đến giao diện cuối cùng của thiết kế web của bạn. Điều này có vẻ như là một việc nhỏ nhưng nó có thể đưa thiết kế web của bạn lên một tầm cao mới. Hãy để tôi chỉ cho bạn cách làm. Trong bài viết này, tôi sẽ cho bạn biết mọi thứ bạn cần biết khi chọn phông chữ cho thiết kế web của mình.

của Deni K cho Civil Pour

Hướng dẫn thương hiệu xác định cách sử dụng các yếu tố tạo nên thương hiệu của bạn. Nguyên tắc thương hiệu của bạn là một công cụ quan trọng để truyền đạt chiến lược xây dựng thương hiệu nhất quán. Đây là một bộ quy tắc sẽ giúp bạn và nhà thiết kế của bạn tạo ra nhận dạng duy nhấtđồng thời kết nối nhiều yếu tố của thương hiệu bằng cách xác định màu sắc, logo và tất nhiên cả kiểu chữ của bạn.

Vì vậy, nếu bạn đã có sẵn bộ hướng dẫn thương hiệu để làm việc, hãy đảm bảo bạn bám sát nó khi tạo thiết kế web của mình. Nếu bạn chưa có, đây là cách tạo hướng dẫn thương hiệu.

Tầm quan trọng của tính nhất quán

Bạn có thể muốn thử nghiệm các phông chữ mới khi tạo thiết kế web của mình, nhưng đừng làm vậy! Mỗi khi ai đó nhận được danh thiếp hoặc truy cập trang web của bạn, họ sẽ có được cái nhìn thoáng qua về DNA thương hiệu và thiết kế tổng thể của công ty bạn. Cùng với nhau, những góc nhìn này về thương hiệu của bạn phải tạo ra một bức tranh hoàn chỉnh và mạch lạc, nếu không thương hiệu của bạn có thể trông giống như một mớ hỗn độn không có giá trị nhận biết. Đó là lý do tại sao điều quan trọng là phải nhất quán trên tất cả các nền tảng kỹ thuật số và tài liệu in của bạn khi nói đến màu sắc, kiểu dáng và—bạn đoán đấy—phông chữ.

Phù hợp với phông chữ thương hiệu hiện có của bạn

bởi FuturisticBug cho Nordkern

Thương hiệu sẽ bao gồm các phông chữ và họ phông chữ, kích thước phông chữ và phân cấp phông chữ mà thương hiệu của bạn sử dụng, vì vậy bạn có thể tích hợp chúng ngay vào thiết kế web của mình. Nhưng nếu thương hiệu của bạn sử dụng phông chữ không xác định, các công cụ như tính năng "WhatTheFont" trên Myfonts.com có ​​thể giúp bạn xác định tên phông chữ bạn đang xử lý.

Tuy nhiên, nếu thương hiệu của bạn sử dụng kiểu chữ riêng, nhà thiết kế của bạn sẽ cố gắng tìm một phông chữ web tương tự để sử dụng trong thiết kế web của bạn. Bởi vì các trình duyệt web khác nhau Kiểu chữ thông thường của bạn có thể kém sắc nét và gọn gàng hơn bạn mong muốn, vì vậy nhiều nhà thiết kế web sẽ sử dụng Google Fonts để phù hợp chặt chẽ với kiểu chữ của thương hiệu bạn.

Chưa có phông chữ hoặc hướng dẫn nào
—

Bạn vẫn chưa chọn được phông chữ cho chữ ký của mình? Dưới đây là một số điều quan trọng cần cân nhắc khi chọn phông chữ cho thiết kế web của bạn:

Tìm hiểu tính cách thương hiệu của bạn

Lựa chọn phông chữ của bạn phải thể hiện cá tính thương hiệu của bạn để thiết kế của bạn có vẻ chính xác. Bạn là một doanh nghiệp truyền thống, hay bạn là người tối giản và hiện đại, hay vui vẻ và kỳ quặc? Bạn có thể mô tả công ty của mình là cổ điển, sắc sảo, sôi nổi không? Hãy xem bài viết này để biết thêm câu hỏi về tính cách thương hiệu độc đáo của bạn.

Khi bạn trả lời những câu hỏi cơ bản này, bạn sẽ hiểu được đặc điểm thương hiệu của mình và diện mạo mà bạn nên hướng tới trong thiết kế web của mình. Dựa trên nhận dạng này, giờ đây bạn có thể chọn phông chữ phù hợp cho thương hiệu của mình.

Chọn phông chữ phù hợp với thương hiệu của bạn

Giả sử bạn có một cửa hàng quần áo cổ điển mang phong cách hiện đại. Bạn có thể kết hợp phông chữ cổ điển, phông chữ tuyệt vời cho tiêu đề, với phông chữ sans-serif cổ điển cho nội dung văn bản. Ví dụ: nếu bạn đang sử dụng phông chữ cũ đẹp tương tự như Arvo cho tiêu đề thì bạn nên sử dụng phông chữ này. văn bản văn bản sans serif, chẳng hạn như Open Sans, được biết đến với tính dễ đọc. Điều này sẽ mang lại cho bạn một cái nhìn cân bằng, vượt thời gian và hiện đại, đồng thời phù hợp tuyệt vời với thương hiệu cổ điển thú vị của bạn.

Hoặc giả sử bạn là công ty luật hoặc một thương hiệu mỹ phẩm sang trọng và muốn kiểu chữ của bạn truyền tải sự tin cậy và tính chuyên nghiệp với một chút đẳng cấp. Bạn có thể sang trọng nhưng cổ điển và thanh lịch với các phông chữ serif như Frank Ruhl Libre hoặc Playfair Display để thực sự thể hiện khách hàng tiềm năng rằng bạn quan tâm đến độ tin cậy và dịch vụ hạng nhất.

bởi gotza

Cho dù cuối cùng bạn chọn phông chữ nào phù hợp với phông chữ của mình, hãy đảm bảo bạn sử dụng phông chữ an toàn trên web, dễ sử dụng và tương thích với hầu hết các trình duyệt. Bạn hỏi: “Web an toàn nghĩa là gì?” Đọc để tìm hiểu.

Phông chữ web an toàn là gì?
—

Sử dụng phông chữ an toàn trên web có nghĩa là khách truy cập của bạn không cần phải cài đặt phông chữ cụ thể trên máy tính của họ để nhìn thấy phông chữ đó một cách chính xác. Ngày xưa, cách đây 10 năm hoặc hơn, có khoảng 13 họ phông chữ và các nhà thiết kế web dự kiến ​​​​sẽ chỉ sử dụng một số phông chữ sẽ xuất hiện trên hầu hết các phông chữ đó. hệ thống máy tính. Hiện nay tiêu chuẩn vàng là Phông chữ của Google, hiển thị hoàn hảo trong mọi trình duyệt web.

Hãy nhớ rằng nhiều thương hiệu sử dụng phông chữ tùy chỉnh hoặc phông chữ không dựa trên web. Trong trường hợp này, nhà phát triển có thể sử dụng phần mềm để chuyển đổi phông chữ thành "phông chữ an toàn cho web". Nhưng đôi khi điều đó cũng không đảm bảo rằng nó sẽ trông đẹp trên màn hình, đặc biệt nếu bạn muốn kiểu chữ của mình trông cực kỳ sắc nét. Đây là lý do tại sao các nhà thiết kế thường phải đối mặt với thách thức tìm kiếm các phông chữ an toàn trên web tương tự (gần như giống hệt nhau) miễn phí và hiển thị tốt trên tất cả các trình duyệt.

Những loại phông chữ nào phù hợp cho web và tại sao nó lại quan trọng?
—

thông qua Phông chữ của Google.

Khi tìm kiếm phông chữ an toàn cho web hoàn hảo, cách tốt nhất của bạn là xem thư viện Google Phông chữ và trong hầu hết các trường hợp, bạn sẽ tìm thấy những gì bạn cần. Với hơn 800 phông chữ được cấp phép, miễn phí, đây là một trong những nơi tốt nhất để tìm phông chữ an toàn trên web. Nếu bạn đưa những phông chữ này vào ngăn xếp phông chữ của mình, hầu hết mọi người sẽ nhìn thấy trang của bạn một cách chính xác. Vì thư viện phông chữ này được xếp chồng lên nhau trong một dịch vụ web nên khách truy cập của bạn từ khắp nơi trên thế giới sẽ thấy cùng một trang có cùng một phông chữ. Ngoài ra, nó đảm bảo rằng sự hiện diện trực tuyến của bạn vẫn nhất quán trên tất cả các trình duyệt và thiết bị.

Cách kết hợp các phông chữ khác nhau trong thiết kế web
—

Khi bạn đang xây dựng một trang web, rất có thể bạn sẽ cần nhiều phông chữ. Có ba quy tắc cơ bản bạn muốn sử dụng khi kết hợp phông chữ:

Nguyên tắc cơ bản đầu tiên để kết hợp phông chữ là không bao giờ sử dụng nhiều hơn ba phông chữ trong một thiết kế. Quy tắc số hai là đảm bảo phông chữ bạn chọn bổ sung cho nhau. Và nguyên tắc thứ ba bạn muốn tuân theo là luôn luôn xác định thứ bậc trong số đó.

của MarkoSimić.

Đây là giao diện thực tế của nó: Đầu tiên, hãy xác định phông chữ chính nổi bật nhất và nên được sử dụng cho các tiêu đề. Khuyên bảo. Bạn có thể kết hợp phông chữ này với phong cách logo của bạn. Nói chung, bạn muốn phông chữ chính của mình hấp dẫn. Tôi thực sự thích những phông chữ đậm như Rubic Black hoặc phông chữ hơi tròn như Nunito cho tiêu đề, nhưng việc bạn chọn phông chữ nào hoàn toàn phụ thuộc vào hoạt động kinh doanh và thương hiệu của bạn. Tiếp theo, chọn phông chữ phụ để sử dụng cho nội dung văn bản. Phông chữ này phải dễ đọc khi được sử dụng cho các đoạn văn bản dài hơn, ngay cả trên màn hình nhỏ hơn, vì vậy chúng ta có thể chọn phông chữ như Noto Sans bên cạnh các tùy chọn phông chữ cơ bản của mình. Cuối cùng, phông chữ thứ ba của bạn phải là phông chữ có dấu. Phông chữ này có thể được sử dụng trên các nút, CTA hoặc để làm nổi bật một số phần nhất định của văn bản nhằm thu hút sự chú ý của khách truy cập. serrat sẽ hoạt động tốt với các cuộc bầu cử sơ bộ và thứ cấp của chúng tôi.

Các loại phông chữ khác nhau ảnh hưởng đến thiết kế web của bạn như thế nào
—

Như Vincent van Gogh vĩ đại đã nói, “Những điều vĩ đại không được thực hiện một cách bốc đồng mà là một loạt những điều nhỏ nhặt kết hợp với nhau”, vì vậy hãy chọn phông chữ của bạn một cách khôn ngoan. Sự kết hợp thông minh của các phông chữ có thể có tác động mạnh mẽ đến thiết kế web của bạn.

bởi LoudFrog for Coffee And Chokes BJJ

Hãy xem cách nhà thiết kế sử dụng phông chữ nét vẽ độc đáo trong ví dụ trên để làm nổi bật chủ đề võ thuật và tạo ra sự kết nối văn hóa. Phần còn lại của văn bản nội dung và lời kêu gọi hành động sử dụng phông chữ rõ ràng, dễ đọc, kết hợp các kích cỡ khác nhau, cũng như tất cả các chữ hoa đóng khung và làm nền cho phông chữ chính và làm cho nó nổi bật. Kết quả là một thiết kế cân bằng thu hút sự chú ý vào đúng chỗ.

Hãy xem hai thiết kế web trên hướng đến hai diện mạo hoàn toàn khác nhau như thế nào? Thiết kế dịch vụ tài chính của quốc gia Satoshi đạt được sự sạch sẽ và hiện đại vẻ bề ngoài với phông chữ sans serif hơi góc cạnh và thiết kế dành cho thương hiệu cà phê sang trọng Wallenford sử dụng phông chữ serif trang nhã để làm nổi bật phong cách thương hiệu cao cấp của mình. Trong cả hai trường hợp, việc lựa chọn phông chữ kết hợp hoàn hảo với phần còn lại của thiết kế và truyền tải một cách hoàn hảo những gì thương hiệu đại diện. Đây là sức mạnh của kiểu chữ.

Nói nó bằng phông chữ

—

Việc chọn phông chữ phù hợp cho trang web của bạn phụ thuộc hoàn toàn vào mục tiêu bạn muốn đạt được. Khi nghĩ về phong cách và thiết kế, bạn cần lập kế hoạch và tìm ra cách bạn muốn thể hiện với thế giới. Và phông chữ là công cụ hoàn hảo cho việc này. Bạn muốn ngầu, nghiêm túc hay truyền thống? Chọn một phông chữ serif thanh lịch. Bạn có muốn trông hiện đại và tối giản? Chọn phông chữ sans serif rõ ràng. Đi cái gì đó ở giữa? Kết hợp các phông chữ để đạt được hầu hết mọi phong cách bạn muốn. Nói một cách đơn giản, việc lựa chọn phông chữ nói lên rất nhiều điều về doanh nghiệp của bạn, vì vậy hãy lựa chọn một cách khôn ngoan.

• Dịch

Bây giờ là lúc nâng cấp thiết kế của bạn với phông chữ web

Không hề cường điệu, kiểu chữ trực tuyến hiện đang trải qua một giai đoạn thú vị trong cuộc đời của nó. Những bước nhảy vọt về công nghệ gần đây đã đưa chúng ta tiến một bước gần hơn đến cõi niết bàn typographic trên internet. Bước đi mà mọi người đã chờ đợi bấy lâu nay.

Giờ đây, bạn có thể tự do sử dụng phông chữ web ngoài danh sách an toàn trên tất cả các hệ điều hành hàng đầu bằng cách nhìn chung, nhờ ba yếu tố công nghệ chính, gần như đồng thời: hỗ trợ rộng rãi cho quy tắc @font-face trong trình duyệt; sự xuất hiện của các “kho phông chữ” như Typekit và Fontdeck; tạo định dạng phông chữ mới - tệp phông chữ WOFF được lưu trữ.

* Một số phông chữ trong số này dành cho Cyrillic, vì vậy lựa chọn này phù hợp hơn với “người đăng việc”. Hãy hy vọng rằng ít nhất một số phông chữ này và các phông chữ khác dành cho ngôn ngữ Slav bằng chữ Cyrillic. Thêm thẻ

Thiết kế web là một lĩnh vực khó gây ra nhiều tranh cãi. Một số người sẽ nói rằng để thu hút sự chú ý, trang đích của bạn chỉ cần thiết kế hiện đại, bao gồm xu hướng mới nhất. Những người khác tin rằng một trang đích hoạt động tốt, nơi khách truy cập nhận được những gì họ tìm kiếm, quan trọng hơn nhiều.

Cả hai tùy chọn đều đúng, nhưng phần lớn phụ thuộc vào lĩnh vực hoạt động của bạn và mục tiêu bạn đặt ra cho trang đích của mình. Làm thế nào để xác định lựa chọn nào phù hợp với bạn? Làm thế nào để đảm bảo rằng nhà thiết kế của bạn biết rõ công việc kinh doanh của mình và sẽ không mắc sai lầm?

Bài đăng này chứa bảy “tội lỗi chết người” trong thiết kế web mà bạn nên tránh trong quá trình thiết kế web của mình. trang đích. Hãy nghiên cứu kỹ những nguyên tắc này và sử dụng chúng để kiểm tra xem thiết kế của bạn có thực sự được tối ưu hóa để đạt được mục tiêu kinh doanh hay không.

1. Phông chữ quá nhỏ

Nhiều người mắc sai lầm đầu tiên là làm cho văn bản trên tài nguyên quá nhỏ. Trong những ngày đầu của Internet, hầu hết các trang web đều sử dụng phông chữ 12 pixel, đây là tiêu chuẩn mà hầu hết mọi người đều tuân theo. Tuy nhiên, theo thời gian, rõ ràng là chữ in nhỏ như vậy rất khó đọc. Ngoài ra, hóa ra bạn cần phải thu hút và quan tâm đến khách truy cập gần như ngay lập tức.

Theo nghiên cứu thị trường, khoảng chú ý trung bình của người dùng Internet đã giảm xuống còn 8 giây vào năm 2013, ít hơn một giây so với cá vàng. Nghiên cứu tương tự báo cáo rằng trung bình khách truy cập trang web chỉ đọc 28% số từ.

Một nghiên cứu năm 2013 cho thấy khoảng chú ý trung bình đã giảm xuống còn 8 giây, ít hơn 1 giây so với cá vàng. Có thể được không?

Để ngay lập tức thu hút sự chú ý của du khách, bạn cần:

• Tạo tiêu đề mạnh mẽ, thú vị.
• Thật thú vị khi viết đến mức bạn muốn đọc hơn 28% nội dung.
• Sử dụng phông chữ khá lớn cho tiêu đề.
• Đảm bảo rằng văn bản chính được viết bằng phông chữ dễ đọc.

Đối với tất cả các điểm trên, điều sau đây có liên quan: kích thước phông chữ đã tăng lên trong vài năm qua. Hiện tại, tiêu chuẩn tối thiểu là 14px nhưng nhiều trang web sử dụng phông chữ ít nhất là 18px, đặc biệt nếu Chúng ta đang nói về về những văn bản lớn.

Nhân tiện, từ nay bạn không cần phải mở nữa dịch vụ của Google Phông chữ để nhận phông chữ của bên thứ ba trên trang đích của bạn, vì giờ đây phông chữ được kết nối trực tiếp từ . Chúng tôi đã thêm tất cả phông chữ từ bộ sưu tập Google Fonts vào thư viện trực quan và tất cả những gì bạn cần làm là chọn phông chữ thích hợp, nhấp vào nút kết nối và sử dụng phông chữ đó cho văn bản mới hoặc hiện có trên trang đích:

Dưới đây chúng tôi cung cấp một số ví dụ xuất sắc thiết kế web với phông chữ có kích thước hoàn hảo.

Lương tâm

Tiêu đề: 50px
Phụ đề: 36 pixel
Nội dung văn bản: 21 pixel

Tiêu đề: 80px
Phụ đề: 24 pixel
Văn bản nội dung: 15px

Tiêu đề: 60px
Tiêu đề phụ: 35 px
Nội dung văn bản: 18 pixel

Đừng quên: nội dung trên trang đích được viết để đọc. Đây không phải là lý do tại sao bạn trả tiền cho dịch vụ của một người viết quảng cáo hoặc tự mình nghiền ngẫm các văn bản để khiến chúng không hiệu quả do phông chữ nhỏ. Đảm bảo bạn chọn kích thước có thể đọc được.

Cũng nên nhớ rằng các loại khác nhau phông chữ có kích thước khác nhau - Arial 16 pixel có thể nhỏ hơn phiên bản 16 pixel của phông chữ khác. Chọn kích thước và loại phông chữ phù hợp với trang web của bạn.

Phông chữ của văn bản chân trang có thể nhỏ nhưng nếu bạn muốn khách truy cập đọc được những gì được viết ở đó, hãy chọn phông chữ ít nhất là 16 pixel.

Lời khuyên từ các chuyên gia:Để chọn loại và kích thước phông chữ phù hợp, hãy tải xuống ứng dụng WhatFont. Đây là một plugin dành cho Google Chrome, xác định các tham số phông chữ bằng cách nhấp vào nó. Mở các trang web có thiết kế mà bạn thích và thu thập thông tin.

2. Thanh trượt

Thật khó hiểu tại sao nhiều trang đích vẫn sử dụng thanh trượt chuyển động. Nó hoạt động? Chuyển đổi của bạn có tăng lên không? Thông tin được truyền tải tốt hơn?

Trong hầu hết các trường hợp, câu trả lời sẽ là không.

Peep Laja, người sáng lập một trong những blog nổi tiếng nhất trên ConvertXL, trích lời các chuyên gia trong lĩnh vực tiếp thị Internet trong bài viết “Đừng sử dụng Băng chuyền hoặc Thanh trượt Hình ảnh Tự động”:

“Chúng tôi đã nhiều lần thử nghiệm các khối động và tin chắc rằng điều này phương pháp không hiệu quảđịnh vị nội dung"— Chris Howard, Giám đốc điều hành của WiderFunnel.

“Biểu ngữ động hoàn toàn có hại và cần bị loại bỏ ngay lập tức.”— Tim Ash, Giám đốc điều hành SiteTuners

Laya cũng đề cập đến hai nghiên cứu đã chứng minh tính kém hiệu quả của thanh trượt động.

Nghiên cứu đầu tiên được thực hiện bởi chuyên gia về khả năng sử dụng Jakob Nielsen. Ông đã thực hiện một cuộc khảo sát với những người truy cập trang web của Siemens về ưu đãi đặc biệt về máy giặt TRÊN trang chủ. Thông báo về giảm giá được viết bằng phông chữ 98 pixel, nhưng thật không may, khách truy cập đã không nhận thấy điều đó - ưu đãi đã bị mất trong các khối chuyển đổi của thanh trượt.

Thử nghiệm này xác nhận quan điểm của các nhà tiếp thị có uy tín rằng thanh trượt làm giảm khả năng tiếp thu của khán giả đối với ưu đãi và nội dung. Mọi người đã quen với các biểu ngữ ở thanh bên và không còn chú ý đến chúng - nguyên tắc tương tự cũng áp dụng cho các thanh trượt động.

Nghiên cứu thứ hai được thực hiện tại Đại học Notre Dame (Indiana, Mỹ). Các nhà nghiên cứu đã phát hiện ra rằng khoảng 1% khách truy cập trang web nhấp vào thanh trượt, với 84% số lần nhấp đến từ trang trình bày đầu tiên.

Tại sao đặt một thanh trượt sẽ chiếm bất động sản có giá trị trên trang chủ và chỉ nhận được CTR 1%? Tại sao lại gây khó chịu cho du khách bằng những hình ảnh nhấp nháy khó theo dõi? Có lẽ nên cung cấp cho họ một tùy chọn nếu đa số đã chọn hình ảnh đầu tiên của thanh trượt?

Vậy tại sao dù không hiệu quả nhưng thanh trượt lại được ưa chuộng đến vậy?

Rất có thể là do chúng trông tiên tiến, có công nghệ tiên tiến và không gây khó khăn gì cho các nhà phát triển. Đây là cách nó hoạt động - khách hàng nói: “Tôi muốn thứ này có tính năng cuộn hình ảnh trên trang chính. Có, một thanh trượt động,” và các nhà thiết kế web tuân theo yêu cầu này vì thanh trượt thực sự trông đẹp mắt và cực kỳ dễ thực hiện.

Nhưng chính chủ sở hữu trang đích/trang web mới phải biết liệu thanh trượt này có hiệu quả hay không và liệu nó có thực sự hiệu quả hay không. Cách tốt nhất truyền tải thông tin. Pip Laya, Chris Howard, Tim Ash và nhiều nhà tiếp thị Internet nổi tiếng khác không còn tin vào điều này nữa.

Giải pháp cho vấn đề không phải là sao chép chi tiết bố cục bạn thích, bao gồm cả thanh trượt trên trang chính, mà là cố gắng trả lời độc lập câu hỏi: “Ưu đãi của bạn nên được trình bày như thế nào?”

Một ví dụ nổi bật của cách tiếp cận này là trang web của công ty dạy kèm Genesis Tutoring - hay nói đúng hơn là quá trình phát triển của nó. Những người sáng lập công ty ban đầu quảng cáo dịch vụ này bằng cách phát tờ rơi trong các trường học, sau đó họ quyết định tạo trang web của riêng mình và tìm đến một nhà thiết kế. Họ muốn cài đặt một thanh trượt trên trang chủ với bản sao của tờ rơi quảng cáo. Nhà thiết kế đã thuyết phục được khách hàng từ bỏ thanh trượt và chỉ cài đặt một bản sao của tờ rơi trên trang chính, thêm địa chỉ liên hệ và nút CTA cho nhận xét. Đây là những gì đã xảy ra.

Một trang viết tắt với thiết kế tuyệt vời và chuyển đổi cao Tôi đã làm khá tốt mà không cần thanh trượt. Công việc tuyệt vời phải không?

Để đạt được kết quả tương tự, hãy làm theo các quy tắc sau:

• Đừng đặt thanh trượt chỉ vì những người khác cũng đang làm như vậy (ngay cả khi nhà thiết kế của bạn đề xuất nó).
• Thay vì sao chép trang của đối thủ cạnh tranh, hãy tìm phiên bản riêng trình bày thông tin phù hợp nhất cho mục đích của bạn.
• Chọn một ưu đãi hấp dẫn nhất và đặt nó phía trên đường gấp. Bạn có thể quảng bá phần còn lại bằng cách thêm nút đặc biệtở trên cùng hoặc trong các khối riêng biệt phía dưới trang - một ưu đãi sẽ thu hút sự chú ý của bạn, phần còn lại sẽ do trang đích thực hiện.
• Điểm tiếp theo này có thể được treo trong khung trên tường: Xác định mục tiêu chính trang đích. Tất cả các nút CTA phải tuân theo nguyên tắc “một trang, một mục tiêu”.

3. Phông chữ có độ tương phản thấp

Một sai lầm lớn khác là sử dụng phông chữ có độ tương phản thấp.

Độ tương phản thấp là văn bản sáng trên nền sáng hoặc văn bản tối trên nền tối. Có thể có một số sự kết hợp phù hợp với thiết kế in ấn, nhưng trên Internet thì đó luôn là một ý tưởng tồi.

Nội dung của trang đích phải dễ đọc nhất có thể. Theo nghiên cứu, theo tuổi tác, giác mạc của mắt ngày càng truyền ít ánh sáng hơn: ở tuổi 40, lượng ánh sáng đi qua nó bằng một nửa so với tuổi 20; đến tuổi 60, lượng ánh sáng đi vào mắt được giảm thêm 20%. Và bây giờ p Thêm vào đó là những người có vấn đề về thị lực nghiêm trọng hơn.

Với những con số này, bạn có thực sự muốn làm cho nội dung của mình khó tiếp thu hơn, đặc biệt là sau khi dành quá nhiều thời gian và tiền bạc để cố gắng thu hút khách truy cập?

Luôn sử dụng phông chữ tương phản: sáng trên nền tối và ngược lại. Đôi khi cần sử dụng phông chữ có màu khác ngoài đen hoặc trắng. Đôi khi các nhà thiết kế sử dụng phông chữ màu xám nhạt trên nền trắng và phông chữ màu xanh nhạt trên nền xanh đậm. Để làm gì? Có thực sự dễ dàng hơn để đọc theo cách này? Hay những tác động bên ngoài trở nên quan trọng hơn nội dung của văn bản? Sách được in bằng mực đen trên giấy trắng vì một lý do đơn giản - dễ đọc hơn. Các trang đích và trang web phải tuân theo quy tắc này.

Dưới đây là ví dụ về các trang đích có thấpđộ tương phản văn bản:

Winnie the Pooh

siêu thị hàng hóa

Đây là một ví dụ về văn bản tương phản nhưng lại nằm phía trên hình ảnh, thường gây nhiễu cho nhận thức.

Hãy nhớ rằng: tất cả các văn bản phải tương phản với nền mà chúng được đặt. Nếu văn bản có vẻ khó đọc hoặc không có đủ độ tương phản, đừng lãng phí thời gian yêu cầu nhà thiết kế của bạn sửa nó. Trang đích của bạn - không phải là một nền tảng dành cho các bài tập về màu sắc, nó là một công cụ bán hàng và chuyển đổi.

Mẹo bổ sung:Điều quan trọng không chỉ là độ tương phản của văn bản. Ngoài ra, hãy cẩn thận khi sử dụng phông chữ đảo ngược. Phông chữ đảo ngược là văn bản màu trắng trên nền đen (hoặc có màu) thay vì đen trên nền trắng.

David Ogilvy, nhà tiếp thị vĩ đại nhất của thời đại chúng ta, lập luận rằng văn bản quảng cáo Phông chữ đảo ngược không bao giờ nên được sử dụng. Colin Wheeldon, biên tập viên của tạp chí ô tô lớn nhất nước Úc, đã quyết định thử nghiệm lý thuyết này. Kết quả anh thu được thật đáng kinh ngạc:

• Chữ đen trên nền trắng: 70% tốt, 19% khá, 11% xấu
• Chữ trắng trên nền đen: 0% tốt, 12% khá, 88% xấu
• Chữ trắng trên nền tím: 2% tốt, 16% khá, 82% xấu
• Chữ trắng trên nền xanh: 0% tốt, 4% khá, 96% xấu

Điều đáng ngạc nhiên là kết quả của văn bản màu đen trên nền trắng gần như trái ngược với sự kết hợp ngược lại!

4. Chiều cao dòng sai

Chiều cao của dòng thường bị bỏ qua. Hầu hết các nhà thiết kế đều cẩn thận lựa chọn phông chữ, kích thước và đặt chiều cao dòng tùy ý.

Nhưng thông số này lại có tác động mạnh mẽ đến không ngờ tới thiết kế và nhận thức về landing page. Độ cao của dòng quá nhỏ có thể tạo ra ấn tượng về văn bản được ghép lại với nhau và làm hỏng toàn bộ thiết kế.

Tin tốt là một nhà thiết kế web có kinh nghiệm sẽ có nhiều kinh nghiệm trong quá khứ và có thể chọn chiều cao dòng phù hợp bằng mắt.

Tin xấu là một nhà thiết kế cấp trung có thể bỏ sót vấn đề và chọn sai giải pháp.

Chris Pearson, nhà thiết kế của dự án DIYThemes, đã xem xét vấn đề này một cách nghiêm túc và tạo ra một máy tính tính chiều cao của đường bằng nguyên tắc tỷ lệ vàng. Chỉ cần nhập cỡ chữ và độ rộng dòng, máy tính sẽ tính toán chiều cao lý tưởng.

Bạn có thể không nhận ra tại sao bạn lại thích một thiết kế (hoặc phông chữ) nào đó. Các nhà thiết kế tài năng tự tìm ra tỷ lệ của “tỷ lệ vàng”, máy tính của Chris Pearson sẽ giúp ích cho người khác.

5. Đường dây quá dài

Một sai lầm khác có thể xảy ra là quá chiều rộng lớn chữ.

Có độ dài dòng tối ưu?

Quá ngắn - chúng làm mỏi mắt, nhanh chóng mỏi mắt.

Sự phổ biến gần đây của thiết kế đáp ứng càng làm trầm trọng thêm vấn đề này. Nếu như chiều dài tối đa Dòng không bị giới hạn, bài đăng trên blog của bạn hoặc bất kỳ loại văn bản nào khác, tùy thuộc vào kích thước của màn hình thiết bị, có thể có những hình dạng rất lạ.

Để giải quyết vấn đề này, Viện Baymard khuyên bạn nên đặt chiều rộng văn bản tối đa là 516 pixel, sử dụng phông chữ 18 pixel, là 65 ký tự trên mỗi dòng. Những thông số văn bản thoải mái nhất để đọc trực tuyến được hiển thị trong hình bên dưới

Một lần nữa, không phải tất cả các nhà thiết kế đều chú ý đến thông số này, nhưng vì bạn đã biết rằng dòng văn bản quá dài có thể khiến người đọc sợ hãi, hãy đảm bảo rằng nhà thiết kế và lập trình viên tạo điều kiện tối ưu cho việc cảm nhận văn bản.

Tội lỗi tiếp theo trong danh sách thiết kế web là bỏ qua các điểm nhấn màu sắc.

Các nhà tiếp thị kỹ thuật số có kinh nghiệm biết rằng để thu hút sự chú ý, nút kêu gọi hành động phải sáng. Cho dù bạn đang khuyến khích "Mua" hay "Dùng thử miễn phí", các nút này cần phải bắt mắt để thu hút khách truy cập nhấp vào và thực hiện hành động mong đợi.

Nó có vẻ đơn giản. Nhưng thường thì các nhà thiết kế không sử dụng điểm nhấn sáng sủa trên các nút CTA cơ bản nhất mà chọn một trong những màu sắc chủ đạo của trang đích.

• Nút phải đủ sáng để thu hút sự chú ý.
• Nút phải là màu bổ sung (bổ sung) cho bảng màu trang đích - điều này là cần thiết để màu sắc không xung đột. Các màu bổ sung nằm trên bánh xe màuđối diện nhau. Nếu bạn đặt chúng cạnh nhau, chúng có vẻ sáng hơn.
• Nút này phải nổi bật so với nền của trang web. Nút màu xanh trên nền xanh là một ý tưởng tồi.
• Nút này nên được sử dụng cho những lời kêu gọi hành động quan trọng nhất. Đừng sử dụng yếu tố này quá thường xuyên trên trang.

Trong hình ảnh bên dưới, nút kêu gọi hành động có màu cam. Nó nổi bật trên nền trắng vì màu cam không còn được sử dụng trong thiết kế trang web (ngoại trừ chi tiết nhỏ logo, nhưng nó đủ nhỏ để thu hút sự chú ý).

Xin chào, Habr!

Hàng núi bài viết đã được viết mô tả các mặt khác nhau Khi làm việc với phông chữ web, nhiều ví dụ hoạt động đã được thu thập, nhưng hàng ngày chúng ta tiếp tục phải đối mặt với sự hiểu lầm cơ bản về phông chữ web là gì. Không phải ai cũng có thời gian tìm kiếm tài liệu trên Google về chủ đề này, vì vậy tôi đã cố gắng đưa ra câu trả lời cho các câu hỏi thường gặp. Tài liệu này sẽ được quan tâm chủ yếu bởi những người chưa đi sâu vào sự phức tạp của công nghệ phông chữ.

01. Tại sao chúng ta lại cần phông chữ web mà không phải phông chữ tiêu chuẩn?

Điều đầu tiên tôi nghĩ đến là phông chữ chuẩn Chúng cực kỳ nhàm chán và với sự giúp đỡ của chúng, thật khó để làm được điều gì đó nguyên bản. Theo quy định, hầu hết chúng đều mang đến sự u sầu và chán nản không chỉ cho người dùng mà còn cho cả những người thiết kế web. Trong trường hợp này, các phông chữ không chuẩn có tính biểu cảm cao hơn và ngoài ra, chúng có nhiều mức độ lớn hơn nên có rất nhiều lựa chọn. Hơn nữa, phông chữ là một phần không thể thiếu của thương hiệu, vì vậy mọi công ty đều cố gắng sử dụng nó một cách tích cực hơn vì cơ hội kỹ thuật như vậy đã xuất hiện.

Và người ta hoàn toàn có thể từ bỏ các phông chữ tiêu chuẩn, đặc biệt là vì nhiều hệ điều hành di động không hỗ trợ chúng (ví dụ: Arial, Taһoma, Verdana và Georgia). Tuy nhiên, thật không may, ngành công nghiệp, trong nhiều năm đã được điều chỉnh thành 96 màn hình dpi và Georgia verdans, vẫn chưa hoàn toàn sẵn sàng cho những thay đổi nhanh chóng và trên các hệ điều hành Windows cũ hơn vẫn có vấn đề với việc hiển thị phông chữ không chuẩn do đặc thù của cơ chế rasterization

02. Làm thế nào để chọn được font chữ web tốt?

Phông chữ không chỉ là một tập hợp các chữ cái được số hóa được tạo bằng bút vẽ trên giấy hoặc trong Illustrator, nó còn là 98% sự tinh chỉnh và đánh bóng, gợi ý và thử nghiệm cho phương tiện truyền thông khác nhau và trong kích cỡ khác nhau. Phông chữ này trông đẹp, kiểu dáng bóng bẩy, sẽ không có vấn đề gì với nó dù trên máy in hay trên màn hình, nó toát lên chất lượng tốt.

Tuy nhiên, khi chọn phông chữ, nhiều Giá trị cao hơnĐiều này thậm chí không phải là vấn đề quan trọng mà là tính hiệu quả và sự tuân thủ của phông chữ với phương pháp sử dụng và nhiệm vụ được giao cho nó. Nếu bạn làm việc với phông chữ, bạn cần hiểu mọi thứ hoạt động như thế nào những công nghệ nào được sử dụng. Điều này sẽ giúp bạn không ghi nhớ trong đầu một loạt các quy tắc ghi nhớ khó hiểu, được ghi lại một cách phù hợp và bắt đầu. Ví dụ, mọi nhà in có lòng tự trọng đều biết lý do tại sao không nên sử dụng phông chữ TrueType để in offset, phông chữ nào có thể được sử dụng làm phông chữ văn bản và phông chữ nào - chỉ dành cho tiêu đề hoặc chỉ mục. Nếu anh ta không biết điều này, thì anh ta sẽ phải in lại một lượng lớn bản in, và những bất ngờ và vấn đề liên tục sẽ chờ đợi anh ta tại nơi làm việc. Thật ngạc nhiên là tại sao không ai đưa ra bất kỳ yêu cầu nào đối với các nhà thiết kế web.

03. Trình duyệt hiển thị phông chữ như thế nào?

Tôi thường nghe nói rằng các trình duyệt tự vẽ phông chữ nên chúng trông khác nhau ở mọi nơi. Nhưng trên thực tế, phông chữ được hiển thị bằng một công cụ đặc biệt hệ thống con đồ họa Hệ điều hành: trên Windows thì có GDI hoặc Viết trực tiếp và trên OS X và iOS - Văn bản lõi(và trước đây là QuickDraw). Có 3 cơ chế rasterization (rendering) phông chữ phổ biến: pixel hai màu (đen và trắng), pixel đơn sắc (thường được gọi là khử răng cưa hoặc khử răng cưa thông thường) và pixel phụ. Subpixel sử dụng tính năng LCD và màn hình plasma, trong đó mỗi pixel được chia thành 3 phần (đỏ, lục và lam), nhằm tăng độ phân giải ngang của hình ảnh được hiển thị và cải thiện độ rõ nét.

Tuy nhiên, các trình duyệt chọn phương thức hiển thị của riêng chúng từ các phương thức do HĐH cung cấp. Ví dụ: GDI có 3 tùy chọn hiển thị: đen trắng, khử răng cưa thông thường và subpixel Loại rõ ràng. Điểm đặc biệt của cái sau là việc làm mịn chỉ xảy ra theo chiều ngang, phù hợp với vị trí của các pixel phụ. Đây chính là lý do tại sao chúng ta thường thấy hiện tượng răng cưa khủng khiếp ở các nét ngang và chéo của phông chữ khi sử dụng. May mắn thay, Microsoft bắt đầu Cơ chế dần dần được cải tiến và GDI được thay thế bằng công nghệ DirectWrite, nơi xuất hiện tính năng khử răng cưa dọc. So sánh:

04. TTF hay OTF?

TrueType và PostScript - ban đầu chúng được định dạng khác nhau phông chữ. TrueType sử dụng đường cong Bezier bậc hai, trong khi PostScript sử dụng đường cong bậc ba, vốn quen thuộc với các nhà thiết kế làm việc trong Illustrator và Photoshop. Ngày nay, cả hai phương pháp mô tả đường cong đều được sử dụng như một phần của cùng một định dạng OpenType, với điểm khác biệt duy nhất là tệp TrueType có phần mở rộng TTF và tệp PostScript có phần mở rộng OTF. Mỗi công nghệ đều có những tính năng gợi ý riêng và ứng dụng cụ thể.

Nhìn vào bức tranh. Nếu phông chữ TrueType dễ đọc hơn nhiều ở kích thước nhỏ, nhưng ở kích thước lớn, chúng ta thấy những nét đặc trưng, ​​thì đối với phông chữ PostScript, mọi thứ hoàn toàn ngược lại. Điều này là do các trình duyệt chọn các phương pháp rasterization khác nhau cho PS và TT. Đối với PS, trình duyệt áp dụng khử răng cưa đơn sắc thông thường và TT được xử lý bằng ClearType. Vì vậy, hóa ra TrueType sẽ thích hợp hơn cho phông chữ văn bản cũng như cho các tiêu đề và dòng chữ lớn sẽ phù hợp hơn PostScript.

Chúng tôi cũng thấy rằng không phải tất cả các trình duyệt đều sử dụng DirectWrite. Vì vậy, nó vẫn không có trong Google Chrome.

05. Điều gì khác ảnh hưởng đến màn hình?

Đôi khi tốt hơn là đặt phương pháp rasterization theo cách thủ công. Ví dụ: trong các trình duyệt có công cụ Webkit, bạn có thể sử dụng thuộc tính CSS - làm mịn phông chữ webkit và kích hoạt khử răng cưa thông thường theo cách thủ công thay vì khử răng cưa pixel phụ và ngược lại. Ngoài ra còn có những cách không hề tầm thường để khiến trình duyệt thay đổi phương pháp rasterization; trên Habré, họ từng đề xuất sử dụng một bản hack với text-shadow .

Chúng ta không được quên về cỡ chữ (font-size). Hình dạng đường viền, độ tương phản nét vẽ và khả năng đọc có thể khác nhau rất nhiều giữa các kích thước phông chữ. Đặt trình chỉnh sửa đồ họa xuống và xem phông chữ web trông như thế nào trong trình duyệt, trong chiến đấu.

Một cách khác để giảm thiểu những thiếu sót của khử răng cưa là thông qua quản lý màu sắc và độ tương phản. Để giảm hiệu ứng của đường viền màu (khi sử dụng ClearType, các đường viền màu vàng và đỏ tươi xuất hiện xung quanh các cạnh), bạn có thể thử giảm độ tương phản tông màu bằng cách làm cho màu nền gần với màu văn bản hơn. Đừng quá lo lắng, hãy nhớ đến những người dùng có thị lực kém.

06. Phông chữ web có cần gợi ý không?

Gợi ý là các hướng dẫn đặc biệt liên kết chặt chẽ các đường cong trừu tượng của phông chữ với các pixel trên màn hình. Phần lớn các phông chữ (bao gồm cả phông chữ thương mại) không được gợi ý vì đây là một thủ tục khá tốn công và phức tạp. Gợi ý được thực hiện khác nhau đối với TrueType và PostScript. Nếu bạn lấy font rẻ tiền thì sẽ an toàn hơn định dạng OTF, bởi vì trong TT, quy trình vẫn không thay đổi kể từ thời rasterization đen trắng và không hoàn toàn đầy đủ, nhưng đối với PS, quy trình đơn giản hơn và tác giả có cơ hội thực hiện gợi ý tự động.

Phông chữ không có gợi ý sẽ bị mờ khi rasterized và chiều cao của các chữ cái có thể tăng vọt.

Một mặt, phông chữ có gợi ý khá rõ ràng, tương phản và đồng nhất, nhưng mặt khác, hình dạng chữ bị biến dạng tùy theo kích thước và khoảng cách có thể khác so với thực tế. Các chữ cái hoàn toàn phụ thuộc vào pixel.

Trong HĐH Windows, có lẽ chúng ta thấy cách tiếp cận triệt để nhất: các phông chữ phổ biến như Tahoma, Verdana, Arial và Georgia được gợi ý cụ thể cho GDI ClearType và khi DirectWrite xuất hiện, các phông chữ chính có trong HĐH phải được gợi ý lại và cập nhật.

Không giống như Microsoft, Apple có cách tiếp cận ngược lại, vì vậy hệ điều hành của họ sử dụng các thuật toán cho phép bất kỳ phông chữ nào được hiển thị ít nhiều hiệu quả và gợi ý hoàn toàn không được tính đến.

Trả lời câu hỏi: kỷ nguyên của màn hình 300DPI đang đến rất nhanh, và số lượng lớn thiết bị di động đã có độ phân giải này và sẽ sớm không cần gợi ý nữa. Nhưng vì Windows vẫn phụ thuộc vào gợi ý và tập trung vào màn hình có độ phân giải thấp, đối với phông chữ văn bản, hãy cố gắng chọn phông chữ được thiết kế tốt hoặc chuẩn, nếu không văn bản sẽ khó đọc và khó hiểu.

07. @font-face hay Cufon?

Dù nghe có vẻ lạ lùng đến đâu thì vẫn có người tự hỏi mình câu hỏi này. Có vẻ như sau khi các trình duyệt bắt đầu hỗ trợ thuộc tính @font-face, tất cả các công nghệ nhúng phông chữ khác (Cufon, sIFR, Flash) dường như trở nên không còn phù hợp. Nhưng một số ý nghĩa vẫn còn tồn tại, chẳng hạn như cách thay thế phông chữ bằng hình ảnh, khi không hiển thị các đường cong vector trên trang web mà chỉ hiển thị một bản in, chẳng hạn như máy in in nó trên một tờ giấy hoặc Photoshop xuất ra JPG không thể chỉnh sửa. Điều này được nhiều giấy phép phông chữ (máy tính để bàn) thông thường cho phép. Một số nhà sản xuất phông chữ (ví dụ: Adobe) cho phép nhúng phông chữ trên máy tính để bàn (trong các chương trình và trên máy chủ), miễn là nó vẫn được bảo vệ và không thể tải xuống. Nếu bạn không thể mua giấy phép web riêng thì bạn có thể sử dụng sIFR thích hợp khi phông chữ được nhúng bằng đối tượng Flash. Điểm bất lợi là nó sử dụng Flash, không phải tất cả các thiết bị đều hỗ trợ. Bạn cũng có thể sử dụng công nghệ Cufon (Canvas được sử dụng) nếu giấy phép cho phép. Tất nhiên, trong trong trường hợp này tập lệnh sẽ cồng kềnh và việc chọn văn bản sẽ không hiệu quả, nhưng trong tình huống vô vọng sẽ làm.

Nhưng tốt nhất nên sử dụng @font-face, nó vừa tiên tiến hơn về mặt công nghệ, vừa tiện lợi hơn, hơn nữa đã tích lũy đủ kinh nghiệm để làm việc với nó. Nó chỉ có một nhược điểm: không phải tất cả các nhà sản xuất đều cho phép sử dụng phông chữ của họ trên web.

08. Tệp phông chữ nên ở định dạng nào?

Ngày nay, phông chữ được chuẩn bị để triển khai (@font-face) trên trang web phải có nhiều định dạng:

TTF hoặc OTF- một tệp phông chữ quen thuộc với chúng tôi nhưng được tải từ máy chủ khi xem trang web;
WOFF- kho lưu trữ nguồn OTF hoặc TTF không được bảo vệ có lẽ là tốt nhất định dạng quan trọng, được hỗ trợ bởi hầu hết các trình duyệt phổ biến và các tệp trong WOFF thường nhẹ hơn 2–2,5 lần so với tệp gốc;
EOT- cần có một kho lưu trữ do TT OpenType triển khai, có cơ chế bảo mật, để hỗ trợ các trình duyệt cũ hơn trình duyệt web IE(bắt đầu từ IE8, ngoài đường cong TrueType, PostScript cũng được hỗ trợ);
SVG- để hỗ trợ trình duyệt Safari.

09. Phông chữ web có thể chuyển đổi được không?

Bất kể mọi người có nói gì với bạn, bạn không thể chỉ chuyển đổi tệp và lưu nó. Chất lượng ban đầu phông chữ, đặc biệt nếu ban đầu nó ở định dạng OpenType. Trong quá trình này, có khả năng mất một số dữ liệu được nhúng trong tệp phông chữ (hướng dẫn đã biên dịch, ký tự bổ sung, số liệu). Bạn sẽ nhận thấy điều này khi tập tin đột nhiên "giảm cân" trong quá trình chuyển đổi; việc chuyển đổi TrueType sang PostScript và ngược lại sẽ đặc biệt không ổn.

Ngoài ra, quá trình chuyển đổi hầu như luôn vi phạm các điều khoản không sửa đổi của giấy phép. Nói một cách đơn giản, điều này cũng giống như hành vi trộm cắp. Khi bạn ném tệp vào trình chuyển đổi, hãy yên tâm rằng nó sẽ không bỏ sót chúng và sẽ đưa ra cảnh báo vì tệp chứa chữ ký số nhà sản xuất và các lệnh cấm sửa đổi tương ứng.

10. Phông chữ web nên nặng bao nhiêu?

Trình duyệt phải tải xuống đầy đủ các tập tin phông chữ trước khi hiển thị trang. Có lẽ bạn đã thấy hiệu ứng “font flash” (hoặc FOUT), khi trong một khoảnh khắc ngắn, thay vì các phông chữ kỳ lạ, các phông chữ hệ thống tiêu chuẩn sẽ nhấp nháy. Sẽ là bình thường nếu TTF (OTF) vừa với 100 kb và WOFF (EOT) vừa với 50 kb. Hãy luôn suy nghĩ xem bạn có cần sử dụng phông chữ tùy chỉnh hay không, ngay cả khi bạn sử dụng nó trong 1 tiêu đề ngắn, bạn vẫn sẽ phải tải xuống toàn bộ tệp phông chữ.
Càng có chủ nghĩa hoàn hảo trong thiết kế, các tập tin phông chữ nhỏ hơn có thể cân nhắc và cố gắng chọn hình dạng đơn giản. Theo nghĩa này, hình thức lý tưởng là một hình học kỳ cục mở với độ tương phản thấp. Để tăng tốc độ tải phông chữ, việc đưa nó vào tệp kiểu bằng cách sử dụng data:uri cũng có thể hữu ích.

11. Có thể sử dụng bao nhiêu kiểu phông chữ trên web?

Từ quan điểm của một nhà thiết kế, rất nhiều kiểu chữ rất ngầu. Và thực sự, đối với tiêu đề - In đậm, và ở đằng kia, đối với phần phụ - ExtraLight, chúng ta thường sẽ đẩy các văn bản không cần thiết và nhấn chúng vào In đậm đậm đặc. Đây rồi - sự giàu có thực sự và sự đa dạng về phong cách. Nhưng khi tất cả “của cải” này bắt đầu được chuyển đến trang web, hóa ra mọi thứ diễn ra chậm chạp một cách khủng khiếp. Và tốt hơn hết là đừng cố mở một trang web như vậy bằng thiết bị di động. Ngoài ra, đừng quên rằng mỗi kiểu chữ sẽ có giá tiền riêng và rất có thể khách hàng sẽ yêu cầu bạn tìm một phông chữ đồng nghĩa hoặc giảm số lượng kiểu chữ, để không mua hết kiểu chữ đắt tiền. Việc sử dụng tối đa 2-3 kiểu chữ giống nhau hoặc khác nhau là điều bình thường.

12. Có cần thiết phải giới hạn bộ ký tự không?

Câu trả lời cho câu hỏi này phụ thuộc vào loại trang web đó và cách nó sẽ được sử dụng. Các hạn chế có thể hữu ích vì có thể giảm đáng kể kích thước của tệp. Đôi khi, do thiếu hiểu biết, các nhà phát triển đã tải lên các tệp phông chữ nặng từ máy tính của họ. trọn bộ ký tự và sẽ tốt nếu không có chữ tượng hình (lưu ý, phông chữ Arial Unicode chứa hầu hết các ký tự trong bảng Unicode nặng 22 MB).

Đối với những người làm cho các trang web bằng tiếng Anh trở nên dễ dàng nhất, họ không cần phải tải thêm ký tự nào cả, những ký tự bằng tiếng Latin cơ bản (hoặc ASCII) là đủ. Nếu bạn chỉ sử dụng phông chữ cho các tiêu đề bằng tiếng Nga + một vài dòng tiếng Anh thì bạn sẽ đủ bộ ASCII(tiếng Latin cơ bản) và 64 ký tự của bảng chữ cái tiếng Nga, không cần thiết phải tải bộ 420 ký tự Cyrillic Extended. Đó là một câu chuyện hoàn toàn khác nếu trang web của bạn đa ngôn ngữ, trong trường hợp đó, để tránh hiển thị sai các ký tự, bạn cần cố gắng bao gồm tất cả các ngôn ngữ được sử dụng.

13. Tôi có thể sử dụng bản sao phông chữ không?

Sẽ xảy ra trường hợp mua phông chữ gốc quá đắt hoặc thậm chí là không thể, khi đó việc chọn phông chữ đồng nghĩa (bản sao) sẽ là phù hợp. Tất nhiên, bạn không nên mong đợi chất lượng tuyệt vời từ chúng, ngay cả khi chúng được sản xuất bởi một công ty nổi tiếng của Nga. Mọi thứ hoàn toàn tồi tệ khi bạn bắt gặp tác phẩm của một người biết chữ ẩn danh nào đó quyết định thử sức mình trong một lĩnh vực mới, hãy cẩn thận với những phông chữ như vậy. Dưới đây là ví dụ về các bản sao (bản gốc được chỉ định trong ngoặc): FreeSet (Frutiger), Pragmatica và Helios (Helvetica). Xin lưu ý rằng hình dạng chữ cái có thể khác nhau. Có một số lượng lớn các bản sao trong thư mục từ đồng nghĩa phông chữ Paratype.

14. Làm thế nào để kiểm tra phông chữ?

Các nhà thiết kế không quen với việc chỉ nhìn thấy phông chữ qua cửa sổ Photoshop, biên tập đồ họa sử dụng các phương pháp làm mịn văn bản của riêng họ và bạn có thể bị đánh lừa bởi một bức tranh đẹp. Sẽ hữu ích hơn nhiều khi tìm hiểu cách kiểm tra và xem chúng trên trình duyệt. Nếu có trang demo, hãy đảm bảo rằng tất cả các loại tạo tác và đột biến không xuất hiện trong quá trình kết xuất. Ngoài ra còn có một công cụ tên là Typecast, nơi bạn có thể kiểm tra nhiều phông chữ và sau đó hiển thị trang cho khách hàng. Dành cho những ai lựa chọn phông chữ mớiđối với một trang web được tạo sẵn - dịch vụ Web Fonts Previewer là không thể thiếu đối với bạn, bạn có thể kiểm tra bất kỳ phông chữ nào trên một trang web đang hoạt động, trực tiếp, như thể bạn đã triển khai nó.

15. Máy tính của tôi có font chữ thì có thể sử dụng trên website được không?

Đầu tiên, một chút về trộm cắp. Tôi biết rất nhiều nhà thiết kế có hàng nghìn phông chữ trong máy tính của họ mà không ai biết nguồn gốc của chúng. Theo quy định, họ chỉ cần tải nó xuống từ Internet. Nhưng vì lý do nào đó không ai nghĩ rằng sự sáng tạo phông chữ tốt- đây là những tháng và đôi khi là nhiều năm làm việc nghiêm túc! Nhưng đây không phải là lý do duy nhất khiến bạn không nên sử dụng những phông chữ bị sém và lấy không rõ nguồn gốc mà còn vì bạn có thể gặp khó khăn nghiêm trọng ở giai đoạn phát triển.

Nếu bạn muốn nhúng phông chữ đi kèm với hệ điều hành, bạn chỉ có thể thực hiện việc này bằng cách tạo điểm ảnh hoặc sử dụng nó trong hình ảnh. Nếu bạn thực sự cần nhúng thì bạn sẽ cần mua một giấy phép riêng, giống như phông chữ thông thường(cả Georgia và Tahoma đều đang được giảm giá).

16. Làm thế nào để mua phông chữ web?

Khi bạn "mua một phông chữ", điều gần gũi nhất với việc mua phần mềm là bạn nhận được giấy phép sử dụng nó chứ không phải là quyền đối với chính tệp chương trình. Hóa ra tệp phông chữ được biên dịch hợp pháp là một chương trình. Sửa đổi hoặc thay đổi trừ khi được giấy phép cho phép được coi là vi phạm bản quyền.

Một cách thuận tiện để mua phông chữ là thông qua danh mục phông chữ (Fonts.com, MyFonts, Ascender, Typekit). Bạn sẽ có thể xem, so sánh và chọn một trong các tùy chọn có sẵn để sử dụng và thanh toán bằng thẻ. Cách dễ dàng nhất cho các công ty là liên hệ trực tiếp với xưởng sản xuất hoặc để khách hàng mua phông chữ.

Hoặc có lẽ tốt hơn hết là bạn không nên chi tiền cho một phông chữ nào cả? Có rất nhiều điều tuyệt vời phông chữ miễn phí, không thua kém gì những cái trả phí!

17. Có những loại giấy phép nào?

Có nhiều loại giấy phép phông chữ khác nhau và với sự ra đời của phông chữ web, sự đa dạng ngày càng tăng lên. Trong cuộc sống thực, mỗi công ty tự đặt ra các quy tắc của trò chơi và giấy phép phông chữ có thể chứa các tính năng của nhiều loại khác. Chúng tôi sẽ quan tâm đến những cái điển hình.

Giấy phép thương mại thông thường giới hạn việc sử dụng trên một số thiết bị nhất định và cho phép phân phối các tác phẩm được tạo bằng phông chữ. Đây có thể là tạp chí, báo, tờ rơi, danh thiếp, hình ảnh phông chữ được quét - tất cả chúng ta có thể gọi chung là bản in. Giấy phép này không phù hợp cho phim, truyền hình, web và nhúng vào các ứng dụng và chương trình; các quyền đó phải được mua riêng.

Ngoài ra còn có các giấy phép cụ thể, ví dụ: giấy phép có độc quyền. Trong trường hợp này, công ty mua tất cả các quyền từ các nhà thiết kế kiểu chữ và ngay cả tác giả của phông chữ cũng không có quyền sử dụng nó ở bất cứ đâu. Điều đặc biệt đáng ngạc nhiên khi những phông chữ như vậy có trên torrent hoặc khi một số nhà thiết kế bên thứ ba sử dụng chúng.

Giấy phép miễn phí ( phạm vi công cộng) - tác giả của phông chữ cho phép phân phối miễn phí, với điều kiện chỉ rõ tên của mình (Creative Commons) hoặc không có tên đó (ví dụ: OFL, GPL, Apache 2.0). Loại giấy phép này thậm chí còn cho phép sử dụng thương mại, ngoại trừ việc bán hàng và phân phối trả phí. Ví dụ: PT Sans, Openans, Droid. Đôi khi, việc sửa đổi phông chữ được cho phép (GPL), nhưng sửa đổi bạn tạo sẽ tự động kế thừa cùng một giấy phép (có nghĩa là bạn cũng có thể bị phân nhánh). Freedom giả định rằng nó có thể được sử dụng trên bất kỳ phương tiện truyền thông nào, kể cả. và web.
Miễn phí cho mục đích sử dụng phi thương mại - nghĩa là bạn có thể sử dụng nó trong mọi trường hợp bạn không kiếm được tiền từ nó. Ví dụ, để đào tạo, sở thích và các dự án cộng đồng. Đôi khi, nhà sản xuất cho phép người thiết kế sử dụng với hy vọng rằng khách hàng hạnh phúc người thiết kế sau đó sẽ mua phiên bản thương mại của phông chữ.

18. Giấy phép đối với phông chữ web khác nhau như thế nào?

Giấy phép web là loại giấy phép yêu thích của chúng tôi, chúng bổ sung cho giấy phép chính hoặc được cấp riêng. quy định trương hợp đặc biệt- sử dụng phông chữ trên các trang web. Theo quy định, hạn chế quan trọng nhất là số lượt xem trang. Ví dụ: 10 nghìn mỗi tháng, 100 nghìn hoặc 1 triệu, tức là càng có nhiều người truy cập trang web của bạn thì bạn càng phải trả nhiều tiền cho giấy phép. Ngoài ra còn có các tùy chọn không giới hạn, khi bạn trả tiền cho phông chữ một lần, nhưng chúng đắt hơn nhiều lần. Chắc hẳn bạn thắc mắc, có ai theo dõi số lượt xem không? Thường thì không. Nhưng đừng quên rằng một số lượng lớn quầy sẽ giám sát lưu lượng truy cập trang web của bạn và nếu bạn khơi dậy sự nghi ngờ của người bán, bạn có thể bị mất giấy phép.

Chưa hết, giấy phép web riêng không cho phép sử dụng trên máy tính thông thường. Đôi khi giấy phép web được cấp miễn phí, nghĩa là cùng lúc với việc mua phông chữ trên máy tính để bàn, bạn có quyền sử dụng phiên bản web của nó. Nhưng điều này vẫn còn hiếm, đại đa số các nhà sản xuất đều yêu cầu một khoản phí bổ sung.

Sau khi mua, bạn sẽ nhận được các tệp đặc biệt mà bạn nhúng vào trang web (TTF, OTF, WOFF, EOT) và một số phông chữ không cho phép đặt các tệp này trên trang web ở dạng không được bảo vệ, vì về mặt lý thuyết, các bên thứ ba có thể lấy được chính các tập tin phông chữ. Tùy chọn thứ ba là bạn sử dụng dịch vụ web đặc biệt của nhà sản xuất phông chữ, ví dụ Typekit, thuộc sở hữu của công ty Adobe và trả phí đăng ký.

19. Tôi có thể lấy phông chữ web tốt ở đâu?

Danh mục phông chữ miễn phí từ Google
Fontsquirrel là một thư mục và trình chuyển đổi phông chữ web nổi tiếng
Myfonts là một kho phông chữ khổng lồ với hệ thống tiện lợi sự chi trả
Phông chữ.com - đối thủ cạnh tranh chính Phông chữ của tôi
Typekit - dịch vụ cho thuê font chữ của Adobe
Typecast - cửa hàng nói trên có dịch vụ thử nghiệm
tái bút Một cái khác tài nguyên hữu ích, người đã tư vấn cho ilyaerin, WebFont.ru Chức năng về hình thức: thiết kế cho người đọc
Maria Doreuli. Cấp phép. Để làm cho nó rõ ràng
Tim Brown. Hiển thị kiểu chữ trên web
Tim Brown. Thuộc tính CSS ảnh hưởng đến kết xuất kiểu
Tim Brown. Kết xuất kiểu: hệ điều hành
Tim Ahrens. Một cái nhìn cận cảnh hơn về kết xuất phông chữ
Tim Ahrens (Bộ đánh máy). Xem xét kỹ hơn về gợi ý TrueType
Lợi ích của OpenType/CFF so với TrueType

Ildar Kinyabulatov, nhà thiết kế web ADV/kỹ thuật web