Available Typefaces, some info on type sizing.

[Pat Flor]

iPhone installed typefaces:

I was doing some research for a site we are restyling for iPhone, and
after an hour or so at the local Cingular/ATT, I have a list of
typefaces that rendered through CSS styles on Safari:

Arial
Arial Rounded MT Bold
Courier*
Courier New*
Georgia
Helvetica* (default sans-serif)
Helvetica Neue*
Marker Felt
Times New Roman (default serif, also overall default)
Trebuchet MS
Verdana
Zapfino

*Starred pairs may map to the same typeface files. e.g. - I didn't
see a noticeable difference between text styled as ["Courier New",
sans-serif;] and [Courier, sans-serif]. Maybe someone who actually
owns an iPhone could research this more in depth...

Note that the iPhone screen resolution is 160 pixels/inch; so if you
are locking the zoom feature down and turning off Safari's automatic
font-scaling (http://developer.apple.com/iphone/designingcontent.html
for details, in case you've been hiding under a rock), you will need
to scale up any pixel sizing to get the same physical typeface sizes.
I calculated about a 1.4 conversion factor going from my MacBook Pro
15" to the iPhone, as the notebook screen's resolution is about 113
ppi. Your mileage may vary.

Note also that the above typeface list is NOT comprehensive; I came
prepared to test for typefaces, but ended up playing around with the
phone for 45 minutes =). Slick piece of hardware/software, and I look
forward to seeing what we can make of it!

Best regards,
Pat Flor

[Christopher Allen]

Thanks for the information, it is very useful.

I hope you've had a chance to reader over our discoveries on the meta
viewport tag -- we've got a lot further then the Apple document as.

I'm not sure I understood your comment about the 1.4 conversion
factor. Are you saying when we are at viewport of 320px in portrait
(i.e. native resolution), to have a 10 point font we should use a
14pt?

-- Christopher Allen

[Marc Love]

Pat's talking about the conversion factor that comes into play if
you've turned off the iPhone's automatic font scaling with "-webkit-
text-size-adjust:none" as detailed in Apple's developer notes.

Since the iPhone's screen is 160ppi, all your fonts will be displayed
physically smaller on your iPhone screen than on your lower ppi
screens on your laptops and desktops. For instance, a 10px font is
easily readable on my 96ppi desktop monitor, but on the iPhone, a 10px
font is the very floor of readability.

160ppi / 10px = 1/16th inch
96ppi / 10px = 1/9.6th inch

I'm pretty sure the smallest font used in the iPhone's UI is 10px and
its used in the text labels for each of main menu buttons. The most
frequently used font sizes in the UI are 16px, 18px, and 20px with
subheads and paragraph text using 14px.

On Jul 5, 1:00 am, "Christopher Allen" <Christoph...@iPhoneWebDev.com>
wrote:

[Brian Bock (Iacta)]

I believe American Typewriter is also available.

[Kalle Alm]

I added an example file for these. Let me know if I missed something.

URL: http://www.iphonewebdev.com/examples/fonts.php

-Kalle.

[Dean Hamack]

I typically use "font-size: small;" as my base font size rather than a fixed
pixel measurement. On IE for the PC, this renders out at 12px (unless the
user has accessability turned on).

Any reports on how the iPhone handles "small, medium" etc.?

Also: Apples specs say it doesn't support css hovers. But when I viewed one
of my pages containing the following code in the iphoney emulator, it worked
just fine:

a:hover { background: #333333; color: #ffffff; }

Is iphoney not a true representation of how things render on the phone, or
is Apple wrong?

[trhaynes]

> Also: Apples specs say it doesn't support css hovers. But when I viewed one
> of my pages containing the following code in the iphoney emulator, it worked
> just fine:
>
> a:hover { background: #333333; color: #ffffff; }

There is no cursor on an iPhone. How do you hover over it? (Hint:
you can't)

Tom

[Dean Hamack]

On 7/7/07 11:27 AM, "trhaynes" <trha...@gmail.com> wrote:

> There is no cursor on an iPhone. How do you hover over it? (Hint:
> you can't)

Ah yes, that's a damn fine point :)

[Hardy Macia]

Sent from my iPhone

1 iPhones is just safari on your desktop so you can't go by that

2 hovers don't work but the effect can still get applied to screen
after you tap.

Interestingly hover does kinda work on the popup keyboard. Because
keys are processed on finger up instead of finger down. So you get the
illusion of hover

Hardy

>
> >