News Style

By Kyebego

Last updated : 

This is a simplified form of my News Vertical style for people who donʼt use Firefoxdonʼt want or need vertical layout support. Like News Vertical, it does not use italic or oblique type, but expects a wide variety of font weights : 200, 300, 400, 600, 700, 900. I recommend Source Serif Pro.

Your page should have the following layout :

<div role="note">
	<!-- Page info (optional) -->
	<!-- Page content -->
	<!-- Page footer (optional) -->

Or, if you prefer, you can stick everything inside <main> for a more minimal look.

News defines a number of helpful classes :

Defines an inline block, for use in running text. Apply this class to images and SVGs which you want to appear text­‑sized.
Defines an inline element. With list elements, this creates an inline list, like the following : 
  1. First item
  2. Second item
Sets the left or right margin to auto ; use both to centre content.
Aligns text left or right. Use both to justify text.
Use this on <u> to produce a wavy underline.
Use this on <p> or <div> to denote a stanza of verse. Line­‑breaks will be preserved.


Use this on <div> to create a typographical paragraph ( functions like <p> ). You should probably only use this when dealing with inline lists, for example :

This is a paragraph with a list : 

  • A list item
  • Another list item

 …And the paragraph continues.

Wrap text which has a footnote with a <span> of class="FOOTNOTE", and then include the note inside the span ( preferably, at the end ) with class="NOTE", like this.A footnote. Setting a tabindex of 0 on the footnote is recommended.
Formats a <ol> or <ul> list as a bibliography. Put annotations inside of <p> tags, like follows :

The above aside, just write semantic HTML and everything should turn out OK.