Genesis Typography CSS

style.css

/* List Styles
------------------------------------------------------------ */

ol li {
	list-style-type: decimal;
}

.archive-page ul li,
.entry-content ul li {
	list-style-type: square;
}

.comment-list li,
.comment-list li ul li,
.menu li,
.ping-list li,
.sidebar.widget-area ul li,
#footer-widgets .widget-area ul li {
	list-style-type: none;
}


/* Fonts Sizes
------------------------------------------------------------ */

#title {
	font-size: 36px;
}

h1 {
	font-size: 30px;
}

h2,
h2 a,
h2 a:visited {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
	font-size: 16px;
}

input,
label,
select,
textarea,
p.wp-caption-text,
.breadcrumb,
.menu-primary,
.menu-secondary,
.taxonomy-description h1,
.taxonomy-description p,
.widget-area h2,
.widget-area h2 a,
.widget-area h4,
.author-box p,
.comment-content p,
.navigation,
.post-info,
.post-meta,
.reply,
.sidebar,
#description,
#header .menu,
#footer-widgets,
#footer,
div.gform_wrapper .ginput_complex label {
	font-size: 14px;
}

div.gform_wrapper input,
div.gform_wrapper select,
div.gform_wrapper textarea {
	font-size: 14px !important;
}

.commentmetadata
.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited,
#wp-calendar caption {
	font-size: 12px;
}

.sidebar p,
#footer-widgets p {
	font-size: inherit;
}


/* Font Family
------------------------------------------------------------ */

h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
#title,
h2 a,
h2 a:visited {
	font-family: 'Oswald', arial, serif;
}

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
input,
label,
select,
textarea {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}


/* Font Style
------------------------------------------------------------ */

blockquote p,
#wp-calendar caption {
	font-style: italic;
}

.comment-list cite,
.ping-list cite {
	font-style: normal;
}


/* Font Weight
------------------------------------------------------------ */

body,
input,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea
label,
select,
textarea,
.reply {
	font-weight: 300;
}

#wp-calendar thead,
.comment-list li,
.ping-list li {
	font-weight: bold;
}


/* Line Height
------------------------------------------------------------ */

h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
#title {
	line-height: 1.25;
}

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea {
	line-height: 1.5625;
}

input[type="button"],
input[type="submit"] {
	line-height: 19px;
}


/* Text Alignment
------------------------------------------------------------ */

#wp-calendar caption,
#footer .creds {
	text-align: right;
}

.nocomments,
#wp-calendar td {
	text-align: center;
}


/* Text Decoration
------------------------------------------------------------ */

a,
a:visited,
body,
input[type="button"],
input[type="submit"]
input:hover[type="button"],
input:hover[type="submit"]
h1,
h2,
h2 a,
h2 a:hover,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
select,
textarea
.menu-primary a,
.menu-secondary a,
.menu li.right a,
.menu li.right a:hover,
.widget-area h4 a
#title a,
#title a:hover,
#header .menu a,
#footer a:hover {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


/* Text Indent
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a,
.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
	text-indent: -9999px;
}


/* Text Transform
------------------------------------------------------------ */

.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
	text-transform: none;
}

#title {
	text-transform: uppercase;
}

/* Word Wrap
------------------------------------------------------------ */

.sidebar.widget-area ul li,
#footer-widgets .widget-area ul li {
	word-wrap: break-word;
}

Untested, but this is alternative way of organising the typographical styles of the Genesis Framework / Sample child theme.

One of the obvious gotcha places would be with font-sizes, and I've not looked too closely at the specificities involved here.

I probably wouldn't actually advise splitting the majority of these styles up in this way. Basically anything that is so closely related as to be one of the values in a font shorthand should generally be left together. There are however a few interesting bits flagged up:

• text transform: none; is the default value, yet it is flagged up on 9 selectors, none of which are needed as none of them have #title as a parent. Previously used on other themes, this could be removed for the default style sheet.
• Pulling the list styles types out is one of the few I would suggest doing, since I've seen too many commits in Genesis Trac that keeping fixing specificity issues for these.
• One of the line-height values isn't unitless, unlike the others.
• All of the text-indent properties might be addressed better for accessibility with the clip method.
• Some of the text-decoration: none selectors could be cut down, based on their specificity, and the specificity of the a:hover selector which is the only ruleset which sets a global underline (especially as the global a is set not to display them as the browser would be default).
• font-weight properties are set via both keywords and numbers. On some browsers, OSes and fonts, a value of 300, say, won't give a slightly less bold than normal (400), but will show up as normal. Suggest more investigation into this is done to see if a value of 300 is really doing what BG thinks it is doing for everyone else (Oswald doesn't come with a version of 300 weight for instance).

tried ccslint?

What about this code that isn't to standard? I did arrange this code manually, and I realise there are probably tools that could have equally organised it, but it still leads to the same interesting conclusions.