Re: [css-text] Characters per line

I see, I hadnt come across that unit measurement before. I think that
would be adequate, not sure if designers are really aware of it as they
generally think in CPL. I have a talk next month at a London meet up, ill
mention CH there. :)

thank you so much for getting back to me.


Mustafa

> On Apr 21, 2014, at 12:50 AM, mus@designtoday.co.uk wrote:
>> Hello everyone
>>
>> I was wondering if their was anything in the CSS spec for dealing with
>> Characters Per Line. Currently I've made a couple of prototypes using
>> JavaScript but this can be a huge performance hit on pages with large
>> amounts of text. As CPL is a huge part of read-ability for text and the
>> fact we live in a responsive web world maintaining a legible character
>> line is almost impossible.
>>
>> The general rule in typography is the CPL should be between 55-75
>> depending on the typeface family and its subsequent fonts. As each font
>> has a different character width this can make a huge difference. So the
>> idea would be something along the lines like
>>
>> P {
>> cpl: 75;
>> }
>>
>> The effect would be that the paragraph of text would never go beyond
>> this
>> amount, dropping to a newline, thus maintaining readability. I thought
>> about perhaps a max-cpl or min-cpl but wanted to fire you guys an email
>> first to get a feel if this is something that would be reasonable.
>
> I don't think this is quite the mechanism you want for this sort of
> thing.  Linebreaks happening in the middle of an element would be
> pretty unattractive.  As well, a strict character-based limit doesn't
> do the right thing - the idea of the 55-75 character line limit is to
> give you an approximate length; a line composed of 75 "i" characters
> and one composed of 75 "W" characters are very different, and neither
> really match the *intended* length (roughly the width of 75 "a"
> characters).
>
> If you want to enforce your line lengths properly, one decent way
> would be to declare you container width in 'ch' units.  "p {
> max-width: 75ch; }" will do what you need, without the unpredictable
> and ugly effects.
>
> ~TJ
>
>

Received on Thursday, 24 April 2014 15:46:07 UTC