I made some changes to the blog’s CSS so that the nutrition information looks more like the FDA recommendation, and learned a bit about WordPress.com’s CSS setup in the process. Unfortunately, I can’t do much about the fonts: WordPress.com allows only a very limited selection of fonts and does not permit the use of Web fonts (supposedly for security reasons), not even Web fonts from WordPress’s partner font library, Adobe Typekit. So just pretend that #content table.nutrition caption specifies Franklin Gothic Heavy, and the various other parts of the table are variously in Helvetica Regular or Helvetica Black. As it stands, it looks decent on desktop browsers, but not brilliant on mobile; I may be able to fix that with media queries, if WordPress.com allows them.

You can see an example in my previous post.

Here’s what the CSS I added actually looks like (note that this is an extra-cost feature on WordPress.com):

#content table.nutrition {
	width: 65%;
	line-height: 1; /* override excess space added by WP */
	font-family: "Helvetica", sans-serif;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid black;
}

#content table.nutrition caption {
	font-size: 32pt;
	font-weight: bold;
	padding-bottom: 6px;
}

#content table.nutrition tr td {
	padding: 6px;
	font-size: 90%;
}

#content table.nutrition tbody {
	border-bottom: 1px solid black;
}

#content table.nutrition tbody.servings {
	border-bottom: 7pt solid black;
}

#content table.nutrition tbody.calories {
	border-bottom: 3pt solid black;
}

#content table.nutrition tbody.main {
	border-bottom: 7pt solid black;
}