LETTER AND WORD SPACING FOR CAPS
I'm using a 1.5× line height and ligatures are enabled
figment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis elit lobortis, mollis diam eget, congue mauris. Curabitur et diam erat. Cras non magna vehicula, dignissim purus non, fermentum nibh.
Phasellus nunc dui, suscipit quis ligula non, volutpat porta turpis. Nam lobortis, arcu sit amet ornare tincidunt, erat enim ultricies nibh, sit amet ultricies lorem libero at nisi. Vivamus ut tincidunt elit, id fringilla nunc.
A test to measure sub-heading space
Mauris mollis risus et sapien mattis euismod. Nullam finibus risus id blandit ullamcorper.
Vestibulum sem leo, rhoncus dapibus posuere sed, accumsan a lorem. Etiam mollis porta mi, nec euismod odio lobortis vitae. Nullam egestas diam tortor, vel tempus metus vestibulum quis. 150 people
The above is rooney font with 1.5em paragraph spacing
Download WHO figment Pellentesque scelerisque suscipit libero, at vehicula nisi euismod suscipit. Praesent feugiat dolor velit, ac auctor velit eleifend et. Etiam in pretium lorem. Nulla venenatis neque vel ultricies interdum.
Quisque est nisl, condimentum vitae est sed, bibendum tincidunt augue.
Vestibulum nec varius orci. In vitae velit aliquet, dignissim magna aliquam, convallis ipsum. Praesent a posuere nibh, ut rhoncus quam. Quisque nec orci tempus, tincidunt turpis ornare, pulvinar lacus.
The above is mr. tramuntana font with 1em paragraph spacing
figment Pellentesque scelerisque suscipit libero, at vehicula nisi euismod suscipit. Praesent feugiat dolor velit, ac auctor velit eleifend et. Etiam in pretium lorem. Nulla venenatis neque vel ultricies interdum.
Quisque est nisl, condimentum vitae est sed, bibendum tincidunt augue.
Vestibulum nec varius orci. In vitae velit aliquet, dignissim magna aliquam, convallis ipsum. Praesent a posuere nibh, ut rhoncus quam. Quisque nec orci tempus, tincidunt turpis ornare, pulvinar lacus.
We use oldstyle figures to show numbers are also words
The year was 2001 when we initially went to viva Florida, and then we left by 2003. It was 95 degrees, in the hot sun. Vivamus euismod tincidunt est. Vivamus eget bibendum metus. Pellentesque felis arcu, euismod sit amet blandit id, cursus feugiat massa. Donec at dolo.
Fusce sit amet mi accumsan nulla ornare euismod. Fusce et tristique tellus. Curabitur quis suscipit augue, pellentesque vehicula odio. Cras condimentum, purus quis mollis faucibus, ante enim aliquet diam, eget ornare velit tortor non lacus. Fusce tincidunt hendrerit mi, sed tempus tortor mattis eget.
The above is freight sans, the below is carlson
figment Pellentesque scelerisque suscipit libero, at vehicula nisi euismod suscipit. Praesent feugiat dolor velit, ac auctor velit eleifend et. Etiam in pretium lorem. Nulla venenatis neque vel ultricies interdum.
Quisque est nisl, condimentum vitae est sed, bibendum tincidunt augue.
Vestibulum nec varius orci. In vitae velit aliquet, dignissim magna aliquam, convallis ipsum. Praesent a posuere nibh, ut rhoncus quam. Quisque nec orci tempus, tincidunt turpis ornare, pulvinar lacus.
Vivamus euismod tincidunt est. Vivamus eget bibendum metus. Pellentesque felis arcu, euismod sit amet blandit id, cursus feugiat massa. Donec at dolor eget lacus dignissim bibendum eu vel lorem.
Fusce sit amet mi accumsan nulla ornare euismod. Fusce et tristique tellus. Curabitur quis suscipit augue, pellentesque vehicula odio. Cras condimentum, purus quis mollis faucibus, ante enim aliquet diam, eget ornare velit tortor non lacus. Fusce tincidunt hendrerit mi, sed tempus tortor mattis eget.
Notice how the below divider is above the following heading, because it's meant to separate this section from the NEXT, rather than separating the heading from the body text, which makes no sense.
P22 underground with freight text
2004 to 2325 figment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis elit lobortis, mollis diam eget, congue mauris. Curabitur et diam erat. Cras non magna vehicula, dignissim purus non, fermentum nibh THIS is an example of SMALL CAPS using words such as HTML, CSS, and PHP.
IMPORTANT: This section has all of the necessary font formatting settings being used on it. Phasellus nunc dui, suscipit quis ligula non, volutpat porta turpis. Nam lobortis, arcu sit amet ornare tincidunt, erat enim ultricies nibh.
Mauris mollis risus et sapien mattis euismod. Nullam finibus risus id blandit ullamcorper.
Vestibulum sem leo, rhoncus dapibus posuere sed, accumsan a lorem. Etiam mollis porta mi, nec euismod odio lobortis vitae. Nullam egestas diam tortor, vel tempus metus vestibulum quis.
Freight Sans pairs well with freight text
Popular in some circles is the ability to indent future paragraphs, rather than use line spacing. I'd rather use line spacing, personally.
2004 to 2325 figment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis elit lobortis, mollis diam eget, congue mauris. Curabitur et diam erat. Cras non magna vehicula, dignissim purus non, fermentum nibh THIS is an example of SMALL CAPS using words such as HTML, CSS, and PHP.
Phasellus nunc dui, suscipit quis ligula non, volutpat porta turpis. Nam lobortis, arcu sit amet ornare tincidunt, erat enim ultricies nibh, sit amet ultricies lorem libero at nisi. Vivamus ut tincidunt elit, id fringilla nunc.
Mauris mollis risus et sapien mattis euismod. Nullam finibus risus id blandit ullamcorper.
Vestibulum sem leo, rhoncus dapibus posuere sed, accumsan a lorem. Etiam mollis porta mi, nec euismod odio lobortis vitae. Nullam egestas diam tortor, vel tempus metus vestibulum quis.
Sometimes,
Centered text is often used as a means to slow down the reader into making sure they catch something you have to say, if it's especially important as compared to the rest of the content.
However,
Centered text can also rudely interrupt the flow of reading for a visitor to your site, so it's better to align left rather than follow a flawed design cliché. This also forms a stronger grid.
Welcome to proxima nova land below
figment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis elit lobortis, mollis diam eget, congue mauris. Curabitur et diam erat. Cras non magna vehicula, dignissim purus non, fermentum nibh THIS is an example of SMALL CAPS using words such as HTML, CSS, and PHP.
Phasellus nunc dui, suscipit quis ligula non, volutpat porta turpis. Nam lobortis, arcu sit amet ornare tincidunt, erat enim ultricies nibh, sit amet ultricies lorem libero at nisi. Vivamus ut tincidunt elit, id fringilla nunc.
Mauris mollis risus et sapien mattis euismod. Nullam finibus risus id blandit ullamcorper. To get the previous two words to share a single line, we had to use a non-breaking line space, which basically tells WordPress to make sure that those two words share a SINGLE LINE.
Vestibulum sem leo, rhoncus dapibus posuere sed, accumsan a lorem. Etiam mollis porta mi, nec euismod odio lobortis vitae. Nullam egestas diam tortor, vel tempus metus vestibulum quis.
Color contrast and clearly defined links are also important...
And it can be checked in one of the EIGHT ways below:
- ColorSafe.co : This is a good resource for everyone who want to know more about good colors.
- WebAim.org
- Viget
- WebAxe Tools
- ContrastRatio tool : This another good resource to figure out the proper ratio of contrast in colors.
- W3.org
- Css-tricks
- Coolors.co
After visiting each one of the links, I'll be able to better understand contrast ratio and ensure that my site is doing everything it can to provide a nice contrast from the background color, to the main text color of the page.
Underlining the links isn't a bad idea because it helps to make the links stand out more as compared to the normal text surrounding it. Make sure the underline color isn't used as text anywhere else, so it is associated ONLY with links, same goes for never using underline effect unless it's a link.
Also notice how the list is properly formatted with text wrapping to the right of the bullet, and
Also make sure the underline color complements well, so that no hover effects are required to make the link text visible when you hover over it, because the effects are distracting.
The Black Clock
Best known for telling time and looking really cool and classical.
If doing text type on images, make sure to do a dark overlay so the text POPS.
Below is a new, merry font
2004 to 2325 figment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis elit lobortis, mollis diam eget, congue mauris. Curabitur et diam erat. Cras non magna vehicula, dignissim purus non, fermentum nibh THIS is an example of SMALL CAPS using words such as HTML, CSS, and PHP.
Phasellus nunc dui, suscipit quis ligula non, volutpat porta turpis. Nam lobortis, arcu sit amet ornare tincidunt, erat enim ultricies nibh, sit amet ultricies lorem libero at nisi. Vivamus ut tincidunt elit, id fringilla nunc.
Mauris mollis risus et sapien mattis euismod. Nullam finibus risus id blandit ullamcorper.
Turn optimizeLegibility off because it's slowing down the page
Vestibulum sem leo, rhoncus dapibus posuere sed, accumsan a lorem. Etiam mollis porta mi, nec euismod odio lobortis vitae. Nullam egestas diam tortor, vel tempus metus vestibulum quis.
Hairspaces can be cool. They can help separate menu items like below between the ABOUT & CONTACT using
Home Selected Work ABOUT / CONTACT
Good spacing sans list
ONLY USE WHITE ON DARK FOR HEADERS
Great copy aids great typography
Part of my job as a designer is to make sure copy reads well. Strip away unnecessary words to ensure the copy is as streamlined and valuable as possible. Make everything self explanatory so the visitors know exactly what to do without me having to EXPLAIN it to them.
An example is, if we have a table with our business hours. If well designed, it's clear that one column is days and the other is hours. Therefore, we absolutely do not need to include the HEADINGS stating as such.
Build around the body text
Ensuring the body text is exactly what I want is the right way to build my designs. If we don't nail the body text first, then a lot of the time we will have to compromise later on.
However, if we absolutely nail the body text, my design will be MOST of the way there.
Once that's done, we can use a modular scale to choose the rest of our font sizes, column widths, padding, margins, etc... The scale is as follows... 16, 18, 21, 24, 36, 48, 60, 72, a similar scale as you'll notice in Photoshop.
IMPORTANT TIP: Don't be married to the numbers. Start along the scale, but if 19px looks better than 18, just go with 19 and base the rest of the scale off that. also note that if the caps are too big, we can scale them down manually.
This belongs to the above clock
Hello this is an example of what is happening between the images
This belongs to the above clock
Hello this is an example of what is happening between the images
Contrast is key
Point #1
When setting font sizes, make sure we use contrast. Either keep the fonts exactly the same size, or noticeably different. The modular scale helps with this. The font sizes need to demonstrate hierarchy, and grouping.
Point #2
The reader should be able to tell just from my font sizes which sections are grouped with which, and which sections are sub-sections of other sections. Also, keep the sub-headers close to the body text they introduce.
Continuing with contrast
POINT #3
We can use small caps or different font weights to create differentiation.
P O I N T # 4
We can also use letter spacing and italics—sparingly, to do some of the same, but make sure the subheaders don't share any attributes of my link properties.
POINT #5
We can also use color to differentiate sub-headings from body text, and main headings... But make sure we only use THREE levels of headers... H1—title, H2—main headers, H3—subheaders, as illustrated below.
Only use text-transform to do caps—H1
These are the reasons why we use css instead—H2
reason #1 is the style is made that way—H3
Using big headers is fine
But as we get into using much larger headers—like the one below this block of text, we want to lighten the color a bit to make sure it's not overpowering the body text, and feels more balanced.
This isn't balanced
So we wouldn't want to use a header color like above because it's overpowering, but if we change to a header with a lighter color, it will feel more balanced, as we stated before.
This feels balanced
So we wouldn't want to use a header color like above because it's overpowering, but if we change to a header with a lighter color, it will feel more balanced, as we stated before.
Using a grid is a good idea
It's important to make certain that everything is aligned vertically, horizontally, and follows some uniform system. We can accomplish by using a grid system that ALL pages on the site use to ensure a uniform design.
But don't follow it blindly. The best thing to do for my typography is to follow all the MANUAL principles to ensure it reads properly, rather than distorting and ignoring typography rules to make sure it lines up slightly better.
On that note, it's important to remember to lay out elements optically rather than mathematically, because oftentimes there are optical illusions we don't realize—for example, in order to make an object appear visually centered [vertically], you must place it slightly above true center.
Pairing a sans serif with a serif
That is a good idea, generally, because people in the industry support it. Whenever you find a great font like Antique Olive, and have the opportunity to pair it up with a stellar looking font like Chaparral, you do it. 2133
Now that we FINALLY got this working, it's easy to see how cool it is when the program just works like it was designed to! But never pair two sans serifs together, unless we really have to, or it is a great font, such as PROXIMA NOVA, in the same genre.
Something else to take note of
By the same logic we used above, don't pair two serif fonts, unless they are both from the same superfamily, such as FREIGHT SANS and FREIGHT TEXT.
We can also look to use fonts from the same creator. For example, we already like PROXIMA NOVA, so if we're looking for a good serif font to pair with that, we can explore all fonts by the creator of that font.
*Consistent* or serious contrast
kinda similar doesn't work
Nova vs. freight sans
Stick with two typefaces—most of the time
This text is similar, but just different. No point in pairing.
This text is similar, but just different. No point in pairing.
This text is similar, but just different. No point in pairing.
This text is similar, but just different. No point in pairing.
In this scenario, we would rather follow the rules above to make sure we either pick two perfect matches or two really contrasting styles.
Handwritten vs. constructed fonts
Font faces that have a perfectly vertical stress [ON THE O], and perfectly circular looking openings, are geometric sans serifs.
Fonts that have an angled stress, and look like they handwritten origins, are humanist serifs.
If we are going to pair fonts by harmony, then we can use fonts that are both geometric. or both humanist. If we choose to contrast, use one heavy geometric, and one heavy humanist typeface.
Pair geometric sans serifs with modern serifs
Pairing a font like PROXIMA NOVA with a modern font like Bodoni, works, when we are going for harmonious font pairing. Geometric fonts usually use a single story "a" and modern serifs use a double story "a".
Here are some QUIZZES to better practice my understanding of geometric and non geomtric font faces. Below are some examples of geometric fonts—left, and modern fonts—right:
Geometric Fonts
- Avant Garde Gothic
- Avenir
- Brandon Grotesque
- Brown
- Calibre
- Circular
- DIN
- FF Mark
- FF Super Grotesk
- Futura
- Gotham
- GT Walsheim
- Harmonia Sans
- Hurme Geometric Sans
- Interstate
- Montserrat
- Neutraface
- Neuzeit
- Proxima Nova
- Sharp Sans
- Sofia
- Soleil
- Twentieth Century
- Verlag
Modern Fonts
- Abril
- Ambroise
- Benton Modern
- Bodoni
- Caponi
- Century Schoolbook
- Didot
- Eames Century Modern
- Farnham
- Filosofia
- Grad
- Harriet
- Hercules
- Kepler
- Melior
- Miller
- Modern 216
- Old Standard TT
- Questra
- Scotch Modern
- Superior Title
- Surveyor
- Trivia Serif
- Walbaum
Pair grotesk & gothics with transitional serifs
Pairing a font like PROXIMA NOVA with a modern font like Bodoni, works, when we are going for harmonious font pairing. Geometric fonts usually use a single story "a" and modern serifs use a double story "a".
A font like FRANKLIN GOTHIC—for our headers, pairs well with a font like BASKERVILLE—for our body text. Below is a a complete list of the aforementioned font styles:
Grotesk & Gothic Fonts
- Akzidenz Grotesk
- Alternate Gothic
- Apercu
- Archivo Narrow
- Benton Sans
- Bureau Grotesque
- Chivo
- FF Bau
- Founders Grotesk
- Franklin Gothic
- Karla
- Knockout
- Maple
- Monotype Grotesque
- National
- News Gothic
- Source Sans Pro
- Supria Sans
- Tablet Gothic
- Trade Gothic
- Work Sans
Transitional Fonts
- Adobe Text
- Arnhem
- Baskerville
- Bookman
- Caslon
- Chronicle
- Fournier
- Galaxie Copernicus
- Georgia
- Kostic Serif
- Le Monde Journal
- Life
- Mrs Eaves
- New Caledonia
- Perpetua
- Plantin
- Playfair Display
- Source Serif Pro
- Tiempos
- Times New Roman
- Utopia
Pair neo-grotesks with slab serifs
Pairing a font like PROXIMA NOVA with a modern font like Bodoni, works, when we are going for harmonious font pairing. Geometric fonts usually use a single story "a" and modern serifs use a double story "a".
A font like HELVETICA NEUE—for our headers, pairs well with a font like ROBOTO SLAB—for our body text. Below is a a complete list of the aforementioned font styles:
Neo-Grotesk Fonts
- Acumin
- Akkurat
- Aktiv Grostesk
- Arial
- Folio
- Geneva
- Helvetica
- Helvetica Neue
- Maison Neue
- Neue Haas Grotesk
- Neue Haas Unica
- Nimbus Sans
- Pragmatica
- Roboto
- Standard CT
- Suisse International
- Univers
Slab Fonts
- Aachen
- Adelle
- Archer
- Bitter
- Calvert
- Clarendon
- Egyptienne
- Glypha
- Jubilat
- Karnak
- Lexia
- Lubalin Graph
- PMN Caecilia
- Roboto Slab
- Rockwell
- Sentinel
- Serifa
Pair humanist sans serifs with humanist serifs
Pairing a font like PROXIMA NOVA with a modern font like Bodoni, works, when we are going for harmonious font pairing. Geometric fonts usually use a single story "a" and modern serifs use a double story "a".
A font like MINION—for our headers, pairs well with a font like MYRIAD—for our body text. Below is a a complete list of the aforementioned font styles:
Humanist Sans Serifs
- Abadi
- Cabin
- Cronos
- FF Scala Sans
- FF Yoga Sans
- Frutiger
- Gill Sans
- ITC Johnston
- Myriad
- Optima
- P22 Underground
- Prenton
- Syntax
- Today Sans
- Verdana
Humanist Serifs
- Arno
- Bembo
- Cardo
- Century Old Style
- Crimson Text
- Ehrhardt
- Elorado
- FF Scala
- Garamond
- Goudy Old Style
- Hoefler Text
- Jenson
- Minion
- Palatino
- Sabon
Pair neo-humanist sans serifs with contemporary serifs
Neo-humanist sans serifs are like humanist sans serifs, but are newer, and often have a larger x-height. They can often be recognized by the FF in front of them.
A font like OPEN SANS—for our headers, pairs well with a font like MERRIWEATHER—for our body text, but they're interchangeable as to which is better for headers or body text. Below is a a complete list of the aforementioned font styles:
Neo-Humanist Sans Serifs
- Alright Sans
- Bernini Sans
- Fedra Sans
- FF Kievit
- FF Meta
- FF Tisa Sans
- Fira Sans
- Freight Sans
- Ideal Sans
- Lato
- Open Sans
- Seravek
- Vista Sans
Contemporary Sans
- Chaparral
- Elena
- Fedra Serif
- FF Franziska
- FF Meta Serif
- FF Olsen
- FF Tisa
- Freight Text
- Lava
- Merriweather
- Neue Swift
- Sina Nova
- Skolar
Reasons to use condensed typeface for headlines
"Make sure that when swapping fonts out for another, we adjust things such as line height, line width, etc... as many fonts are NOT geometrically compatible"
Other things to consider
HUGE TEXT
is definitely a useful design element
because ligatures, swashes turned on
Tips for branding design
This is a lede paragraph which is introducing several more points about overall typography rules that should be followed when crafting your site's overall typographical feel.