Posts tagged typography
10:20 am - Mon, Jul 19, 2010
Q: Hey guys, I love your theme! But wondered if there was a way to adjust the point size of the type? Any help is appreciated :) Mala
hellomala

Font sizes are controlled via CSS, and are explicitly set in em values for numerous selectors. To perform a re-sizing across all elements, use the body selector and set a value via Custom CSS. For example, the following snippet will reduce font size across all elements by 5%:

body {font-size:.95em;}

If you’d like to tweak individual elements, you’ll need to use a more specific selector.

Comments

12:25 pm - Mon, Jun 21, 2010
Q: Hi there! Excellent theme you've created.. Honestly, my favorite theme so far. Yet, I am having trouble with setting up the Typekit fonts..
How do you go about setting up the right selectors?
A step by step description of how to set it up would be much appreciated..

Cheers!
aldorumrevolves

This demo page uses two TypeKit fonts, FF Meta Serif Web Pro for “body” and “p” selectors, and FF Meta Condensed Web Pro for “h1”, “h2”, and “h3” selectors. You’ll need to explicitly set these selectors in the TypeKit Editor to override the Tumblr Appearance options.

If you’re looking to do more detailed customizations, we suggest using a CSS inspector (such as Firebug on Firefox) to determine the appropriate selectors you’d like to target.

Comments

3:07 pm - Thu, May 13, 2010
2 notes
Q: Is there any way to adjust the widths of the columns or the sizes of the fonts?
barryfest

Yes, using custom CSS. The theme uses id’s to dynamically adjust the width of each column, depending on page type. The left, center, and right columns are labeled with the following id’s respectively: #sidebar, #primary, and #secondary. Here is the CSS that controls column width:

#sidebar { width: 200px; }
#primary { width:669px; border-left: 1px solid; }
#index #primary { width: 438px; border-right: 1px solid; }
#permalink #primary { width: 538px; border-right: 1px solid; }
#secondary { width: 0; display:none }
#index #secondary { width: 230px; display:block; }
#permalink #secondary { width: 130px; display:block; }

This gives three possible layouts: All three columns (e.g. home page or tag index); all three columns, but with a wider center column and narrower right column (e.g. permalink pages or ask page); two columns, left and center only (e.g. pages).

Column widths may be adjusted by tweaking the styles via custom CSS, however please note that the theme uses fixed sizes for photo, photoset, and video posts to correspond with the default column widths. Adjusting those requires tweaking the appropriate theme tags.

As for font sizes, custom CSS can again be used to adjust the default settings. Each column may be individually targeted using the #sidebar, #primary, and #secondary selectors, as well as individual elements using more specific selectors.

Comments

Following
Likes
More Likes
Install Headline