Font size in pixels

Question

On an iPhone how do I calculate the size of a character in pixels for a given point size?

Answer 1

Point sizes are defined as 1/72 of an inch. That is, a 72-point font is approximately 1 inch from the lowest descent to the highest ascent. So the maximum height of a glyph in a 72pt font is about 1 inch.

Apple's iphone tech specs page claims that the iPhone currently has a resolution of 163 pixels per inch. So 72 points is 163 pixels, or about 2.2639 pixels per point. Just remember that every glyph varies in height and width, so this is a very rough estimate of size. Generally, the distance between baselines will be a bit larger than the font's point size so that lines of text don't crash into each other.

If you need exact measurements (and you probably do) then you'll need to actually measure the font glyphs using the font metric information. You can do this by using NSString's UIKit additions, which will let you measure the size of a particular string when rendered on screen.

Answer 2

To match font sizes (in Points) on the iPhone4 with font sizes (in Points) in Photoshop you have to set your Photoshop document to 144dpi. I have run a number of tests and that's the resolution that produces 1:1 results.

Steps:

• Take a screenshot of “Settings » General » Accessibility » Large Text” on an iPhone4
• Open the screenshot in Photoshop
• Change the resolution from 72dpi to 144dpi with “Resample Image” off
• Retype the text in Photoshop (in Points) to match size in the screenshot

I have gone through a number of different resolutions, including the 163dpi that was mentioned in the answer above, and I found that 144dpi produces 1:1 results. I have also tested this against a native app where I know the point sizes and the 144dpi was match there too.

Answer 3

Our graphic artist was very specific on certain devices to use pixel sizes instead of point size. The function below will return a font based on pixel size. It uses a brute force method to find the closet font, but then caches the results so next time the return will be very fast. I always appreciate comments on how this code could be made better. I use this function as a static class member in class called utils. You can easily paste into any class you are using. Hope it is of some help.

/** return a font as close to a pixel size as possible
example:
    UIFont *font = [Utils fontWithName:@"HelveticaNeue-Medium" sizeInPixels:33];
 @param fontName name of font same as UIFont fontWithName
 @param sizeInPixels size in pixels for font
 */
+(UIFont *) fontWithName:(NSString *) fontName sizeInPixels:(CGFloat) pixels {
    static NSMutableDictionary *fontDict; // to hold the font dictionary
    if ( fontName == nil ) {
        // we default to @"HelveticaNeue-Medium" for our default font
        fontName = @"HelveticaNeue-Medium";
    }
    if ( fontDict == nil ) {
        fontDict = [ @{} mutableCopy ];
    }
    // create a key string to see if font has already been created
    //
    NSString *strFontHash = [NSString stringWithFormat:@"%@-%f", fontName , pixels];
    UIFont *fnt = fontDict[strFontHash];
    if ( fnt != nil ) {
        return fnt; // we have already created this font
    }
    // lets play around and create a font that falls near the point size needed
    CGFloat pointStart = pixels/4;
    CGFloat lastHeight = -1;
    UIFont * lastFont = [UIFont fontWithName:fontName size:.5];\

    NSMutableDictionary * dictAttrs = [ @{ } mutableCopy ];
    NSString *fontCompareString = @"Mgj^";
    for ( CGFloat pnt = pointStart ; pnt < 1000 ; pnt += .5 ) {
        UIFont *font = [UIFont fontWithName:fontName size:pnt];
        if ( font == nil ) {
            NSLog(@"Unable to create font %@" , fontName );
            NSAssert(font == nil, @"font name not found in fontWithName:sizeInPixels" ); // correct the font being past in
        }
        dictAttrs[NSFontAttributeName] = font;
        CGSize cs = [fontCompareString sizeWithAttributes:dictAttrs];
        CGFloat fheight =  cs.height;
        if ( fheight == pixels  ) {
            // that will be rare but we found it
            fontDict[strFontHash] = font;
            return font;
        }
        if ( fheight > pixels ) {
            if ( lastFont == nil ) {
                fontDict[strFontHash] = font;
                return font;
            }
            // check which one is closer last height or this one
            // and return the user
            CGFloat fc1 = fabs( fheight - pixels );
            CGFloat fc2 = fabs( lastHeight  - pixels );
            // return the smallest differential
            if ( fc1 < fc2 ) {
                fontDict[strFontHash] = font;
                return font;
            } else {
                fontDict[strFontHash] = lastFont;
                return lastFont;
            }
        }
        lastFont = font;
        lastHeight = fheight;
    }
    NSAssert( false, @"Hopefully should never get here");
    return nil;
}

Answer 4

I believe you're looking for the UIFont NSString extensions that allow you to calculate the size of a string given a UIFont.

Here is the Link

Specifically the sizeWithFont methods.

Answer 5

You can't reliably convert points to pixels as the ppi (points-per-inch) will change from monitor to monitor. Have a read;

http://hsivonen.iki.fi/units/

Convert Pixels to Points

That said, some people have put together a few reference tables and calculators that may get you started;

http://www.unitconversion.org/typography/postscript-points-to-pixels-x-conversion.html

http://sureshjain.wordpress.com/2007/07/06/53/

Answer 6

The easiest way to get the pixel height for a given font and size is to use the boundingRect method on NSString. (I'm using @"Ap" here to make sure it contains a descender and an ascender.)

- (CGFloat)heightForFont:(UIFont *)font
{
    NSStringDrawingContext *context = [[NSStringDrawingContext alloc] init];
    CGRect boundingRect = [@"Ap" boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:font} context:context];
    return boundingRect.size.height;
}

Answer 7

I will add them as I figure them out:

A sizedToFit UILabel with a 12pt systemFont is 15px high.

Answer 8

You can calculate the pixel size on the fly by rendering a NSAttributedString and getting its size.

extension UIFont {
    var pixelSize: CGFloat {
        let string = "AWZgjpq"
        let attributedString = NSMutableAttributedString(string: string)
        attributedString.setAttributes([.font: self], range: NSRange(location: 0, length: string.count))
        return attributedString.size().height
    }
}

Further optimizations could be to add a lookup dictionary and cache results and/or make the test string not a variable (but the call itself is really fast). Also, if your font has some very irregular glyphs you can add them to the test string as well.

Usage: let pixelSize = label.font.pixelSize