Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Ok, so I am trying to do my first theme, a Tumblr page theme for bookshelf pages. My vision was basing it on iOS iBooks. There are some minor details which I don't know. I really want to know what the FONT of the header bar of iBooks and the HTML Colour code, hexadecimal or other equivalent codes which will lead me to the same exact colour, it doesn't have to be websafe.

Thanks.

P.S. Also, if it is a font with many variations, please tell me which variation (e.g. Condensed, Extended, Roman, Normal etc...)

http://farm8.staticflickr.com/7388/8804318780_fae6e6e0bf_o.jpg

share|improve this question
up vote 1 down vote accepted

Inside the iBooks app the following can be found:

class="header" style="font-family:Helvetica, Arial, Sans-Serif;font-weight:bold;font-size:15px;color:rgb(79,82,84);text-transform:uppercase;line-height:24px;"

class="booktitle" style="font-family:Palatino,Times, Serif;font-size:32px;font-weight:bold;color:rgb(00,00,00);line-height:38px;padding:0 100;"

class="author" style="font-family:Palatino,Times, Serif;font-size:16px;color:rgb(79,82,84);line-height:24px; word-break: break-word;"

.plist files contain:

<key>fontFamily</key>
<string>Athelas</string>
<key>fontFamily</key>
<string>Charter</string>
<key>fontFamily</key>
<string>Georgia</string>
<key>fontFamily</key>
<string>Iowan Old Style</string>
<key>fontFamily</key>
<string>Palatino</string>
<key>fontFamily</key>
<string>Seravek</string>
<key>fontFamily</key>
<string>Times New Roman</string>

(Note: all these fonts are part of the app. I'm not familiar with a couple of them and they could very well be proprietary fonts created by Apple.)

In terms of colors, other than what's indicated above, I think you'll simply have to sample areas of images.

EDIT AFTER IMAGE WAS ADDED: all those items you list are png files within the app, not live text. Therefore there's nothing to be discovered by examining the app contents.

share|improve this answer

to go into further with the color use Colorzilla in Firefox with this post like so:

enter image description here

or Photoshop's color picker tool. There are many tutorials, like this, that exist on how to duplicate the shelf. If you are trying to do this in a timely manner I would possibly just crop out the selected areas.

share|improve this answer

The font is Helvetica (unfortunately for the interface). Apple has a strange rule of using a customized Myriad for their "branding" but Helvetica in their interfaces. I guess their teams don't like to talk.

As for the colors, just screen grab it and pick out the colors you want. If it's off by a couple points it won't be noticeable in your theme.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.