Home Aligning characters of different font sizes in CSS
 What I am trying to achieve is to have two separate lines of text, with different font sizes, for which each character lines up well with a character from the other line. Current state here span { letter-spacing: 0.12em; font-family: monospace, ubuntu_monobold, Courier New, monaco, terminal, courier, system; font-size: 1em; } .highlight { display: inline-block; width: 0px; word-spacing: normal; } .small { top: .9em; padding-bottom: 1px; opacity: 0.6; font-size: 70%; letter-spacing: .45em; } gggggggggggggggggggg                GGGGGGGGGGGGGGG?GGGGG GGAAGGCCCCACAGCGTCTTCTGTACTATGAGGGGTCTATTACTGTGCCACCTTCTGACA jsfiddle letter-spacing: .45em;  Is what I am using to achieve this. Now the obvious and "easy" solution is to use a table, with a column for each character, however, there can be lots of characters on one line and this would add a lot of elements to the DOM, which I would like to avoid if possible. So can someone tell me if this is possible using only CSS ? Thanks