Embedding font for web

<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

div
{
font-family:myFirstFont;
}
</style>
</head>
<body>

With CSS3, websites can finally use fonts other than the pre-selected “web-safe” fonts.

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>

Postscript font

Definition:A PostScript font, also known as a Type 1 font, has two parts. One part contains the information to display the font on screen and the other part is for printing. When PostScript fonts are delivered to printers, both versions (print and screen) must be provided.

PostScript fonts allow for high-quality, high-resolution printing. They were developed by Adobe and for a long time considered the professional’s choice for printing. PostScript font files are not cross-platform compatible, meaning different versions exist for the Mac and PC.

PostScript fonts have widely been replaced, first by TrueType and then by OpenType fonts. While TrueType fonts worked well alongside PostScript (with TrueType ruling the screen and PostScript ruling print), OpenType fonts combined many of the best features of both and have become a leading format.

Also Known As: Type 1 Font
Common Misspellings: Post Script Font

Màu cơ bản

Màu cơ bản là tập hợp các màu có thể kết hợp được với nhau để tạo ra dải màu hữu dụng. Trong các ứng dụng của con người, ba màu cơ bản thường được dùng, dạng màu mà mắt người nhìn thấy được đó là dạng ba màu.

Các màu cơ bản, còn gọi là màu gốc, của một không gian màu là các màu sắc không thể tạo ra bằng cách trộn các màu khác trong phổ màu của không gian màu đó. Các màu gốc có thể được trộn với nhau để tạo ra mọi màu khác trong không gian màu của chúng. Nếu không gian màu là một không gian véctơ thì các màu gốc tạo nên hệ cơ sở của không gian đó.

Kết hợp các màu cơ bảnđể tạo ra các màu khác có nhiều cách:

the CMYK Color Model

The CMYK color model is used in the printing process. To understand it, it is best to start with RGB color. The RGB color model (made up of red, green and blue) is used in your computer monitor, and is what you will view your projects in while still on screen. These colors, however, can only be viewed with natural or produced light, such as in the computer monitor, and not on a printed page. This is where CMYK comes in.

When two RGB colors are mixed equally they produce the colors of the CMYK model, known as subtractive primaries. Green and blue creates cyan (C), red and blue creates magenta (M), and red and green creates yellow (Y). Black is added to the model because it cannot be created with the 3 subtractive primaries (when combined they create a dark brown). The K, or “key,” stands for black.

CMYK in the Printing Process

The four-color printing process uses four printing plates; one for cyan, one for magenta, one for yellow and one for black. When the colors are combined on paper (they are actually printed as small dots), the human eye sees the final image.

CMYK in Graphic Design

Graphic designers have to deal with the issue of seeing their work on screen in RGB, although their final printed piece will be in CMYK. Digital files should be converted to CMYK before sending to printers, unless otherwise specified. Because of this issue, it is important to use “swatches” when designing if exact color matching is important. Swatches provide a designer and client with a printed example of what a color will look like on paper. A selected swatch color can then be chosen in Photoshop (or a similar program) to insure the desired results. Even though the on-screen color won’t exactly match the swatch, you know what your final color will look like. You can also get a “proof” from a printer, which is an example of your printed piece provided before the entire job is run.

RGB

There are many models used to measure and describe color. The RGB color model is based on the theory that all visible colors can be created using the primary additive colors red, green and blue. These colors are known as primary additives because when combined in equal amounts they produce white. When two or three of them are combined in different amounts, other colors are produced. For example, combining red and green in equal amounts creates yellow, green and blue creates cyan, and red and blue creates magenta.

As you change the amount of red, green and blue you are presented with new colors. Additionally, when one of these primary additive colors is not present you get black.

RGB Color in Graphic Design

The RGB model is so important to graphic design because it is used in computer monitors. The screen you are reading this very article on is using additive colors to display images and text. Therefore, when designing websites (and other on-screen projects such as presentations), the RGB model is used because the final product is viewed on a computer display.

Types of RGB Color Spaces

Within the RGB model are different color spaces, and the two most common are sRGB and Adobe RGB. When working in a graphics software program such as Adobe Photoshop or Illustrator, you can choose which setting to work in.

  • sRGB: The sRGB space is best to use when designing for the web, as it is what most computer monitors use.
  • Adobe RGB: Because the Adobe RGB space contains a larger selection of colors that are not available in the sRGB space, it is best to use when designing for print. It is also recommended for use with photos taken with professional digital cameras (as opposed to consumer-level), because high-end cameras often use the Adobe RGB space.

Basic Typography Terminology

Below are some basic definitions to help you understand how type is described and measured.

Typeface

A typeface refers to a group of characters, such as letters, numbers, and punctuation, that share a common design or style. Times New Roman, Arial, Helvetica and Courier are all typefaces.

Font

Fonts refer to the means by which typefaces are displayed or presented. Helvetica in movable type is a font, as is a TrueType font file.

Type Families

Type Families
The different options available within a font make up a type family. Many fonts are at a minimum available in roman, bold and italic. Other families are much larger, such as Helvetica Neue, which is available in options such Condensed Bold, Condensed Black, UltraLight, UltraLight Italic, Light, Light Italic, Regular, etc.

Serif Fonts

Serifs
Serif fonts are recognizable by the small lines at the ends of the various strokes of a character. As these lines make a typeface easier to read by guiding the eye from letter to letter and word to word, serif fonts are often used for large blocks of text, such as in a book. Times New Roman is an example of a common serif font.

Sans Serif Fonts

Sans Serif Fonts
Serifs are small lines at the ends of character strokes. Sans serif, or without serif, refers to typefaces without these lines. Sans serif fonts are often used when a large typeface is necessary, such as in a magazine headline. Helvetica is a popular sans serif typeface. Sans serif fonts are also common for website text, as they can be easier to read on screen. Arial is a sans serif typeface that was designed specifically for on-screen use.

Point

Point Sizes
The point is used to measure the size of a font. One point is equal to 1/72 of an inch. When a character is referred to as 12pt, the full height of the text block (such as a block of movable type), and not just the character itself, is being described. Because of this, two typefaces at the same point size may appear as different sizes, based on the position of the character in the block and how much of the block the character fills.

Pica

The pica is generally used to measure lines of text. One pica is equal to 12 points, and six picas are equal to one inch.

Baseline

Baseline
The baseline is the invisible line on which characters sit. While the baseline may differ from typeface to typeface, it is consistent within a typeface. Rounded letters such as “e” will extend slightly below the baseline.

X-height

height
The x-height is the distance between the meanline and the baseline. It is referred to as the x-height because it is the height of a lowercase “x.” This height can vary greatly between typefaces.

Tracking, Kerning and Letterspacing

Tracking, Kerning and Letterspacing
The distance between characters is controlled by tracking, kerning and letterspacing. Tracking is adjusted to change the space between characters consistently across a block of text. This may be used to increase legibility for an entire magazine article. Kerning is the reduction of space between characters, and letterspacing is the addition of space between characters. These smaller, precise adjustments may be used to tweak a specific word, such as in a logo design, or a large headline of a story in a newspaper. All of the settings may be experimented with to create artistic text effects.

Leading

Leading
Leading refers to the distance between lines of text. This distance, measured in points, is measured from one baseline to the next. A block of text may be referred to as being 12pt with 6pts of extra leading, also known as 12/18. This means there is 12pt type on 18pts of total height (12 plus the 6pts of extra leading).

Thẩm mỹ trong thiết kế web

Trích từ Bài viết: Thiết kế layout web – tiếp cận và định hướng nghề nghiệp (phần số  5). Người viết: Lệ Thủy

2.   Thẩm mỹ trong thiết kế web

Các quy luật về thẩm mỹ trong lĩnh vực đồ họa nói chung va ngành thiết kế web nói riêng đều giống nhau. Các quy tắc bố cục, các qui luật thị giác, luật xa gần, luật phối cảnh, các yếu tố chính phụ, sự tương phản, tính cân bằng … trong thiết kế đều cần phải được đảm bảo nhằm tạo ra được một website có tính thẩm mỹ cao nhất. Website đẹp sẽ thu hút người xem, tao sự hấp dẫn và cuốn hút về mặt hình thức sẽ dẫn dắt người xem tìm hiểu sâu về nội dung và tạo nên sự thành công trong công tác quảng bá thương hiệu.

2.1 Ý tưởng

Khi tiếp nhận bất kỳ một đơn hàng nào về thiết kế đồ hoạ, điều đầu tiên của người thiết kế nghĩ đến đó là ý tưởng thể hiện thế nào? Trong website cũng không ngoại lệ. Với một giao diện đẹp trong đó ẩn chứa một ý tưởng độc đáo sẽ để lại ấn tượng tốt trong lòng người xem. Tuy nhiên với dang web tin tức, dạng web thương mai điện tử thì phần ý tưởng sẽ không được quan tâm nhiều mà các vấn đề được đặt nặng hơn đó là sự sắp xếp hợp lý và dùng màu hiệu quả.

2.2 Bố cục

Tất cả các kiến thức được học về bố cục tại trường đó là một nền tảng vững chắc cho người thiết kế layout web. Đặc biệt đối với các website cá nhân, web sử dụng flash thì vấn đề này được quan tâm hàng đầu. Quan niệm về cái đẹp trong web cũng giống như các lĩnh vực đồ hoạ khác như thiết kế poster, brochure, catalogue,… Cũng phải có điểm nhấn, phải tuân theo qui luật thị giác, phải đảm bảo điểm vàng trong bố cục,… Vì vậy người được đào tạo căn bản về mỹ thuật khi tiếp cận lĩnh vực web này là một lợi thế.

2.3 Màu sắc:

Màu sắc là yếu tố hết sức quan trọng trong thiết kế web, phải có tông màu chủ đạo cho web, phải xác định các màu nào tham gia trong hệ thống web để tạo sự thống nhất cho toàn bộ hệ thống. Về cách chọn màu cho web chúng ta hãy chọn theo từng bước như sau: chọn tông màu chính, chọn 1 màu bổ sung, và chọn thêm 1 màu nhấn.

2.4 Xu hướng thíết kế:

Fresh and Clear: dạng web này được thiết kế đơn giản, màu sắc sử dụng nhè nhàng, sự tương phản cũng nhẹ nhàng tạo cảm giác trong trẻo, rõ ràng, minh bạch. Sự sáng sủa và tươi mát của dạng web này đang rất thu hút sự chú ý của người sử dụng thích hợp với đa phần thể loại web dành cho doanh nghiệp.

Phong cách cá tính mạnh mẽ: thường dùng những màu tương phản mạnh, hoa văn, đường nét đặc trưng, những hình ảnh cá tính mạnh mẽ, những bộ lọc độc đáo. Thể loại này thích hợp cho web cá nhân, blog, .. thể hiện web theo phong cách này cũng là để thể hiện cá tính, khẳng định cá nhân

Web phẳng 2D hay web dạng khối 3D: mỗi thể loại đều có cái đẹp riêng, chọn dạng khối hay dang phẳng phụ thuộc vảo chủ quan của người thiết kế trong thời điểm đó, hay yêu cầu của khách hàng. Thêm nữa là sự phối hợp hài hoà của tất cả các thành phần trong một trang và trong toàn bộ hệ thống website với thể loại phẳng hay dạng khối.

2.5 Liên kết trang

Trong thế giới web, sự liên kết các trang đó là sự sắp xếp các nội dung trong cùng một trang sau cho hơp lý, các đường dẫn đi tới những trang khác, những link quay về, những nhóm thông tin liên quan được bố trí thuận tiện, giúp người xem dễ dàng tiếp cận thông tin và cuốn hút họ duyệt web của mình, giữ chân họ tại website lâu hơn.