Grid Lanes – The Future of Masonry Layout
This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.
Winging It
post type
Responsive Type Doesn’t Have to Be Complicated
Building a type scale for your website
Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t need anything that complicated to build a type scale for your next site. With the right units, we can get excellent results from a few lines of (readable) code – without relying on third party tools.
Check out our Typography Playlist today.
What We Cover:
Copy permalink to “What We Cover:”- My base rule is that we want to avoid unit conversions
- If we’re talking about pixels, use pixels
- If we’re talking about relative sizes, use relative units
- How do we work with the user default font size? [12:05]
- How it’s often been done: a multiple of the user’s size, calculated
- My approach: Just say the size I want, but clamped by the user
- How will the font respond to viewport sizes? [19:00]
- Big ol’ warning about zoom and viewports
- We don’t know if it’s a small screen or a zoomed screen
- See how zoom becomes less effective as we add responsiveness [21:53]
- Rules:
- Never change the font size more than 2.5x based on the window [31:00]
- Fluid type always starts with a base size
- If you know the breakpoints, set the breakpoints, it’s easier
- For a fluid approach, don’t worry about the exact breakpoints
- Big ol’ warning about zoom and viewports
- How do we generate a ‘scale’ of relative font-sizes?
- Using the
pow()function!
- Using the
- How do our scales scale?! Making the scale itself responsive
- Using a breakpoint is the easiest option
- Bonus material:
- Spacing relative to both the screen and text
Links:
Copy permalink to “Links:”- Ep 15: Relative Units & Typography with special guest Alan Stearns
- Responsive and fluid typography with Baseline CSS features
- Building Typographic Scales in CSS with :heading(), sibling-index(), and pow() by Stuart Robson
- CodePen: Responsive type live demo
Recent Episodes
Winging It post typeSurprising Effects of CSS Shorthands
CSS properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.
Winging It post typeDos & Don’ts of Anchor Positioning
CSS anchor positioning isn’t baseline yet, and there’s good reason for that. You can use it, but it comes with some caveats. James, Stacy, and Miriam cover new resources to make anchor positioning easier, and work through some demos to help you understand how anchor positioning works. We also look…
