Now, we can do this in pure CSS with the scroll-behavior
:
body {
scroll-behavior: smooth;
}
Adding this to your CSS will create a smooth transition for links that cause the user’s page to scroll:
See the Pen (@websmyth) on CodePen.
Browser support is reasonably good. Key exceptions are: Safari, Internet Explorer and pre-2020 versions of Microsoft Edge.
]]>:focus
states, we often use the outline
property to override the browser’s default styling.
This works well, but the outline can feel very close to the text that’s outlined. Right click or [tab]
to the link in this Codepen to see:
See the Pen (@websmyth) on CodePen.
To create more space, we could add padding
on focused elements.
Alternatively, we could use outline-offset
, a little-used property that creates some space between an element and its outline:
See the Pen (@websmyth) on CodePen.
Browser support is very good except for IE and pre-2016 versions of Edge.
]]>Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.
Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?
There’s no quick fix, but here are 20 top resources for web typography today.
The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.
A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.
A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.
One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.
Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.
A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.
OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.
These tools can help you decide and improve on typographical choices.
If you want your font sizes to feel coherent, rather than random, a scale can help.
To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.
This tool lets you experiment with variable fonts and their different feature sets.
If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.
There’s more to life than Adobe Fonts, Google Fonts and Monotype.
A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.
This is another collection of high-quality open-source fonts.
I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.
I know, this was mentioned above...but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration – a fantastic resource.
Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.
A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.
Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif + serif, sans-serif + serif, etc).
What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.
Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.
These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.
Sound familiar? If that’s your CSS workflow, it can be a frustrating experience.
Some tools can ease this, but they usually involve the command line and local development. Neither is always possible or feasible.
What if there was a way to see your CSS changes live in the browser? No command line, no special tools, no need to develop locally.
Well, it’s already here, and it’s been here for a while: browser developer tools.
Using these allows us to quickly make changes to our CSS, see their effect in real-time, then add the changes to our CSS files. A much-neglected method of writing CSS that’s quick and helps to reduce the amount of troubleshooting you need to do.
The screenshots and instructions in this article are from Chromium’s DevTools. This is the developer panel found in any browser that runs on Chromium: Google Chrome, Brave, Opera, Vivaldi and Microsoft Edge (soon).
Firefox’s Developer Tools are excellent, too. Things might have slightly different names and positions, but Firefox allows you to do the same stuff, which is pretty cool.
There are a few ways to fire up DevTools. You can either:
Inspect
[alt] + [cmd] + [c]
on Mac, or [ctrl] + [shift] + [c]
on Windows/LinuxView > Developer > Developer Tools
More Tools > Developer Tools
When you’ve done that, the panel shown below will appear, normally anchored to the right or bottom of the browser.
Before you can make changes, the first thing you’ll need to do is select the element you want to change. There are a couple of ways to do this.
You can either:
Inspect
[alt] + [cmd] + [c]
on Mac or [ctrl] + [shift] + [c]
on Windows/Linux)Sometimes methods #1 and #3 won’t suffice. This might be because the element you’re targeting is below another element in the HTML or the element is simply unclickable.
In that case, you’ll need to use method #2. Handily, as you hover over and click through elements, DevTools will highlight whatever you’re hovering over in the browser.
You can see how the highlighting works below:
Once you’ve selected the element you want to change in DevTools, you’re ready to get started. DevTools allows us to add or change CSS in a few different ways.
The method you choose will depend on what you’re doing. Some ways of adding CSS are perfect for troubleshooting, while others are better if you want to write your project’s CSS in the browser.
Whichever method you choose, the DevTools panel you’re looking for is labelled Styles.
When you choose an element in DevTools the Styles tab will show you the CSS that’s affecting the element. Above all of the CSS you’ve written is a blank box that contains the following:
element.style {
}
Clicking anywhere in this box allows you to add a CSS property in value. Whatever you add here will be added to the element as an inline-style, which you can see in the element’s HTML.
If you want to quickly try out some CSS and see what effect it will have, this is a great method.
This is a similar principle to editing the element.style, but it’s a little less specific. There’s a chance something else in your CSS might take precedence over what you write here, but that is what it’s meant to do.
If you’re writing CSS or tweaking an existing site, you’ll often need to write a new rule. You can do this by selecting the +
icon in Styles.
This happens to be a brilliant way to troubleshoot specificity issues. If you’re having trouble getting your rules to take effect, but you can see them being overridden in the Styles or Computed tabs (i.e. they appear with a strikethrough), this can be a quick way to work out what’s going wrong.
You can see the other selectors that are affecting the rule, then tweak your CSS until it takes effect in the browser.
The Styles tab has a button labelled :hov
. This allows you to trigger the various states that might affect an element, such as an a
– it even includes the recent addition of focus-within
which is pretty cool.
Once you’ve selected the right element and activated the relevant state(s), you’ll be able to see the related CSS in the Styles/Computed tabs. The pseudo-class will also show in the browser.
For instance, if your menu items are supposed to turn red when you hover over them, they will turn red when you select the element and check the :hover
pseudo-class in DevTools.
NB: It’s not always easy to identify where the pseudo-class has been applied. In a menu, for instance, the :hover
pseudo-class may be applied to the li
rather than the a
. If you’re struggling to select the correct element, check the surrounding elements as well – the pseudo-class might have been added to them instead.
After a while, you might start using DevTools to make more significant changes to your CSS. If you’re making several changes at a time, you’ll want to regularly take note of these to replicate them in your CSS files.
DevTools makes this simple by tracking the changes you’ve made for you. As long as you don’t refresh the page, these changes will be stored in a single place, so you don’t need to remember what you’ve changed and changed back...
Look for a tab labelled Changes in the ‘Console drawer’. If this isn’t displaying, you can trigger it by pressing Escape
.
CSS inheritance can get complicated at times and it’s useful to be able to see the final output of your CSS quickly. This is especially true if you’re using relative units of measurement, where the value you’re specifying (such as an em
) won’t be calculated until the browser renders the code.
As you might expect, DevTools has a useful tool for this – the Computer styles tab. This might already be open (it’s the column with the Box Model at the top) – if not, it’s located next to the Styles tab.
In here, you can see the final calculated values of any property that has been specified. This might be font size, margin, padding or anything else.
Usefully, you can expand these to see any styles that have been overwritten (due to specificity or inheritance). You can also click through these to see them in the context of the CSS file.
If you’re developing the site locally (i.e. on your computer), you can take all of this one step further. DevTools lets you automatically save the changes you’re making to the files.
Under Customize and control DevTools select Settings > Workspace > Add folder...
then find the folder containing your CSS files.
When this is enabled, a little green circle will appear next to the file names in the Styles tab. This is certainly a useful feature, especially if you’re writing CSS from scratch. But be careful as it’s not so easy to undo changes!
A final non-CSS trick: you can drag-n-drop HTML elements around. This is a feature you might not use often but can be useful from time-to-time.
]]>