Подбор шрифта для сайта

До недавнего времени выбор подходящего шрифта для сайта был для меня проблемой.
Нужно было каждый раз правильно в CSS изменить свойства, что бы потом улавливать изменения в готовом документе.

Но вот буквально пару дней назад я открыл для себя крайне любопытный интернет-сервис: texster.ru.
Основная его задача — подбор шрифтов и создание CSS стилей для текста. Умеет на лету с помощью ползунков изменять размер шрифта, интерльяж (расстояние между строками), кернинг (расстояние между буквами), расстояние между словами и отступы. Так же можно менять начертания шрифтов.

Все изменения тут же отображаются для 19 шрифтов и сразу генерируется CSS-код. Очень удобно.

Знак рубля

Давно использую лично для себя, но теперь стал встречать этот знак все чаще и чаще в рекламе.
Суть тут вот в чем. Дабы российской валюте не отставать от денег американских и европейских, которые давно имеют для себя обозначения $ и € соответственно, было решено придумать знак, который будет символизировать российский рубль.
Независимые негосударственные и к тому же вполне авторитетные ДС (среди них «Директ-дизайн», «Дизайн-депо», Студия Артемия Лебедева) принялись ваять этот самый знак. Вариантов было множество, но остановились на том, которые показан на картинке.

Поскольку значок довольной молодой, года два ему, то в шрифтах его найти удастся немногим. А что касается веб-дизайна? Как тут быть?
А вот для этого случая ДС Лебедева разработала наиболее оптимальное решение (никаких картинок):

<style type="text/css">
span.rur { font-family: "Rubl Sign"; text-transform: uppercase; // text-transform: none;}
span.rur span { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; }
span.rur span:before { content: '\2013'; }
</style>
<p style="font-size:1em">Алкоголь по 100 <span class="rur">p<span>уб.</span></span></p>
<p style="font-size:1.2em">Алкоголь по 100 <span class="rur">p<span>уб.</span></span></p>
<p style="font-size:1.5em">Алкоголь по 100 <span class="rur">p<span>уб.</span></span></p>
<p style="font-size:2em">Алкоголь по 100 <span class="rur">p<span>уб.</span></span></p>

Заставляем работать IE6 как надо

Если вы немного разбираетесь в web-разработках, то вам не по наслышке знакомы чудеса, которые выделывает старый, но все еще использующийся браузер Internet Explorer 6.

Если говорить мягко и политкорретно — отображает он страницы несколько иначе, чем другие браузеры и тем более, чем хотелось бы нам.

Приведу некоторые CSS-правила, которые помогут исправить этот недостаток.

1. Использование DOCTYPE
Обязательно указывайте в начале страницы запись, обозначающую тип HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. display: inline
Если на странице имеются DIV-блоки с float: left и указанным правилом margin, то в IE6 это значение margin будет удваиваться. Использование для этого DIV-блока правила display: inline поможет решить проблему.

3. Процентам нет
Если вы не уверены, или не можете задать размер каждого блока в процентах, то откажитесь от этой затеи — Осел может легко запутаться в цифрах.

Материал на основе блога Свобода слова вебастерского.

Переводчик на jQuery

Интересный способ переводить страницу целиком или ее отдельные элементы реализовал Jay Salvat в плагине Sunday Morning, использующем jQuery и Google API.