Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

3 Answers 3

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
    
ok, thanks for the info... of the pngs –  markscamilleri May 23 '13 at 17:13
    
Curious side note.. why does Apple define Arial as a fallback for a font on their own device? They know Helvetica is present. Interesting. –  Scott May 23 '13 at 17:17
    
I think i'll use the font family indicated in the first line in the first code snippet, but as for colour I think I'll use #FFFFFA as RGB(79,82,84) or #4f5254 doesn't seem right for it. (colorhexa.com/4f5254), before voting you up and rating as the answer which answered me, I want to see if there are some other answers... you know... but will do it on saturday if this will be it. –  markscamilleri May 23 '13 at 17:18
    
Yeah I just copy/pasted what I found in the app. All those header items are images. You're better off sampling and judging for yourself. –  Scott May 23 '13 at 17:19
    
I've been comparing and Helvetica Neue is the font, but alas I don't have it so I will be using Helvetica then Arial... thanks –  markscamilleri May 23 '13 at 17:56

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 shelves are already done, it's just the header font that is giving me the problems. –  markscamilleri May 23 '13 at 17:53

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.