??????????, CSS & websites ??? ???????????

???? ??????? ????? ?????? ??? Twitter: ?? ??? ?? *?????????* ?? ?????????? ?? website ???, ????? ??????????????. ???? ? ????? ????????? ?????? ???? ??????, ???? ??? ??????? ???????. ”??? ????? ??????? ???? ??? ???;”

????????????? ??? ??? ????? ??? ???? ???????.

????? ??? ???? ??’ ??? ?? buzz ??? ???? ?????? ???? ??? ?? CSS, ????? ???????? ?????? ???????? sites ?? ?? ???????? ?? ??????? ????. ????? ?? ?? ??????? ???? ???? ??????? ??????. ???? ?? 95% of Web design is typography. ??? ????? ?? ?? ?? ????? ???? ?????? ?????? ???? ??? ???? ?????????. ?? ?? ?????? ??????? ?? ?????????? ????????? ????? ???? ??? ?? Web design ??? ?? ???????????? ?? ??? ??????, ???? ?? ?????? ?? ????? ???? ?? ????? ???.

?? ????? ???? ??? ??????? ?????????????? ?? ??????? CSS; ????????? ???? mini ??????. ??? ????? ???????????? ?? ??????? ???????, ????? ??? ???????? ??? ???????? ??????????.

CSS ??????? ??? ??????? ??? ??????????

?????? ????? ? HTML, ?? CSS ??? ?? ??????? ???? ?? ???? browsers ?? ??? ????? ?????? ??? ??????? ???????, ?????? ??? ?????? ??? ???? ??? ???? ?????? ??? ??? ???????? ??? ???????. ?? ?????? ???????? ??? ?????? ??? ??????? ?????????????? ? ??? ?????:

• ?? ????? ??? ??????? ??? ????????
• ? ???????? ??? ??????? ?????? ????
• ? ???????? ??? ?????????? ?????? ????
• ? ???????? ??? headings ??? ??? ???????????
• ? ???????? ??? ?????? ??? ??? ??????????? ??? ??? ???? list item ??? ?? ????
• ? ???????? ??? ????????? ?????? ????
• ? ???????? ??? ?????? ??? ???????? ??? ??? ???????? ??????

??? ?? ???????? ?????????? ??? ??? CSS ?? ????? ?????????? ????.

??????? ??? ???? ????

????? ???? ?? ??? ?????????.

?? ???????? ??? ?? default ??????? ??? ???????? ?? ????? ???? ?????????? browsers ????? 16px, ????? ?????????? ?? ??????? ?????? ??????.

body {
font-size: 62.5%;
}

?? ??? ?????? ???? ?? ??????? ??? ????????? ?? ????? ????? 10px ??? 1em=10px. ?????? ????? ?? ???????? ??????????? ??? ??? ?????????? ?????, ?????? ?? ????? ??? ????? ??? ????? ??? ??? CSS3.gr, ?????????? websites ?? elastic layout.

?? ????? ??? ??????? ??? ????????

CSS rule: width

?????: ?? ????? ??? ??????? ??? ???????? ???? ????? ?? ???????????? 55-70 ?????????? (??????????????????? ??? ?????). ??? ?????????? ?? ?????? ??? ????????, ???? ??????????? ?????? ?? ????? ?? ??????????.

??? ?? division ??? ???????????? ?? ???????, ?? ?? ????? #content, ? ??????????? ??????? ??? CSS ?? ???????? ?? ?????:

#content {
width: 48em;
}

?

content {
width: 480px;
}

?? ?????? ??? ?????? ?’ ??????????? ????? ??? ?????? ????????? ???????, ???? ?? ????????? ???? ?? ???? ??? ???? ?? ???? ??????????? ??? ????????. ?????????? ? ?????? ??????, ??? ????? ???? ?? ?????? ????? ??????????? ???????? “?????????”.

? ???????? ??? ??????? ?????? ????

CSS rule: line-height

?????: ? quick & dirty ??????? ????? line-height=default font-size x 1.5. ??? ???????? ?? ????????????? ?? 1.6. ?? CSS ?? ??????? ?????? ???? ????? ??? ???????????:

p {
font-size: 1.2em;
line-height: 1.6em;
}

(?? ??????? ??? ???????? ???? ??????????? ?? ???? ??? 1.2em=12px ??? ?? ?????????? ???? ?? ???????? ??? ?? ??????????? ??? ??????.)

?? ??????? ?????? ?? “?????????”. ?????????? ??? ???????? ?????? ??? ??????? ?? ???????? ?????? ???? ????????. ?????? ?? ????? line-height (? leading, ??? ?? ??????? ??? ???? ??????? ???????????) ?? ??? ????????? ???????? ??? ???????????? ??????????????? ????????.

? ???????? ??? ?????????? ?????? ????

CSS rule: padding (? margin, ??????? ?? ??? ?????????)

?????: ??? ??????? ???????? ???????. ? ??????? ?????????? ???? ??? ?? ?????????? ?????????? ?????? ???? ?? ??? ???????? ??????? 1em, ????? ???? ???? ?? ????? ??????????. ?? ??? ???? ??????? ??? ??? ????????? ??? CSS ????????:

p {
font-size: 1.2em;
line-height: 1.6em;
padding: 0 0 1em 0;
}

?? ?????????? ?????? ??? ?????????? ??????? ?? ????? ????? ??? ????????? ??? ?? ?????? ??? ??? ? ???????? ?????????? ???? ?????????. ??????????: A working library, ??? blog ??? ?????? ???? ??? ??? ????? ?? ??? ????? ???? ?????? ??? ??? ??? ??? ????????? ????.

? ???????? ??? headings ??? ??? ???????????

CSS rule: padding (? margin, ??????? ?? ??? ?????????)

?????: ?????? ?,?? ?????? ??? ??? ???????????.

???? ???? ??????? ?? ???? (pace) ? ?? ????? ??? ?????? ?? ????????? ??? ?????????? ????? ??????? ??????. ??????? ??????? ????? ?? ?????????? Compose to a Vertical Rhythm ??? ????? ??? ???? ???? ?????????? ??? ?? ???? ???? ??????????.

? ???????? ??? ?????? ??? ??? ??????????? ??? ??? ???? list item ??? ?? ????

CSS rule: padding (? margin ? ??? line-height, ??????? ?? ??? ?????????)

?????: ? ????? ???? ????? ?? ?????? ??? ??? ??????????? ??? ????? ?????? ???? ? ????? ???????????. ?? ???? ?? ???????? ??? ?? ????? ?? ??????? ??? ?? CSS ???:

ul{
padding: 1.5em 0;
font-size: 1.2em;
}

??? ???????? ?????? ?? “???????” ? ???????? ??? ???? list item ??? ?? ??????????? ??? ?? ???????. ????, ? ???????? ??????? ?? ???????? ?? ??????????? ?? ????:

ul{
padding: 1.5em 0;
font-size: 1.2em;
}

ul li{
padding: 0 0 1em 0;
line-height: 1.2em
}

(??????? ?? ???? ????????? line-height ??? ?? list items ?? ????? ?? ??? ????????? ??? ?? ????? ??? “?????????????” ?? ??????? ???? ????????? ??? ??? list item ?????? ??? 2? ??????.)

? ???????? ??? ????????? ?????? ????

CSS rule: letter-spacing

?????: ??????? ? default ????, ??? ????? ?????? 1, ??? ???????. ?? ?????????????? ???? ???? ? Trebuchet ? “Trebuchet MS” ?? ???????? ?? letter-spacing ?? ???????? ??? headings ??? ?? ????? ??? ??? “solid” ?????? ???? ???????????? ???.

h1{
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-size: 1.8em;
letter-spacing: -0.1em
}

?? letter-spacing ?????? ???????????? ?? ??????? ???? ?? ???? ? ???? ?? ???? ??? ??????? (???... ?????? ???? ???? ?????????; ) ??? ?? body text.

? ???????? ??? ?????? ??? ???????? ??? ??? ???????? ??????

CSS rule: ???????? ???? ????????? ??? ??? ???????

?????: ??? ?? ??????? ???? ?? ????? ?? ???????? ???? ???? ??? post. ?? ??????? ??? ??????? ?? ?????????? ????? ?????? ?? ????? ??????????? ??? ??????????? ??????? ??? ?? ?????? ??? ?????? ????? ?? ???????? ????.

??? ??????? quote ??? ?? ??????? In Defense of Readers ??? ???????????? ??? ???????? A List Apart:

If you want your users to skim the page, then by all means, fill the sidebar with content all the way down. But if you want them to read—if the page was written and not merely filled up, if the text consists of carefully crafted prose rather than bullet points—then respect the reading process and move that content elsewhere.

?? ???????? ????? ?? ????????;

???? ???????;

????? ??? ???? ??????? ??? ????? ??????? ???, ?????? ???????? websites ?? ?? ???????? ?? ??????? ???? ?? ?? ?? ??????? ???? ???????? ??????? ??????????? ??? ??? ???????????? ????? ??? CSS ??????. ???? ???? ??? ? ?????? ??? ?? ???????. ???? ??? ????? ???? ??? ?? ????? ???????? websites.

?? ??? ???? ???? ????????????? ?? ?????????? ??????? ??? ?????????????? (???? ?? ???? ???? ?? ???? ??? ??????? ?? ??????? ???? ???????????) websites ??? ????? ?? ?? ???? ????. ??????? ?????? ???? ???????.