Discuss: How to Size Text in CSS

by Richard Rutter

81 Untitled

Being that I don’t have the grasp of CSS that the author surely does, i’m sure my comments might not be appreciated….. I am of the opinion that it is best to set the pixel size absolutely as most sites (should) have a significant amount of content. As a designer, I prefer knowing exactly where every letter is going to appear in relation to every graphic. It helps me to visualize where images should or shouldn’t go and more. Of course, I am a bit old school in my methodology, but it is still my preference :)

posted at 10:00 pm on May 27, 2008 by Tabitha Bingham

82 Screen, Print, Portable Device, Cross Platform, Cr

I liked the effort that was put into this article. That was a whole lot of screen captures and thought.
Thank you!

I came to this site as a whole, looking for the answer to a question:

How can I/we create documents, that might be one or more pages and be shown one any platform (I use Ubuntu) or browser, print correctly onto pages (at the right DPI for images for example, over 72dpi), scale to work for those with vision needs/screen resolution/device…

and

not have to rewrite/change/tweak/etc the content?

And be hyper linked together so one document can be related to another.

I have found that using table-less valid strict XHTML code and CSS for style while basing most (if not all) things on em makes the cross platform – cross browser challenge fairly do-able.

I was inspired towards this back in the CSSzenGARDEN days.
Thanks to all you designers that made that site rock!

But then there is printing and portable devices and better accessibility.

One only lives so long. How many times do we really want to recreate the same document/content for a new device, browser, printer, email or software just because a decade has passed
~~or MS has some new notion of how to keep people locked into THEIR closed source~~
?
As artists, do you not want to create new art instead dredging through old documents and recreating old documents to work with current technology?

A paper page is the size a paper page which is fixed and yet not as and now we have many countries and thus pages sizes.

What is the best approach for the long run?

There is much ado about creating web page/site that work for what ever is current and happening in the now like a fluid 3 column lay-out but
I am asking/questioning/yearning about content.

NOTE:
Even the content I write at this moment is UNUSABLE again with out tweaking because it is coded to Textile which seems to only be some what working and is not XHTML…

posted at 06:01 am on May 30, 2008 by Vital Bodies

83 CSSzenGARDEN is still going strong...

Seems like the CSSzenGARDEN site slowed way down for a while and they look like they are going strong. : )

The A List apart is an A list site for sure. Thanks again…

posted at 08:40 pm on May 30, 2008 by Vital Bodies

84 The table breaks the rhythm of the complex example

Table cells with multiple lines break the rhythm of the complex example. I checked it using the background image

posted at 02:56 pm on November 20, 2008 by Michal Čizmazia

85 A smart trick

There’s also a easy trick for this one:

An em is 16px.
10px equals 62.5% of 16px, or an em.
So if you put the font-size for the body element to 62.5%, it’s easy to calculate the other ones.
E.g. if you want 12px font-size, you just put in 1.2em. Because 1.2 * 10 = 12.

Regards,
Pieter

posted at 02:53 pm on November 26, 2008 by Pieter Beulque

86 Floating Heads problem

Generally, I love ALA’s typesetting, and this article was good. However, when I went to the complex example, I noted something that from the standpoint of readability is just plain wrong: The same amount of vertical space before and after heads, esp. subheads. As a reader, you need visual cues to connect a [sub]head to the text it is heading; therefore, there should be visibly more space ABOVE the head than below it. Not to pick specifically on this writer—I see this all over the web.

posted at 04:42 pm on January 14, 2009 by Chris Raymond

87 Font Size is the least of your worries

A very informative article, however…
When it comes to CSS, positioning containers is the real pain. Choosing some lovely font sizes and colours is a nice gentle way to finish off an otherwise stressfull afternoon of building a CSS website.

posted at 08:00 am on June 24, 2009 by John (The Boy) Ryan

88 Special Effects

There are two properties that allow you to automatically set the capitalisation of your text. First, font-variant allows you to set all your characters in small versions of capital letters.

p {font-variant: small-caps; }

That would create text like this. It looks cool, and works well for acronyms, like NATO. The second property is text-transform.

div {text-transform: uppercase; }

posted at 10:49 pm on June 28, 2009 by daveschaub

89 constants

Can someone please explain why, in the “complex example”, the multiplier is usually 16, 14, or 12, and in one instance it is 18?

e.g.,
font-size: 1.125em; /* 16×1.125=18px */

margin: 1.286em 0; /* 14×1.286=18px */

border-bottom:0.083em solid #ccc; /* 12×0.083=1px */

margin:1em 0; /* 18×1=18px */

Thank you

posted at 11:30 pm on July 2, 2009 by lauras2009

90 Great Post!

I find this very useful as I use mostly wordpress blogs as my website of choice. It had been difficult to change the text size, and I wanted it to be more readable to everyone. Going to try some of these routines and see if I can make my default text size more readable in css.

Smoking Help

posted at 02:36 am on February 18, 2010 by HolisticAlternative