Development

CSS basics to improve your blog design

Naturally, as your blog represents you, you want your blog design to be gorgeous and unique. That’s why we created our Color Pack and Font Customizer plugins, so that you can choose a unique combination of fonts and colors to suit your style, without messing with code. But some of you love taking customization a step further to add site touches that are uniquely you. Today we’re sharing CSS basics to help you improve your blog design, with a step-by-step example of how to change the ‘read more’ buttons of our Presidio theme (and our process can be used with any theme, not just <em>press!).

What is CSS?

A quick primer for those of you who are new to code: CSS stands for Cascading Style Sheets, and it’s what gives your site, well, style. A line of CSS consists of two elements: the selector, and the declaration. The selector is the site element you wish to change; the declaration is the change you wish to make. Let’s take a look at a bit of code from our Presidio theme:

h2 {
    font: 30px 'IBM Plex Serif', serif;
    letter-spacing: .05em;
    font-weight: 200;
}

In this code, the h2 is our selector, and the font, letter-spacing, and font-weight lines are our declarations. This sets the font styling for any line in the WordPress post editor using Heading 2, or the <h2> tag. Keep reading “CSS basics to improve your blog design”

Blogging Tips

Ask Us Anything!

Recently, we put out a call for Ask Us Anything questions over our newsletter and social media channels. Today, we’re excited to share all the responses to your burning questions! Most of your inquiries focused on blogging and blog design, and we’re excited to dive right in… Click on through to read the questions and all our answers!

Keep reading “Ask Us Anything!”

4
Design

The Difference Between Web Fonts vs. Desktop Fonts

Let’s talk fonts! Such a fun, albeit confusing subject, no? Fun for the obvious reasons, confusing because—well, if you’ve never had to work with fonts extensively, you’ve likely never needed to understand the difference between web fonts and desktop fonts. So today, I thought I’d explain the differences, and also share some of my favorite font resources with you!

Desktop Fonts
A desktop font operates similarly to how it sounds—from your desktop. With a desktop font, you simply download the font file and install it on your computer. Most desktop font files will download as a .zip file, from which you’ll extract a file that ends with .otf or .ttf, or rarely, .ps1 (if you really want to nerd out and learn the differences between these, check out this article, but for the purposes of running the font on your computer, it doesn’t matter).

Once you’ve properly installed a desktop font on your computer, you can use it in any application that runs fonts from your system’s font library—think Word, Excel, PowerPoint, Photoshop, and the like. This comes in handy if you use particular fonts on your website, and also want to use them in marketing collateral, or graphics for your site. Having the desktop font allows you to match your brand fonts across all visuals, creating cohesion in your branding.

How and why do desktop fonts get used on websites and blogs?  

Keep reading “The Difference Between Web Fonts vs. Desktop Fonts”