iPhone Development 101

iPhone 101

Code Tips

Resources

Links

Follow

Mailing ListTwitter

More

iPhone Fonts, Colors & UI Sizes Quick Reference App

View Larger View Larger

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 Screenshot 5 Screenshot 6 Screenshot 7

Bug reports or
feature requests?
E-mail me!

iDev101: Fonts, Colors & UI Sizes

Note: I'm working on an update for this app. If you'd like to be notified when a new version is available, please join my idev101 mailing list.

This is a quick-reference app for iOS developers. It's packed with useful tools and resources including a color picker, complete font list and type tester, printable app design templates, an interactive app submission checklist, and more.

Fonts:

  • The complete list of all the fonts on your device, plus the System fonts
  • Type tester: see a preview of your text in that font, the line height (in points) for that font, the frame size, and the actual font name to use in your UIFont declarations
  • Sample code:
    • How to specify a font
    • How to use system fonts
    • How to get the size of a string in a particular font
    • How to use custom fonts

Colors:

  • Color sliders for both RGB and HSB
  • Input color values (between 0 and 1, or between 0 and 255 in RGB mode) and view the result on screen
  • Convert to/from CSS hex values. You can enter a CSS hex color value and get the corresponding RGB or HSB values. This makes converting to and from HTML/CSS colors extremely easy... great for designers!
  • Shows you the actual code for creating a UIColor object with the selected color
  • Sample code:
    • How to set colors
    • How to set transparent backgrounds
    • A list and preview of all the standard UIColors (e.g. [UIColor blueColor])

UI Sizes:

  • Screen and UI sizes for iPhone 4S (and earlier), iPhone 5, and iPad screens
  • Icon sizes for iPhone, iPad, and Web app icons
  • Keyboard sizes for the on-screen (English) keyboards, plus how to get the (language-independent) keyboard size programmatically, and how to slide the view up so the keyboard doesn't overlap the text input box
  • Default (launch) image sizes
  • Screen shot sizes (required for app submission)

Extras:

  • Interactive checklist for preparing and submitting your app to iTunes Connect
  • A printable version of the checklist
  • Printable PDF templates for designing your app - includes 10 different iPhone templates in both portrait and landscape

Credits

  • App design & code by Kira. Check out my other apps!
  • Special thanks to Steven Marsh for app testing.


Icon designed by Kira, with grafx from www.templay.de


TopHome