<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Seleckis.lv :: журнал Никиты Селецкого &#187; Шрифты</title>
	<atom:link href="http://www.seleckis.lv/category/journal/shrifty/feed" rel="self" type="application/rss+xml" />
	<link>http://www.seleckis.lv</link>
	<description></description>
	<lastBuildDate>Tue, 01 Jun 2010 05:46:59 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Мои любимые шрифты: Academy</title>
		<link>http://www.seleckis.lv/journal/shrifty/moi-lyubimyie-shriftyi-academy</link>
		<comments>http://www.seleckis.lv/journal/shrifty/moi-lyubimyie-shriftyi-academy#comments</comments>
		<pubDate>Mon, 24 Nov 2008 22:09:18 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://seleckis.lv/?p=1418</guid>
		<description><![CDATA[Открываю цикл о моих любимых шрифтах и первый антиквенный шрифт типа «Кларендон», о котором я хотел бы вам рассказать это:

Гарнитура «Academy» была создана где-то в 1910 году в мастерской Бертольда (Санкт-Петербург), а оцифрована в бюро Полиграфмаш в 1989 году.
Я пользуюсь версией от Atech Software. Но погуглив, я не нашел такую компанию, а лишь старые новости [...]]]></description>
			<content:encoded><![CDATA[<p>Открываю цикл о моих любимых шрифтах и первый антиквенный шрифт типа «Кларендон», о котором я хотел бы вам рассказать это:</p>
<p style="text-align: center;"><img class="size-full wp-image-1433 aligncenter" title="academy" src="http://seleckis.lv/wp-content/uploads/2008/11/academy.png" alt="" width="328" height="88" /></p>
<p>Гарнитура «Academy» была создана где-то в 1910 году в мастерской Бертольда (Санкт-Петербург), а оцифрована в бюро Полиграфмаш в 1989 году.</p>
<p>Я пользуюсь версией от <strong>Atech Software.</strong> Но погуглив, я не нашел такую компанию, а лишь старые новости от 1992 года. Возможно её уже не существует или в начале 90‑х она была поглощена каким-нибудь монстром на подобие <strong><a href="http://linotype.com">LinoType</a></strong><strong>.</strong></p>
<p>Изначально у меня был (не помню откуда взял) шрифт «Academia» от компании <strong>!22! Soft,</strong> но он не поддерживал кириллицу и был только прямой светлый. По аналогии стал искать похожие шрифты и <a href="http://shkarinav.com/fonts/russkie-shrifty-ttf/">нашел «Academy»</a>.</p>
<p>Кстати компанию <strong>!22! Soft,</strong> которая записана в этом шрифте в поле копирайта я тоже не нашел.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1435" title="academy_eng_example" src="http://seleckis.lv/wp-content/uploads/2008/11/academy_eng_example.png" alt="" width="548" height="485" /></p>
<p>Красивый изящный шрифт с низким контрастом и историческим ароматом, с покатой стилизацией букв «P» и «p», интересным «хвостиком» у строчной «g», а так же своеобразной верхней засечкой у буквы «А». Интересен так же стиль буквы «W», которую собрали из двух букв «V» и «срастили» внутренние засечки. По всем этим характеристикам без труда можно узнать этот шрифт.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1436" title="academy_rus" src="http://seleckis.lv/wp-content/uploads/2008/11/academy_rus.png" alt="" width="374" height="82" /></p>
<p>В версии от <strong>Atech</strong> таблица символов у «Academy» не очень большая и Юникод он не поддерживает, но в любом случае в полной мере поддерживается кириллица (как русский, так украинский и белорусский алфавиты).</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1437" title="academy_rus_example" src="http://seleckis.lv/wp-content/uploads/2008/11/academy_rus_example.png" alt="" width="566" height="407" /></p>
<p>В русском алфавите, кроме похожих на латиницу аналогов букв «Р», «р» и «А», так же рекомендую обратить внимание на изящные изгибы букв «Д», «Л» и «К», шикарность буквы «Ж», петельку буквы «З» (которая кстати <a href="http://eldesign.ru/sreda/2007/0530/">по мнению Александра Ширышева</a> именно этим элементом должна отличаться от цифры «3»), акцент у «Й», изящные «хвостики» букв «Ц» и «Щ», а так же языкообразный промежуточный элемент у буквы «э». У строчных букв элементы стиля так же повторяются.</p>
<p>Характерно для<strong> Academy</strong> так же уменьшение ширины пробела от запятой до следующего слова.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1438" title="academy_numbers" src="http://seleckis.lv/wp-content/uploads/2008/11/academy_numbers.png" alt="" width="293" height="53" /></p>
<p>Цифры простые и изящные. Без каких-либо изысков.</p>
<p>Шрифт уместно использовать как для заголовков, так и для основного текста, будь-то буклет или плакат. Так же, видим весьма широкий горизонт для полета фантазии при создании логотипа.</p>
<p>Конечно же, не для любого случая может подойти этот шрифт. Как понятно из названия, гарнитура актуальна для чего-то академического, шикарного, интеллигентного и дорогого.</p>
<p>Свои версии так же имеют как <strong><a href="http://www.linotype.com/339967/academy-family.html">LinoType</a>,</strong> так и <strong><a href="http://www.paratype.com/pstore/default.asp?fcode=PT_ACD&amp;letter=A">ParaType</a>.</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/shrifty/moi-lyubimyie-shriftyi-academy/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Reset CSS</title>
		<link>http://www.seleckis.lv/journal/css/reset-css</link>
		<comments>http://www.seleckis.lv/journal/css/reset-css#comments</comments>
		<pubDate>Mon, 26 May 2008 12:09:27 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://seleckis.lv/journal/css/reset-css</guid>
		<description><![CDATA[Написал свой Reset, который буду использовать в web-проектах. Конечно по мере исследований он будет дополняться. Раньше использовал известный ресет Эрика Мейера.
Итак:

html,body,address,blockquote,div,p,pre,h1,h2,h3,h4,h5,h6,hr,	/* блочные элементы */
dd,dl,dt,ul,ol,li,						/* списки */
a,abbr,acronym,b,big,br,cite,code,del,dfn,em,i,			/* строчные элементы */
ins,kbd,q,samp,small,span,strong,sub,sup,tt,var,		/* строчные элементы */
img,object,							/* картинки и объекты */
caption,table,tbody,td,tfoot,th,thead,tr,			/* табличные элементы */
input,textarea,select,button,form,fieldset,legend,label,	/* элементы формы */
u,font,s,center,dir,menu,strike,xmp				/* устаревшие элементы */
&#123;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	text-align: left;
	text-indent: 0;
	font: normal 13px/20px &#34;Lucida Grande&#34;,&#34;Lucida Sans [...]]]></description>
			<content:encoded><![CDATA[<p>Написал свой Reset, который буду использовать в web-проектах. Конечно по мере исследований он будет дополняться. Раньше использовал известный <a href="http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/">ресет Эрика Мейера</a>.</p>
<p>Итак:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">html<span style="color: #00AA00;">,</span>body<span style="color: #00AA00;">,</span>address<span style="color: #00AA00;">,</span>blockquote<span style="color: #00AA00;">,</span>div<span style="color: #00AA00;">,</span>p<span style="color: #00AA00;">,</span>pre<span style="color: #00AA00;">,</span>h1<span style="color: #00AA00;">,</span>h2<span style="color: #00AA00;">,</span>h3<span style="color: #00AA00;">,</span>h4<span style="color: #00AA00;">,</span>h5<span style="color: #00AA00;">,</span>h6<span style="color: #00AA00;">,</span>hr<span style="color: #00AA00;">,</span>	<span style="color: #808080; font-style: italic;">/* блочные элементы */</span>
dd<span style="color: #00AA00;">,</span>dl<span style="color: #00AA00;">,</span>dt<span style="color: #00AA00;">,</span>ul<span style="color: #00AA00;">,</span>ol<span style="color: #00AA00;">,</span>li<span style="color: #00AA00;">,</span>						<span style="color: #808080; font-style: italic;">/* списки */</span>
a<span style="color: #00AA00;">,</span>abbr<span style="color: #00AA00;">,</span>acronym<span style="color: #00AA00;">,</span>b<span style="color: #00AA00;">,</span>big<span style="color: #00AA00;">,</span>br<span style="color: #00AA00;">,</span>cite<span style="color: #00AA00;">,</span>code<span style="color: #00AA00;">,</span>del<span style="color: #00AA00;">,</span>dfn<span style="color: #00AA00;">,</span>em<span style="color: #00AA00;">,</span>i<span style="color: #00AA00;">,</span>			<span style="color: #808080; font-style: italic;">/* строчные элементы */</span>
ins<span style="color: #00AA00;">,</span>kbd<span style="color: #00AA00;">,</span>q<span style="color: #00AA00;">,</span>samp<span style="color: #00AA00;">,</span>small<span style="color: #00AA00;">,</span>span<span style="color: #00AA00;">,</span>strong<span style="color: #00AA00;">,</span>sub<span style="color: #00AA00;">,</span>sup<span style="color: #00AA00;">,</span>tt<span style="color: #00AA00;">,</span>var<span style="color: #00AA00;">,</span>		<span style="color: #808080; font-style: italic;">/* строчные элементы */</span>
img<span style="color: #00AA00;">,</span>object<span style="color: #00AA00;">,</span>							<span style="color: #808080; font-style: italic;">/* картинки и объекты */</span>
caption<span style="color: #00AA00;">,</span>table<span style="color: #00AA00;">,</span>tbody<span style="color: #00AA00;">,</span>td<span style="color: #00AA00;">,</span>tfoot<span style="color: #00AA00;">,</span>th<span style="color: #00AA00;">,</span>thead<span style="color: #00AA00;">,</span>tr<span style="color: #00AA00;">,</span>			<span style="color: #808080; font-style: italic;">/* табличные элементы */</span>
input<span style="color: #00AA00;">,</span>textarea<span style="color: #00AA00;">,</span>select<span style="color: #00AA00;">,</span>button<span style="color: #00AA00;">,</span>form<span style="color: #00AA00;">,</span>fieldset<span style="color: #00AA00;">,</span>legend<span style="color: #00AA00;">,</span>label<span style="color: #00AA00;">,</span>	<span style="color: #808080; font-style: italic;">/* элементы формы */</span>
u<span style="color: #00AA00;">,</span><span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">,</span>s<span style="color: #00AA00;">,</span><span style="color: #993333;">center</span><span style="color: #00AA00;">,</span>dir<span style="color: #00AA00;">,</span>menu<span style="color: #00AA00;">,</span>strike<span style="color: #00AA00;">,</span>xmp				<span style="color: #808080; font-style: italic;">/* устаревшие элементы */</span>
<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">baseline</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">text-indent</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span> <span style="color: #933;">13px</span>/<span style="color: #933;">20px</span> <span style="color: #ff0000;">&quot;Lucida Grande&quot;</span><span style="color: #00AA00;">,</span><span style="color: #ff0000;">&quot;Lucida Sans Unicode&quot;</span><span style="color: #00AA00;">,</span>Lucida<span style="color: #00AA00;">,</span>arial<span style="color: #00AA00;">,</span><span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">list-style-type</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Ну это стандартно, частично взято у Эрика. Перечисляются все возможные тэги. Первые пять строчек, я думаю понятны.</p>
<p>Шрифт я указываю явный, причём в пикселях. Я никогда не использовал em или проценты и долго терзал себя мыслью, что бедные, несчастные пользователи IE6 не смогут увеличить размер шрифта, а я такой нехороший не даю им такой возможности.</p>
<p>С некоторых пор я перестал комплексовать и больше не волнуюсь за пользователей IE6. Пусть сами за себя волнуются. Начнём с того, что если пользователи Недобраузера не могут поставить себе другой, более удобный и современный браузер, то я сомневаюсь в том, что они умеют в нём менять размер шрифта. Они будут щуриться, придвигаться поближе к монитору. Тем более, что в IE6 для этого нет горячих клавиш.</p>
<p>Совсем мои волнения угасли после прочтения статьи <a href="http://alistapart.com/articles/settingtypeontheweb">Setting Type on the Web to a Baseline Grid</a>, а точнее её перевода <a href="http://designformasters.info/posts/baseline-grid/">Базовая сетка в веб дизайне</a>.</p>
<blockquote cite="http://alistapart.com/articles/settingtypeontheweb"><p>
At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.</p></blockquote>
<p>И, собственно, перевод:</p>
<blockquote cite="http://designformasters.info/posts/baseline-grid"><p>
С другой точки зрения как дизайнеры мы должны стремиться к балансу между четкой вплоть до пикселя разметкой, и бесконечной гибкостью. Изменяемый размер шрифтов это элемент аксессибилити, а не дизайна, в идеале он должен поддерживаться браузером, не зависимо от того, как сделана страница, и многие современные браузеры так и поступают.
</p></blockquote>
<p>Использование шрифта Lucida Grande обусловленно переходом на MacOS и прочтением <a href="http://habrahabr.ru/blog/typography/42685.html">серии статей о веб-типографике</a>. Не волнуйтесь в IE6 он тоже замечательно отображается, правда только если размер больше 11px, ведь IE6 не умеет сглаживать шрифты, если это не включено для всей системы.</p>
<p>Lucida Sans Unicode — стандартный шрифт в Windows, который особо не используется, но по характеристикам схож с Lucida Grande. Затем идёт nix-овая версия Lucida. Ну а в случае если все три шрифта в системе не найдены, их заменит Arial или любой другой шрифт без засечек.</p>
<p>На самом деле, этот пункт самый настраиваемый в зависимости от проекта.</p>
<p>Идём дальше.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">applet<span style="color: #00AA00;">,</span>iframe<span style="color: #00AA00;">,</span><span style="color: #993333;">embed</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Убираю с глаз долой устаревшие и нестандартные элементы.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">hr<span style="color: #00AA00;">,</span>img<span style="color: #00AA00;">,</span>object <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Границу убираю только у приведённых элементов. Элементы формы я, как видите, не трогаю, поскольку лучше все контролы оставить родными для браузера, чем устраивать на сайте винегрет. Например, поля ввода и кнопки можно стилизовать под сайт, а radio, checkbox, select, textarea, не получится. Если нужно стилизовать, например, поле для поиска, то лучше с ним работать отдельно.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">input<span style="color: #00AA00;">,</span>button<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">visible</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Убрали лишние внутренние отступы у кнопок в IE.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">input<span style="color: #00AA00;">,</span>select<span style="color: #00AA00;">,</span>button <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">middle</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Это сделано для того, чтобы все элементы формы, располагались по центру строки, а не скакали в разных браузерах на разных уровнях.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">textarea <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>А, поскольку высота textarea обычно больше одной строки, то пусть лучше он позиционируется по верху строки, тогда лейбл для этого поля всегда будет сверху.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">select<span style="color: #00AA00;">&#91;</span><span style="color: #000000; font-weight: bold;">size</span><span style="color: #00AA00;">&#93;</span><span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
select<span style="color: #00AA00;">&#91;</span><span style="color: #000000; font-weight: bold;">size</span><span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;1&quot;</span><span style="color: #00AA00;">&#93;</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">middle</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>А вот здесь применена небольшая хитрость. Поскольку select может быть как высотой в одну строку, так и больше, то нужно всем селектам имеющим атрибут size установить вертикальное позиционирование по верху. Ну а если какой-то селект имеет атрибут size, но его значение равно 1, т. е. его высота будет равна строке, то я возвращаю ему позиционирование посередине. К сожалению, в IE6 это не работает.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">fieldset legend <span style="color: #00AA00;">&#123;</span>
	<span style="color: #00AA00;">*</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-7px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Нет я не использую хаки, просто для наглядности и чтоб покороче. Вставляйте в свой IE6-7.css (наверняка что-то подобное у вас есть) и инклудируйте с помощью Conditional Comments. У IE8 какое-то странное отображение legend, так что для него я ничего не делал.</p>
<p>Вообще у IE8 какое-то своё представление о vertical-align: middle для элементов формы. Такое ощущение, что по центру строки позиционируется базовая линия элемента формы, а не весь элемент.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">caption<span style="color: #00AA00;">,</span>td<span style="color: #00AA00;">,</span>th<span style="color: #00AA00;">,</span>tr <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
table <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">collapse</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Здесь думаю понятно.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">optgroup <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">white</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
optgroup option <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">22px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>При использовании optgroup в Опере, почему-то у него чёрный фон и белые буквы. Исправляем этот бред.<br />
Убрать курсивное начертание удаётся только у Firefox. Это единственный браузер с настраиваемыми шрифтами и отступами в optgroup. Соответственно только для Firefox будет работать отступ в 22px (больше всего похожий на отступ в других браузерах).</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">hr <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">7px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #00AA00;">*</span><span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Об этом я писал в <a href="http://seleckis.lv/journal/css/gorizontalnyiy-razdelitel-lt-hr-gt">предыдущей статье</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">ol li<span style="color: #00AA00;">,</span> ul li<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Заранее исправляем баг в IE если внутри элементов списка будут содержаться элементы с «display: block».</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">ol li<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">list-style-type</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">decimal</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
ul li<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">list-style-type</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">disc</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Тоже понятно.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">q <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">quotes</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\0</span>0AB'</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\0</span>0BB'</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\2</span>01E'</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\2</span>01C'</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
q<span style="color: #3333ff;">:before	</span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\0</span>0AB'</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
q<span style="color: #3333ff;">:after		</span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\0</span>0BB'</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
q q<span style="color: #3333ff;">:before	</span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\2</span>01E'</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
q q<span style="color: #3333ff;">:after	</span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">'<span style="color: #000099; font-weight: bold;">\2</span>01C'</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Русские кавычки внешние и внутренние. Причём в дублированном виде, поскольку Safari перезаписывает quotes, с помощью q:before и q:after.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">sub<span style="color: #00AA00;">,</span> sup<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">11px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
sub<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>	
<span style="color: #00AA00;">&#125;</span>
sup<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Этот метод позиционирования верхнего и нижнего индексов, на мой взгляд наиболее удобен, поскольку не будет происходить сдвига верхней и нижней строки.</p>
<p>Всё больше и больше убеждаюсь, что для каждого верстальщика и для каждого проекта reset будет свой. Что-то можно взять за основу, но по ходу дела и с накоплением опыта всё будет изменяться.</p>
<p><a href='http://seleckis.lv/wp-content/uploads/2008/05/ns_resetcss.zip' title=''>Мой ресет одним файлом</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/css/reset-css/feed</wfw:commentRss>
		<slash:comments>40</slash:comments>
		</item>
		<item>
		<title>Русские кавычки в русских шрифтах</title>
		<link>http://www.seleckis.lv/journal/shrifty/russkie-kavyichki-v-russkih-shriftah</link>
		<comments>http://www.seleckis.lv/journal/shrifty/russkie-kavyichki-v-russkih-shriftah#comments</comments>
		<pubDate>Fri, 04 Apr 2008 09:53:42 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://www.seleckis.lv/journal/shrifty/russkie-kavyichki-v-russkih-shriftah</guid>
		<description><![CDATA[Обратил внимание на то, что во всех русских шрифтах (Lazurski, Kudrashov, Petersburg, Antiqua, CollegePSCyr) типографские кавычки («ёлочки») имеют следующий вид:

То есть внешний уголок больше внутреннего, в отличие от нерусских шрифтов (Times New Roman, Georgia, Century Schoolbook, Book Antiqua, Garamond и др.), которые их упрощают и делают уголки одинаковыми.

Отвратительно выглядит!
]]></description>
			<content:encoded><![CDATA[<p>Обратил внимание на то, что во всех русских шрифтах (Lazurski, Kudrashov, Petersburg, Antiqua, CollegePSCyr) типографские кавычки («ёлочки») имеют следующий вид:</p>
<p style="text-align: center"><img src='http://www.seleckis.lv/wp-content/uploads/2008/04/petersburg.png' alt='' /></p>
<p>То есть <strong>внешний уголок больше внутреннего,</strong> в отличие от нерусских шрифтов (Times New Roman, Georgia, Century Schoolbook, Book Antiqua, Garamond и др.), которые их упрощают и делают уголки одинаковыми.</p>
<p style="text-align: center"><img src='http://www.seleckis.lv/wp-content/uploads/2008/04/garamond.png' alt='' /></p>
<p>Отвратительно выглядит!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/shrifty/russkie-kavyichki-v-russkih-shriftah/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Дизайн текста 1: Основной текст, заголовки, таблицы.</title>
		<link>http://www.seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi</link>
		<comments>http://www.seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi#comments</comments>
		<pubDate>Thu, 28 Feb 2008 22:02:38 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[Веб‑дизайн]]></category>
		<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://www.seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi</guid>
		<description><![CDATA[Очень часто, нарисовав страницу, начинающие дизайнеры на этом останавливаются и считают работу законченной. Это, конечно, так, но только в том случае, если заказана одна страница. Если сделан заказ на дизайн всего сайта, то нужно всегда помнить о том, что на страницах может быть содержимое любого рода, начиная от шести уровней заголовков заканчивая врезками и плашками.
В [...]]]></description>
			<content:encoded><![CDATA[<p>Очень часто, нарисовав страницу, начинающие дизайнеры на этом останавливаются и считают работу законченной. Это, конечно, так, но только в том случае, если заказана одна страница. Если сделан заказ на дизайн всего сайта, то нужно всегда помнить о том, что на страницах может быть содержимое любого рода, начиная от шести уровней заголовков заканчивая врезками и плашками.</p>
<p>В этом случае, особо стоит уделить внимание не только элементам существующим в HTML по-умолчанию, но и дополнительным элементам необходимым для веб-мастера (того самого который будет размещать содержимое на страницу).</p>
<p>Допустим, что уже подобраны основные цвета сайта, стилизация графических элементов. Теперь нужно разобраться с текстом.</p>
<h3>0. Основной текст.</h3>
<p>Элементы контента на странице должны иметь единый стиль оформления, чтобы страница была адекватно воспринимаема и легко читабельна. Это касается в основном шрифта и цветов, но и отступы не исключение. Размер шрифта должен быть достаточно большой, а если требуется использовать маленький шрифт, то обязательно стоит предусмотреть возможность изменения его размера, например, использование em вместо px для указания размера шрифта в вёрстке (IE6 не умеет изменять размер шрифта если он указан в пикселях, остальные браузеры с этим справляются).</p>
<p>Есть мнение, что рубленый шрифт (без засечек) более читаем с экрана, чем шрифт с засечками (не говоря уже о декоративных шрифтах). Соглашусь, с некоторыми оговорками. Если шрифт мелкий, то стоит использовать шрифт без засечек:</p>
<table border="0" cellspacing="2" cellpadding="1" width="450">
<tbody>
<tr>
<th style="text-align: center; width: 150px;"><strong>Windows</strong></th>
<th style="text-align: center; width: 150px;"><strong>Mac OS</strong></th>
<th style="text-align: center; width: 150px;"><strong>Unix/Linux</strong></th>
</tr>
<tr>
<td>Arial<br />
Arial Black<br />
Impact<br />
Lucida Sans Unicode<br />
MS Sans Serif<br />
Tahoma<br />
Trebuchet MS<br />
Verdana</td>
<td>Charcoal<br />
Gadget<br />
Geneva<br />
Helvetica<br />
Lucida Grande</td>
<td>Bitstream Vera Sans<br />
Lucida<br />
Luxi Sans<br />
URW Gothic L</td>
</tr>
</tbody>
</table>
<p>Если шрифт большой (например, заголовок), то можно использовать шрифт с засечками, который будет выглядеть гораздо изящнее.</p>
<table border="0" cellspacing="2" cellpadding="1" width="450">
<tbody>
<tr>
<th style="text-align: center; width: 150px;"><strong>Windows</strong></th>
<th style="text-align: center; width: 150px;"><strong>Mac OS</strong></th>
<th style="text-align: center; width: 150px;"><strong>Unix/Linux</strong></th>
</tr>
<tr>
<td>Times New Roman<br />
Georgia<br />
Palatino Linotype<br />
Sylfaen<br />
Bookman Old Style<br />
Book Antiqua<br />
Garamond</td>
<td>Times<br />
Palatino<br />
Gill Sans<br />
Lucida Bright<br />
Baskerville</td>
<td>Century Schoolbook L<br />
URW Bookman L<br />
URW Palladio L<br />
Nimbus Roman No9 L<br />
Bitstream Vera Serif<br />
Utopia</td>
</tr>
</tbody>
</table>
<p>Всё, конечно, зависит от стиля дизайна сайта. К слову, рекомендую почитать следующие статьи: <a rel="nofollow" href="http://seleckis.lv/journal/shrifty/kak-vyibrat-shrift-dlya-web-sayta">Как выбрать шрифт для Web-сайта</a> и <a rel="nofollow" href="http://seleckis.lv/journal/web-dizayn/kak-vyibrat-shrift-dlya-web-sayta-2-serif-i-monotype">Как выбрать шрифт для Web-сайта 2: serif и monotype</a>.</p>
<h3><strong>1. Заголовки</strong></h3>
<p>Существуют 6 уровней заголовков, которыми не стоит пренебрегать, ведь очень часто электронный документ (в данном случае веб-сайт) может быть многоуровневым и все уровни заголовков могут быть востребованы. Хотя использование всего «спектра» заголовков может привести к тому, что пользователь запутается в уровнях. Поэтому трёх уровней заголовков в тексте будет достаточно. Заголовки самых верхних уровней лучше оставить для форматирования заголовочных надписей для различных блоков и заголовка сайта и страницы.</p>
<p>Рекомендую для заголовков самых верхних уровней использовать большого размера шрифт и достаточно контрастный цвет. Спускаясь по уровню заголовков постепенно снижайте их яркость приближаясь к цвету основного текста. Делается это для того, чтобы мелкие заголовки были более читаемы. Например, если зелёный цвет один из основных цветов на сайте, то рекомендую в графическом редакторе изобразить градиент, где с одной стороны будет располагаться ваш зелёный цвет, а с другой стороны — цвет основного текста.</p>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/headers.png" alt="" /></p>
<p>Дело в том, что чем ярче и светлее цвет текста, тем он меньше контрастирует со светлым фоном. Для заголовков верхнего уровня яркость шрифта, а стало быть его низкая цветовая контрастность компенсируется их размером и контрастом формы. По мере уменьшения размера, уменьшается контраст формы, а стало быть уменьшается удобочитаемость, поэтому следует это компенсировать контрастом цвета, т. е. цвет заголовков делать более тёмным.</p>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/header2.png" alt="" /></p>
<p>Пример, отлично иллюстрирует, сказанное.</p>
<p>Если стиль сайта подразумевает использование нескольких цветов, то можно их взять, расположить в порядке яркости и применить для заголовков. Но не стоит перебарщивать. Разные оттенки одного цвета допустимы. Но если вы будете использовать для всех шести заголовков разные по спектру цвета, то содержимое будет слишком пёстро оформлено и это будет мешать. Последний шестой заголовок, является заголовком самого низкого уровня и, в принципе, может даже не отличаться от основного текста ни цветом, ни размером. Можно просто сделать его жирным.</p>
<h3>2. Размеры</h3>
<p>Размеры заголовков и текстовых блоков должны быть рассчитаны так, чтобы, во-первых, заголовки разного уровня были легко отличимы, т. е. различия должны быть на столько контрастны на сколько это возможно в определённом диапазоне. Но слишком большой контраст размера породит разобщённость элементов — этого следует избегать.</p>
<p>Размер самих блоков текста зависит от размера шрифта. Как правило наиболее удобен для чтения блок текста шириной в 65 символов, поэтому для больших объёмов текста не подходит резиновая вёрстка. Высота абзаца, желательно, не должна превышать 7 строк.</p>
<h3><strong>3. Отступы</strong></h3>
<p>Количество пустого места прямо пропорционально читабельности — это уже достаточно известное правило. Времена <a href="http://km.ru">km.ru</a> прошли (хотя сейчас дизайн слегка улучшен), сейчас наиболее актуален дизайн в так называемом стиле «Web 2.0», который, если не брать во внимание закруглённые углы, глянец, отражения а только форматирование текста, по сути представляет собой наглядный пример того, как должен выглядеть удобный для чтения сайт.</p>
<p>Почему раньше были сайты похожие на <a href="http://www.zvuki.ru">zvuki.ru</a>? Всё очень просто. Веб-дизайн унаследовал компактную вёрстку от газет и журналов, где каждая страница имела определённую и весьма немаленькую цену. И сейчас в газетах стараются на одну страницу запихнуть как можно больше. По началу в веб-дизайне поступали точно так же.</p>
<h4>Примеры перегруженных сайтов.</h4>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/km-ru.jpg" alt="" /></p>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/zvuki.jpg" alt="" /></p>
<p>Но постепенно, до дизайнеров стало доходить, что пространство на веб-сайте не ограничена, а стало быть можно делать больше отступов. Больше отступов — глазам больше места для отдыха. «Стены текста» и обилие многоколончатых текстовых блоков раздражают глаза.</p>
<p>Стандартная вёрстка 90‑х: 3—6 колонок с небольшими отступами и чёткими разделительными линиями или фонами.</p>
<p>Современная вёрстка: 1—3 колонки с большими отступами и не всегда с очевидными делениями. Очень часто разделение блоков реализуется за счёт больших отступов и/или слабых границ и фонов.</p>
<p>Отступы между текстовыми блоками должны быть соразмерны размерам текстовых блоков (не очень тавтологично получилось?). Т.е. так, чтобы расстояние между текстовыми блоками не отрывало их друг от друга по смыслу.</p>
<h4>Примеры не перегруженных сайтов</h4>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/yahoo-news.jpg" alt="" /></p>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/cnet-news.jpg" alt="" /></p>
<p>Высота строки должна быть не слишком большой, чтобы не спутать её с разделением абзаца и не слишком маленькой, чтобы текст не перестал быть читабельным. Рекомендую пропорцию от 3×2 до 5×3. Например, если размер шрифта равен 12px, то высоту строки можно ставить 18—20 px.</p>
<p>Раньше, в печати, абзацы отделяли красными строками. В печати это допустимо, поскольку с бумаги читать гораздо легче, чем с экрана. В электронных документах для разделения абзацев используют отступы между самими абзацами. Отступы дают возможность легко отличить, где заканчивается абзац, не только в начале строки но и в её конце.</p>
<p>Расстояние между абзацами следует ставить в диапазоне от высоты шрифта до высоты строки. Расстояние должно чётко указывать на разделение абзацев, но не должно совсем разорвать их взаимосвязь.</p>
<p>Расстояние от заголовка и до начала текстового блока должно быть равно расстоянию между абзацами, а расстояние от конца текстового блока до следующего заголовка должно быть примерно в два раза больше, чем расстояние от заголовка до начала текстового блока. Это делается для того, чтобы обозначить принадлежность текста к определённому заголовку. Существующие настройки по-умолчанию во всех браузерах неприемлимы, поскольку они подразумевают равные расстояния от заголовка до другого содержимого сверху и снизу.</p>
<p style="text-align: center;"><img src="http://seleckis.lv/wp-content/uploads/2008/02/header-text-margin.jpg" alt="" /></p>
<h3>4. Таблицы</h3>
<p>Основные свойства таблиц которые не помогают а только мешают воспринимать информацию: вертикальное выравнивание и ужасные рамки. Во-первых вертикальное выравнивание должно быть соответствующим содержимому, содержимое обычных ячеек долно иметь выравнивание по верху, содержимое заголовочных ячеек — по центру. Причём, если в горизонтальных заголовочных ячейках допустимо центрированное горизонтальное выравнивание, то в вертикальных заголовочных ячейках — нет.</p>
<p>Рамку таблицы можно создать двумя способами:</p>
<ol>
<li>Использовать свойство <span style="font-weight: bold;">border</span> и <span style="font-weight: bold;">border-collapse: collapse</span> для таблицы.</li>
<li>Использовать разный фон для таблицы и ячеек таблицы, при этом <span style="font-weight: bold;">border-collapse: separate,</span> а расстояние между ячейками задаётся с помощью <span style="font-weight: bold;">border-spacing.</span></li>
</ol>
<p>Отступы у от границы ячейки до её содержимого должны быть не меньше половины высоты строки абзаца. А текст в заголовочных ячейках всегда должен отличаться либо жирностью, либо размером шрифта.</p>
<p>В идеале, каждая нечётная строка таблицы должна отличаться фоном от чётной строки. Реализацию нужно согласовывать с программистом.</p>
<p>Не стоит так же забывать и про заголовок самой таблицы (тэг &lt;caption&gt;). Кстати, рамка у caption во втором варианте таблицы (с помощью background) выглядит лучше.</p>
<p><a href="http://seleckis.lv/wp-content/uploads/2008/02/markupr1.html">Пример, вёрстки упомянутых в статье элементов.</a></p>
<p><strong><a href="http://seleckis.lv/journal/web-dizayn/dizayn-teksta-2-tsitatyi">Продолжение: Цитаты</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Как выбрать шрифт для Web-сайта 2: serif и monotype</title>
		<link>http://www.seleckis.lv/journal/web-dizayn/kak-vyibrat-shrift-dlya-web-sayta-2-serif-i-monotype</link>
		<comments>http://www.seleckis.lv/journal/web-dizayn/kak-vyibrat-shrift-dlya-web-sayta-2-serif-i-monotype#comments</comments>
		<pubDate>Fri, 02 Nov 2007 10:12:49 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[Веб‑дизайн]]></category>
		<category><![CDATA[Разработка сайтов]]></category>
		<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://www.seleckis.lv/archive/web-dizayn/kak-vyibrat-shrift-dlya-web-sayta-2-serif-i-monotype</guid>
		<description><![CDATA[&#8220;Вебдванольщики&#8221; критикуют шрифты с засечками. Оно и понятно, без засечек на экране буквы легче читаются. Шрифты с засечками предназначены для печати. Скорей всего Лебедев с ними не согласен.
Я соглашусь на половину. Шрифты без засечек прекрасно удобно использовать в качестве шрифта для основного текста, ссылок и всего того, что пишется мелким шрифтом. Шрифты же с засечками [...]]]></description>
			<content:encoded><![CDATA[<p>&#8220;Вебдванольщики&#8221; критикуют шрифты с засечками. Оно и понятно, без засечек на экране буквы легче читаются. Шрифты с засечками предназначены для печати. Скорей всего <a href="http://artlebedev.ru">Лебедев</a> с ними не согласен.</p>
<p>Я соглашусь на половину. <a href="http://seleckis.lv/journal/shrifty/kak-vyibrat-shrift-dlya-web-sayta">Шрифты без засечек прекрасно удобно использовать</a> в качестве шрифта для основного текста, ссылок и всего того, что пишется мелким шрифтом. Шрифты же с засечками удобно использовать для заголовков. Причём как прописные так и строчные буквы.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/11/serif.jpg" /></p>
<p>Первые два заголовка (<em>Arial, Trebuchet MS</em>) выглядят очень топорно. Последние два (<em>Times New Roman, Georgia</em>) — более эффектно и приятно. Нет эффекта громоздкости.</p>
<p><strong>Не рекомендую: </strong> выделять заголовки жирным шрифтом. Жирный шрифт предназначен для выделения какой-то части текста, чтобы акцентировать на нём внимание читателей. Заголовки от текста должны отличаться размером. Заголовки большого размера выделенные жирным шрифтом выглядят размазано, занимают много места и производят перевешивающий эффект.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/11/serif0.jpg" /></p>
<p>Конечно, существуют заголовки более низких уровней, которые могут совсем не на много отличаться от текста или даже писаться тем же размером шрифта. В этом случае не нужно использовать шрифт с засечками и стоит выделять их жирным шрифтом.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/11/serif1.jpg" /></p>
<p>Конечно, я не призываю к однозначности, но при выборе шрифта для заголовка стоит согласовать это с общим дизайном сайта.</p>
<p>Кстати, английским шрифтом заголовки гораздо лучше смотрятся, но это уже проблема нашей кириллицы. Будем надеяться, что она в конце концов дойдёт до совершенства в типографском плане.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/11/serif2.jpg" /></p>
<h3>Monotype</h3>
<p>Моноширинные шрифты на сайтах должны использоваться для вывода исходного кода программ, для показа ввода с клавиатуры, иногда для ввода текста в textarea. Это я не говорю о сайтах  специфического плана и стиля (например, блог bash-программиста или какой-то хаккерский портал).  Там это допустимо, хотя и не читабельно.</p>
<h3>Напоследок</h3>
<p>Хочу порекомендовать дизайнерам и верстальщикам, при разработке дизайна комментариев на блоге или в новостях, необходимо учитывать ширину текстового поля для ввода комментариев и шрифт используемый в нём. Комментирующему всегда гораздо удобнее ориентироваться по реальным размерам колонки комментариев. Где-то нужно перенести текст, например, чтоб ссылка была без переноса, где-то нужно что-то разметить, например цитату или код. Если шрифт в текстовом поле будет отличаться от того, который используется для отображения комментариев, то эффект выравнивания комментария может быть весьма неожиданным и не всегда пользователь отнесётся к этому равнодушно.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/11/serif4.jpg" /></p>
<p>Ничего более быстрого не нашёл, как взять пример с моего блога.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/11/serif3.jpg" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/web-dizayn/kak-vyibrat-shrift-dlya-web-sayta-2-serif-i-monotype/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Как выбрать шрифт для Web-сайта</title>
		<link>http://www.seleckis.lv/journal/shrifty/kak-vyibrat-shrift-dlya-web-sayta</link>
		<comments>http://www.seleckis.lv/journal/shrifty/kak-vyibrat-shrift-dlya-web-sayta#comments</comments>
		<pubDate>Mon, 29 Oct 2007 12:24:07 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://www.seleckis.lv/journal/shrifty/kak-vyibrat-shrift-dlya-web-sayta</guid>
		<description><![CDATA[Выбор шрифтов — ответственный момент. Конечно выбором шрифта для элементов дизайна сайта, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.
Немного терминологии:

Вообще понятие шрифта я так и буду называть шрифтом.
Font-family, т.е. название шрифта я буду называть фонтом.

Начнём с Photoshop&#8217;а
В Adobe Photoshop в настройке шрифтов есть опция Anti-aliasing (Сглаживание). Среди элементов дизайна [...]]]></description>
			<content:encoded><![CDATA[<p>Выбор шрифтов — ответственный момент. Конечно выбором шрифта для элементов дизайна сайта, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.</p>
<p><strong>Немного терминологии:</strong></p>
<ul>
<li>Вообще понятие шрифта я так и буду называть шрифтом.</li>
<li>Font-family, т.е. название шрифта я буду называть фонтом.</li>
</ul>
<h3>Начнём с Photoshop&#8217;а</h3>
<p>В Adobe Photoshop в настройке шрифтов есть опция Anti-aliasing (Сглаживание). Среди элементов дизайна часто попадаются графические надписи, что весьма логично. Но если надписи планируется вставлять в web-страницу как текст, а не как картинку, то следует отключать Anti-aliasing. По-умолчанию, в Windows сглаживание шрифтов включено и установлена опция Standart. Если размер шрифта больше 18px (у некоторых шрифтов от 17px), например, это могут быть заголовки, то Anti-aliasing можно в photoshop&#8217;е включить. Рекомендую ставить Sharp — это сглаживание, больше всего похоже на стандартное сглаживание в OS.</p>
<p><span id="more-935"></span></p>
<p>В браузерах Safari и Internet Explorer 7, сглаживание шрифтов работает по умолчанию, причём для всех шрифтов и маленьких и больших. Во всех остальных браузерах, как я уже сказал сглаживание шрифта начинается с размера 17-18px. Значит у большинства браузеров мелкий текст будет отображаться без сглаживания.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/10/antialiasing.png" /></p>
<p>В данном примере, в разработке макета сайта, нам нужно использовать левый заголовок и правый текстовой блок.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/10/antialiasing1.png" /></p>
<h3>Выбор шрифта</h3>
<p>Выбор зависит от следующих факторов:</p>
<ol>
<li>гарнитура (засечки)</li>
<li>высота строчных букв</li>
<li>расстояние между буквами</li>
<li>ширина букв</li>
<li>неперфорированное расстояние (внутри буквы)</li>
</ol>
<p>С засечками всё понятно, они предназначены для распечатки текста и хороши для чтения с бумаги. Поэтому первый пункт можно отбросить.</p>
<p>Пример со шрифтом Trebuchet MS.</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/10/goodfont.png" /></p>
<p>Логично, что чем более оптимально соотношение перечисленных параметров, тем читабельней текст.</p>
<p>Теперь посмотрим на основные шрифты используемые в Web-дизайне:</p>
<p style="text-align: center"><img src="http://seleckis.lv/wp-content/uploads/2007/10/webfonts.png" /></p>
<p>Что из этого мы можем увидеть?</p>
<ul>
<li>Tahoma очень компактный шрифт с буквами средней ширины, хорош для каких-то технических вещей.</li>
<li>Шрифт Verdana очень подходит для текста и имеет хорошую читаемость за счёт ширины букв и расстояния между буквами.</li>
<li>Arial имеет свои преимущества в читабельности за счёт высоты букв, но минус, за счёт излишней компактности.</li>
<li>Trebuchet MS отличный шрифт, отличающийся хорошо сбалансированными параметрами. (моя рекомендация)</li>
<li>Bitstream Vera Sans я добавил лишь для того чтобы вы посмотрели на кошмар выдаваемый этим шрифтом, а он является основным Linux шрифтом. Lucida Sans — основной Mac шрифт, тоже не блещет аккуратностью. Но беспокоиться не о чем, поскольку в MacOS и во всех современных Unix и Linux дистрибутивах anti-aliasing включён по-умолчанию, что весьма улучшает вид шрифта. Но всё равно не нужно забывать о соответствии: Bitstream Vera Sans больше похож на Verdana и Trebuchet MS, А Lucida Sans — на Arial. Не забудьте прописать это в CSS до sans-serif.</li>
<li>Не добавил Helvetica — идентичный Arial шрифт в MacOS, с некоторыми нюансами. Просто его у меня нет.</li>
</ul>
<p>Стандартные и наиболее оптимальные размеры шрифта для отображения текста на web-сайтах — 11-16, в зависимости от фонта. Если текст написанный Verdana или Tahoma, с размером 11px читать ещё удобно, то Arial уже рябит в глазах. Всё зависит от восприятия. Чтобы выбрать правильно шрифт, напишите текст всеми возможными шрифтами и сравните чисто визуально, поиграйтесь размерами и расстояниями между букв и слов (<a href="http://www.artlebedev.ru/kovodstvo/142/" target="_blank">чтобы там Лебедев не говорил</a>).</p>
<p>Хочу так же отметить шрифты:</p>
<ul>
<li>Calibri — MS Office шрифт, очень красивый на мой взгляд, но предназначенный для отображения с ClearType сглаживанием, и не очень мелким размером</li>
<li>Chianti WGL4 BT, Corbel (anti-aliased), Zurich WGL4 BT — приятно читается когда сглажен и размер от 14 px</li>
<li>Encyclopaedia (anti-aliased) — отличный шрифт, если сглажен, то похож на Trebuchet MS только пошире и расстояния между буквами побольше</li>
<li>Franklin Gothic Medium 13px очень похож на Arial 12px — можно использовать как альтернативу</li>
<li>Hunky Sans (anti-aliased) — отличный и читаемый шрифт со сглаживанием</li>
<li>MS Reference Sans Serif — немного обработанный шрифт Verdana</li>
<li>MS Sans Serif — тоже не плохой шрифт, что-то среднее между Arial и Verdana</li>
<li>PragmaticaCTT — похож на Trebuchet MS с некоторыми коллизиями.</li>
<li>Segoe UI (anti-aliased) — стандартный Vista шрифт, не идеал, но можно использовать (только сглаженный)</li>
<li>Vanta Light (anti-aliased) — отличнейший шрифт. Очень хорошо читается даже в маленьком размере.</li>
</ul>
<p>Так же уделите внимание высоте строки. Зачастую &#8220;стена&#8221; текста менее читабельна нежели слегка увеличенное расстояние между строками.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/shrifty/kak-vyibrat-shrift-dlya-web-sayta/feed</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
		<item>
		<title>Linotype FontExplorer X</title>
		<link>http://www.seleckis.lv/journal/shrifty/linotype-fontexplorer-x</link>
		<comments>http://www.seleckis.lv/journal/shrifty/linotype-fontexplorer-x#comments</comments>
		<pubDate>Thu, 16 Aug 2007 06:56:20 +0000</pubDate>
		<dc:creator>Никита</dc:creator>
				<category><![CDATA[Шрифты]]></category>

		<guid isPermaLink="false">http://www.seleckis.lv/journal/shrifty/linotype-fontexplorer-x</guid>
		<description><![CDATA[
Очень понравилась програмка, но к сожалению не прижилась.
Во-первых, удалять шрифты из списка очень трудоёмко, поскольку после каждого удаления, каждого шрифта программа вылетает.
Во-вторых стали глючить системные шрифты. Заменяться на какие-то ужасные и размазанные буквы. Это началось после пару заходов с рабочего компьютера на домашний через Remote Desktop.
Удалив программу на рабочем копьютере &#8211; всё восстановилось. На домашнем [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src='http://www.seleckis.lv/wp-content/uploads/2007/08/fontexlogo.gif' alt='fontexlogo.gif' /></p>
<p>Очень понравилась програмка, но к сожалению не прижилась.</p>
<p><img src='http://www.seleckis.lv/wp-content/uploads/2007/08/built_img_d20674i9.gif' alt='built_img_d20674i9.gif' class="right" /><strong>Во-первых</strong>, удалять шрифты из списка очень трудоёмко, поскольку после каждого удаления, каждого шрифта программа вылетает.</p>
<p><strong>Во-вторых</strong> стали глючить системные шрифты. Заменяться на какие-то ужасные и размазанные буквы. Это началось после пару заходов с рабочего компьютера на домашний через Remote Desktop.</p>
<p>Удалив программу на рабочем копьютере &#8211; всё восстановилось. На домашнем &#8211; нет. Пришлось включить System Restore и рестартануться. Восстановились самые базовые системные шрифты, но остальные видимо нужно перерегистрировать. Перенёс их все (ок. 1600 шт.) в другую папку и попробовал заново закинуть в папку Fonts. Они тупо копируются. Не знаю в чём дело. Но устанавливаться они не хотят. Что ж &#8211; Windows Install CD -> Repair Widows. Может быть поможет.</p>
<p>Жаль. Очень жаль, что програмка не прижилась. Видимо, чтобы нормально пользоваться хорошей программой, нужно покупать Мак. Против чего я в принципе не возражаю. Просто пока на это средств нет.</p>
<p>Может у меня проблемы с компом (ну да, типа снеси Винду и проблема отпадёт), но не на обоих же компах.</p>
<p>Для тех кто не в курсе, это програмка для управления шрифтами. Бесплатная и скачать её можно на сайте производителя <a href="http://www.linotype.com/fontexplorerX" target="_blank">http://www.linotype.com/fontexplorerX</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.seleckis.lv/journal/shrifty/linotype-fontexplorer-x/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
