CSS: Text Styling and Webfonts
Fonts
font-family
Those most basic place to start. To choose our font we use font-family.
However, only fonts that are already on the users system can be selected like this. There is a big difference between the font families that are available natively on Macs and PC’s however. For example Helvetica is on 100% of Macs, but less than 10% of PC’s. So if we want to use a font that looks like Helvetica. It is smart to pick several backup fonts that are similar to Helvetica. After we select 1 or 2 backups, we can then pick a generic family name like serif or sans-serif as a final backup.
font-size
The most basic way to set a font size is defining a pixel height, which is a static setting.
One of the things to note about this however, is that this doesn’t take the users screen size into account. So while this huge 100px font might look great on a big 2k monitor, it may make it difficult to read on a cell phone. This is where scalable fonts come in handy.
By using em to set the size of your font, you base all the font sizes as a ratio of 1 base font that you set in the body. For example you could pick 16px for the base font, and then h1‘s could be 2em, which would be double the size of the base font, h2 could be 1.5em, and p could be 1 em. There is an awesome tool for visualizing what these different sizes look like with preselected ratios at Type Scale.
This is really great, because once you have decided on your ratio between font sizes, you can simply adjust the base font size in the body and all the other font sizes will adjust and be scaled to each other with the same ratio.
font-weight
Font weight refers to how thick the lines of the font are. For example how bold they are.
Font weight can also be selected on a scale of 100-900 in increments of 100, if the font allows this (many web fonts operate this way).
line-height
Sets the vertical spacing between lines of text, but does not change the height of the text itself. Similar to changing the line spacing in Microsoft word.
This property can be set with the keyword ‘normal’, a length in pixels, a percentage in em, or a number like a text editor.
text-align
Also similar to a word processor, text align can be set to left, right, center or justify.
text-decoration
Gives underline, strike-through and overline. You can also style the lines with wavy, dotted, colors etc!
Custom Fonts/Web Fonts
This will cover custom fonts that can be loaded from google or other services like TypeKit. However the general concept is that you link to the font you want in the <head> and that will make an offsite request that will load the font for the user when they load the page.
In this case we have put the following link in the header:
<link href="https://fonts.googleapis.com/css?family=<span class="collection-drawer-emphasized-code">Bungee+Inline</span>" rel="stylesheet">
While Google Fonts is awesome and free, there are some other interesting options. Primarily Adobe Typekit, which usually costs money, and Font Awesome is great for loading icons.
Comments
Recent Work
Basalt
basalt.softwareFree desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.
BidBear
bidbear.ioBidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.