typography

Aligning a character to the top of adjacent letters

I wish to align a character in HTML to the tops of the characters next to it. The css vertical-align attribute seems to be what I want, but I'm having some trouble. Using vertical-align: text-top doesn't seem to do what I want, but I thought it should from reading the spec. Currently, I'm using vertical-align: 10% which is a reasonabl...

H1-H6 font sizes in HTML

In HTML (and in typography in general, I suppose), there appears to be some defined sizes for H1-H6 -elements. Ie., if the baseline font size is 16px (or 100%), then h1 (w/c)ould be 2.25em (36px). And H2 (w/c)ould be 1.5em (24px). Et cetera. Where do these variables come from? The H1=36px, H2=24px, H3=21px, H4=18px, H5=16px, H6=14px, th...

@font-face or sIFR 3?

I've to implement custom font in a website, What should be used. Client is providing custom fonts. All browser support (Including IE6 and in all A Grade Browsers) text Selectable Selection visible Accessible with screen reader Successfully degradable if JS is disabled Easy to implement and manage in less time Mobile browser compatible ...

Get graphics information from font file. How to develop font parser similar to PDFView's font parsers?

Hi, I am trying to convert text into graphics using c#. My input is character string and output is bitmap with the input text. After lot of search I found some ways to do it, I found some techiques which uses this kind of techinque. For Example While creating Captcha, we have to print the character in the bitmap. But for that I sho...

Tex command which affects the next complete word

Is it possible to have a TeX command which will take the whole next word (or the next letters up to but not including the next punctuation symbol) as an argument and not only the next letter or {} group? I’d like to have a \caps command on certain acronyms but don’t want to type curly brackets over and over. ...

XSLT typograph.

Divide a large amount of text on an arbitrary number of equal parts. I probably already fed up with their stupid questions, but I have one more question. I have a large piece of text <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab il...

To divide the big text into columns.

Problem: There is a big piece of the text: <div class="cont"> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam volupt...

Is there any cons to use @font-face?

I found @font-face is good alternative of sIFR3 but every browser need different extension of font. so implementing is more than sIFR3. But very good thing is FLASH and Javascript not needed. Is there any cons to use @font-face in compare to sIFR3? I need compatibility in all A-Grade Browsers. and If any font which is freely availabl...

Does WEFT 3.2 supports any Right-to-Left Language fonts.......?

I am trying to make a website in Right to Left Language. Instead of GIF's I chose WEFT to embed the special fonts to be displayed on Client's machine. But it is not working. something goes wrong. Or else WEFT is not supporting the Right to Left language font. Is there anyone who worked in weft in Right with Left Language....? ...

What is prefered method to set consistence font-size and line height for website using em?

What is the best method to set cross-browser consistence typography (font-size and line height) for whole site using em for Fixed width {Width:970px}, centered website? I usually get design from client with multiple font size and line heights at various places in design. for some good reason i still use em without getting nested elemen...

How to create small SPACES in HTML?

There is em dash and en dash. Is there an "en" equivalent to &nbsp; ? Is there an en equivalent to pure Ascii 32? I want a better way to write this: 123<span class="spanen">&nbsp;</span>456<span class="spanen">&nbsp;</span>789 or this: 123<span class="spanen"> </span>456<span class="spanen"> </span>789 ...

How can i know for any font it's allowed to use in @font-face or not?

How can i know for any font it's allowed to use in @font-face or not? even if i recieve font from client, font installed in company PC, font comes with Adobe Software and MS Office? ...

CSS to position text based on Top of text?

When I change the size of a font in CSS, how do I make it so no matter what size the font is (from 12px to 200px), that the "Cap Height" (pic) of the text will always 'visually' have 10px padding on top? Otherwise what I'm doing is every time I change the font size, I have to go back and reposition the top/margin-top etc. Here's what...

How new is @font-face, and what do I need to know before I add it to a website?

I started getting into reading design blogs a little while ago, and it seemed that @font-face got really popular sometime late last year, or something like that, because I was under the impression that it was a new emerging feature of the web. But then I saw that Internet Explorer has had it since IE4 (with some conversion). So is it co...

CSS: What is the proper way to deal with multiple classes of Text

So I'm on commission for a website, and I'm trying to improve my code. When dealing with a website with multiple types of font (here it's large, there it's small, there it's bold, here it's underlined, etc.) is this where we use the h1-h6, or do we reserve those for times when there is a definite hierarchy, using instead <p class="xxx"> ...

Google Fonts Flash in Internet Explorer

I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up? I'm using the WebLoader version to ca...

CSS & Typography: Uniform Vertical Alignment of Number Descenders

Check out the following screenshot: http://www.jesserosenfield.com/beta/descenders.png My problem is that descending (like the "7" in the screenshot) numbers are vertically aligned with the bottom of the span, while other numbers are vertically aligned more towards the middle. Is there a way to "equalize" the vertical alignment of all n...

Which character is used to fill contents of password text input ?

I need this filled-circle character for my sketch of the UI. I have not found it in characters table on my mac. ...

@font-face doesn't work in Firefox (but exact same code works on another site)

I have two sites using the same exact code for @font-face. The font files are hosted on the respective sites and the paths are correct. One works, one doesn't. (And of course it works on my personal site and not the clients!) I'd really appreciate some fresh perspective on this! Where it WORKS: The site: http://365.christinalutters.c...

What are some examples of projects have the easiest to use and best looking API documentation?

We're working on a project that requires us to have really easy to use documentation. There is a multitude of posts on Stack Overflow that talk about what makes good documentation, but few about the way it's actually displayed and usability issues. What projects have good examples of typography and design in their documentation? What is...