Typography

We use two font-families in this example. A sans-serif typeface and a monospaced one (via Google Fonts). You can for instance exchange the monospace variant with a serif, and use it for quotes, special long-copy texts or special headlines. Or, of course, go for just one font-family. As with most combinations of fonts our two examples here differ in terms of line-height, character width (obviously) and percieved size due to their different aspact ratios of uppercase to lowercase letters. If you look into the source you‘ll notice different values for letter-spacing and line-height

Wix Madefor Text

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ± ! @ # $ % ^ & * ( ) _ + - = § £ ™ ¡ ¢ ∞ § ¶ • ª º – ≠ œ ∑ ´ ® † ¥ ¨ ˆ ø π “ ‘ å ß ∂ ƒ © ˙ ˚ ¬ … æ « ` ~ Ω ≈ ç √ ∫ ˜ µ ≤ ≥ ÷ È É Ê Ë Ē Ė Ę À Á Â Ä Æ Ã Ā Ś Š Ÿ Û Ü Ù Ú Ū Î Ï Í Ī Į Ì Ô Ö Ò Ó Œ Ō Õ Ł Ž Ź Ż Ç Ć Č Ñ Ń è é ê ë ē ė ę à á â ä æ ã ā ś š ÿ û ü ù ú ū î ï í ī į ì ô ö ò ó œ ō õ ł ž ź ż ç ć č ñ ń

Jet Brains mono

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ± ! @ # $ % ^ & * ( ) _ + - = § £ ™ ¡ ¢ ∞ § ¶ • ª º – ≠ œ ∑ ´ ® † ¥ ¨ ˆ ø π “ ‘ å ß ∂ ƒ © ˙ ˚ ¬ … æ « ` ~ Ω ≈ ç √ ∫ ˜ µ ≤ ≥ ÷ È É Ê Ë Ē Ė Ę À Á Â Ä Æ Ã Ā Ś Š Ÿ Û Ü Ù Ú Ū Î Ï Í Ī Į Ì Ô Ö Ò Ó Œ Ō Õ Ł Ž Ź Ż Ç Ć Č Ñ Ń è é ê ë ē ė ę à á â ä æ ã ā ś š ÿ û ü ù ú ū î ï í ī į ì ô ö ò ó œ ō õ ł ž ź ż ç ć č ñ ń

Type Sizes

The font sizes in this framework/templates are just examples and will probably be exchanged for the respective brand or corporate typography of the project at hand. Font sizing can be fixed values across all viewports like 3em down to .825em, dynamic sizes like 2.75vw or a combination of both. We use both. Two flexible size classes, and fixed sizes for standard headlines and paragraphs. But you can change that to your liking in your copy.

.size-flex is the other (and much smaller) dynamic size-class

.size-flex uses font-sizes of 1.75vw for desktop, 2.5vw for tablet and 3.75vw for mobile. Again, adjust these to your needs (read: text lengths).

Headlines come with identical .size-h* classes, so no one needs to abuse headline-markup to get larger letters and vice versa use h5 to squeeze too long texts into boxes, which is widely used and totally wrong.

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Text size-h1

Text size-h2

Text size-h3

Text size-h4

Text size-h5

Text size-h6

Larger Text H3

.larger copy at 115% of regular unmodified text which defaults to 16px, so it should be 18.5px in regular browsers. 1.9 line-height.

Normal Text H4

Regular <p> copy at a hundred percent of the standard font-size which defaults to 16px in regular browsers. Line-height globally set to one seventy-five for all paragraph texts.

Smaller Text H5

.smaller copy at ninety percent of the default font-size which defaults to sixteen points in regular browsers so we get about 14.5px here. Line-height globally set to one seventy-five for all paragraph texts.

Smallest Text H6

.smallest copy at seventy-five percent of the default font-size which defaults to sixteen points in regular browsers so we get about 12px here. Line-height globally stays at one seventy-five for all paragraph texts, but these classes can be used everywhere.