ruzzz
@ruzzz
C++/Python

Типографический CSS фреймворк/шаблон, с учетом кириллицы

Подскажите, существуют ли готовые CSS шаблоны или фреймворки (если так можно сказать) которые служат скорее не для правильной семантической верстки, а для наиболее правильного и «красивого» отображения технических статей(!) на русском языке. С учетом всех современных типографических правил и дизайнерских приемов. Отлично подобранные отступы для заголовков, абзацев, списков, словарей, шрифты, размеры. Желательно чтобы человек, который не занимается профессионально версткой мог легко разобраться и использовать.
  • Вопрос задан
  • 5892 просмотра
Пригласить эксперта
Ответы на вопрос 6
@stioann
Быть может вам подойдёт сборка уже готовых типографических шаблонов вот отсюда — Free Typographic XHTML/CSS-Layouts For Your Designs.
Как один из примеров победитель занявший третье место, шаблон «Experimental» с кирилицей.
Эксперементальный шаблон
Ответ написан
Neonailol
@Neonailol
hardcore
Всё что вам нужно знать о типографике и читабельности:
1. Как можно больше контраста между текстом и фоном
2. Высота строки 1.4em-1.6em (свойство CSS: line-height: значение)
3. Шрифт заголовков — без засечек(sans-serif), шрифт текста — с засечками(serif) — удобней читать и навигироваться
4. Ширина блока с тестом — примерно 2 алфавита
5. Добавьте отступы между параграфами
6. Отступ между заголовком и параграфом надо сделать чуть меньше чем чем между обычными параграфами
7. Выравнивание по ширине (justify) — плохо, ад и ппц, выравнивать лутше просто по левому карю
дополните если что забыл
Ответ написан
Sannis
@Sannis
Зачем публиковать технические статьи в HTML с такой доскональностью?
Ответ написан
shifty
@shifty
Уже готовую типографику (набор стилей CSS), можете взять и подключить с существующих CSS-фреймворков.

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

В вашем примере, можете выбрать необходимый вам набор готовый стилей стилей http://www.blueprintcss.org/tests/

Рабочий пример
Используемый набор CSS-правил

P.S.: данный CSS-фреймворк можно быстро и легко разжевать даже человеку, не имеющему предстваления о верстке в целом. Все есть на примерах и с документацией, правда зачастую на английском языке.
Ответ написан
savados
@savados
1. Это совсем несложно — выучить основные теги и css-правила для оформления текста. За два дня. Ну за неделю (в самом крайнем случае). Зато вы точно оформите так, как нужно вам.

2. Просто прицепить css к тексту не выйдет, если текст не размечен семантически. То есть заголовки должны быть как h*, цитаты — как blockquote, параграфы — как p и т. д. То есть без верстки в любом случае не обойтись. Если же у где-то параграфы отделяются br-ми, а заголовки описываются тегом font, то никакой css-фреймворк тут не поможет.

3. Хороший текст — это не только css. Это правильные кавычки и тире для данного языка. Это привязанные неразрывными пробелами короткие служебные слова. Это правильные номера телефонов. Css всего это не сделает.

4. Ясно выраженная мысль и грамотный язык в любом случае в сто раз важнее всякой верстки.
Ответ написан
Petja
@Petja
Веб Мастер: *nix, js, php, html, css, design
http://twitter.github.com/bootstrap/customize.html
Если здесь оставить только одно:
1. Choose components -> Base CSS -> Headings, body, etc
, то будет только типографика от twitter
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы