Улучшение чтения текста с помощью CSS

Я пытаюсь стиль this pen, и я не могу получить правильный CSS для текста, чтобы сделать его более читаемым и не выглядящим переполненным.Улучшение чтения текста с помощью CSS

Ядро CSS:

p{ 
    color: #000; 
    font-size: 16px; 
    line-height: 1.25em; 
    padding: 0 0 1em 0; 
    text-align: justify; 
}

Я планирую использовать улучшенный CSS как для нормальной, настольной версии и для мобильных устройств. Вот экран того, что я считаю отличным примером удобочитаемости для мобильных устройств.

источник

2015-11-09 RockMyAlgorithm

Вы возились с настройками сглаживания? Является ли это проблемой межстрочного интервала или ... – Phix

Непонятно, чего вы пытаетесь достичь, но FWIW значение 'line-height' должно быть unlessless для правильного наследования для дочерних элементов, то есть должно быть просто' строка -изм: 1,25', без 'em'. Кроме того, 'text-align: justify' обычно считается плохой практикой, поскольку он приводит к большим пространствам между длинными словами. Кстати, обычно лучше установить такие вещи, как 'line-height' для корневого элемента (' HTML'), а затем переопределить его для определенных контейнеров, если это необходимо. –

@Phix, я перепутал с -font-smoothing и text-rendering. Но я думаю, что линейная высота также является частью проблемы. – RockMyAlgorithm

line-height, font-size, color все в порядке. Обычно я использую color: #333 или color: #777, чтобы создать меньший контраст между белым фоном и черными буквами.

Вы также можете рассмотреть letter-spacing, что создает более «воздушное» чувство с большим количеством пробелов между символами текста:

h1 { 
    font-size: 1.5em; 
    font-weight: bold; 
    margin-bottom: 5px; 
    letter-spacing: .05em 
} 

p { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased !important; 
    -moz-font-smoothing: antialiased !important; 
    text-rendering: optimizelegibility !important; 
    letter-spacing: .03em; 
}

DEMO: http://codepen.io/anon/pen/ojaMEy

источник

2015-11-09 03:05:08

Я немного изменил его, значительно увеличилось расстояние между буквами и цвет. Плюс, большой палец от со-разработчиков. – RockMyAlgorithm

Вы можете добавить ширину к элементу p, так как каждая строка текста должна содержать от 45 до 75 символов (от 35 до 50 на мобильных устройствах): 'width: 30em;' будет соответствовать этому. Вы также должны добавить маржу, чтобы текст не имел отвлекающих факторов, но это редко бывает возможным. – hering

С размером шрифта 24px и линии высоты, установленной на 1.5em текст будет выглядеть так же, как, например, вы предоставили. После этого просто разбивайте абзацы на легко читаемые куски. Это, кажется, самый простой ответ, если я не недопонимаю проблему.

источник

2015-11-09 03:03:41

Улучшение чтения текста с помощью CSS

ответ

Смежные вопросы