Month: October 2024

A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was time to update that and do the subject justice.

Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container, creating a distinct break between one. Like many things in CSS, there are a number of ways to go about this and we’re going to go over many of them right now!

Update (Oct. 25, 2024): Added an example that uses CSS Anchor Positioning.

Using Background Gradient

One simple way we can create the appearance of a changing background is to use gradients. Half of the background is set to one color and the other half another color. Rather than fade from one color to another, a zero-space color stop is set in the middle.

.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}

This works with a single container element. However, that also means that it will take working with floats or possibly some other layout method if content needs to fill both sides of the container.

Using Absolute Positioning

Another route might be to set up two containers inside of a parent container, position them absolutely, split them up in halves using percentages, then apply the backgrounds. The benefit here is that now we have two separate containers that can hold their own content.

Absolute positioning is sometimes a perfect solution, and sometimes untenable. The parent container here will need to have a set height, and setting heights is often bad news for content (content changes!). Not to mention absolute positioned elements are out of the document flow. So it would be hard to get this to work while, say, pushing down other content below it.

Using (fake) Tables

Yeah, yeah, tables are so old school (not to mention fraught with accessibility issues and layout inflexibility). Well, using the display: table-cell; property can actually be a handy way to create this layout without writing table markup in HTML. In short, we turn our semantic parent container into a table, then the child containers into cells inside the table — all in CSS!

You could even change the display properties at breakpoints pretty easily here, making the sides stack on smaller screens. display: table; (and friends) is supported as far back as IE 8 and even old Android, so it’s pretty safe!

Using Floats

We can use our good friend the float to arrange the containers beside each other. The benefit here is that it avoids absolute positioning (which as we noted, can be messy).

In this example, we’re explicitly setting heights to get them to be even. But you don’t really get that ability with floats by default. You could use the background gradient trick we already covered so they just look even. Or look at fancy negative margin tricks and the like.

Also, remember you may need to clear the floats on the parent element to keep the document flow happy.

Using Inline-Block

If clearing elements after floats seems like a burden, then using display: inline-block is another option. The trick here is to make sure that the elements for the individual sides have no breaks or whitespace in between them in the HTML. Otherwise, that space will be rendered as a literal space and the second half will break and fall.

Again there is nothing about inline-block that helps us equalize the heights of the sides, so you’ll have to be explicit about that.

There are also other potential ways to deal with that spacing problem described above.

Using Flexbox

Flexbox is a pretty fantastic way to do this, just note that it’s limited to IE 10 and up and you may need to get fancy with the prefixes and values to get the best support.

Using this method, we turn our parent container into a flexible box with the child containers taking up an equal share of the space. No need to set widths or heights! Flexbox just knows what to do, because the defaults are set up perfectly for this. For instance, flex-direction: row; and align-items: stretch; is what we’re after, but those are the defaults so we don’t have to set them. To make sure they are even though, setting flex: 1; on the sides is a good plan. That forces them to take up equal shares of the space.

In this demo we’re making the side flex containers as well, just for fun, to handle the vertical and horizontal centering.

Using Grid Layout

For those living on the bleeding edge, the CSS Grid Layout technique is like the Flexbox and Table methods merged into one. In other words, a container is defined, then split into columns and cells which can be filled flexibly with child elements.

CSS Anchor Positioning

This started rolling out in 2024 and we’re still waiting for full browser support. But we can use CSS Anchor Positioning to “attach” one element to another — even if those two elements are completely unrelated in the markup.

The idea is that we have one element that’s registered as an “anchor” and another element that’s the “target” of that anchor. It’s like the target element is pinned to the anchor. And we get to control where we pin it!

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
}

This sets up an .anchor and establishes a relationship with a .target element. From here, we can tell the target which side of the anchor it should pin to.

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
  left: anchor(right);
}

Isn’t it cool how many ways there are to do things in CSS?

Left Half and Right Half Layout – Many Different Ways originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

We’re keenly aware of the impact recent events have had on the WordPress community and ecosystem, and we’re deeply grateful to the many partners and customers who have stood by WP Engine and trust us to serve you in the face of unprecedented and unwarranted attacks and attempts to disrupt our platform. WP Engine’s top…

The post Ensuring Stability and Security: Recent Timeline appeared first on WP Engine.

You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.

It is indeed a lot of work. But I’m here to tell you it’s now a lot simpler with modern CSS!

Default HTML color scheme(s)

We all know the “naked” HTML theme even if we rarely see it as we’ve already applied a CSS reset or our favorite boilerplate CSS before we even open localhost. But here’s a news flash: HTML doesn’t only have the standard black-on-white theme, there is also a native white-on-black version.

If you want to create a dark mode interface, this is a great base to work with and saves you from having to account for annoying details, like dark inputs, buttons, and other interactive elements.

Switching color schemes automatically based on OS preference

Without any @media queries — or any other CSS at all — if all we did was declare color-scheme: light dark on the root element, the page will apply either the light or dark color scheme automatically by looking at the visitor’s operating system (OS) preferences. Most OSes have a built-in accessibility setting for your preferred color scheme — “light”, “dark”, or even “auto” — and browsers respect that setting.

html {
  color-scheme: light dark;
}

We can even accomplish this without CSS directly in the HTML document in a <meta> tag:

<meta name="color-scheme" content="light dark">

Whether you go with CSS or the HTML route, it doesn’t matter — they both work the same way: telling the browser to make both light and dark schemes available and apply the one that matches the visitor’s preferences. We don’t even need to litter our styles with prefers-color-scheme instances simply to swap colors because the logic is built right in!

You can apply light or dark values to the color-scheme property. At the same time, I’d say that setting color-scheme: light is redundant, as this is the default color scheme with or without declaring it.

You can, of course, control the <meta> tag or the CSS property with JavaScript.

There’s also the possibility of applying the color-scheme property on specific elements instead of the entire page in one fell swoop. Then again, that means you are required to explicitly declare an element’s color and background-color properties; otherwise the element is transparent and inherits its text color from its parent element.

What values should you give it? Try:

Default text and background color variables

The “black” colors of these native themes aren’t always completely black but are often off-black, making the contrast a little easier on the eyes. It’s worth noting, too, that there’s variation in the blackness of “black” between browsers.

What is very useful is that this default not-pure-black and maybe-not-pure-white background-color and text color are available as <system-color> variables. They also flip their color values automatically with color-scheme!

They are: Canvas and CanvasText.

These two variables can be used anywhere in your CSS to call up the current default background color (Canvas) or text color (CanvasText) based on the current color scheme. If you’re familiar with the currentColor value in CSS, it seems to function similarly. CanvasText, meanwhile, remains the default text color in that it can’t be changed the way currentColor changes when you assign something to color.

In the following examples, the only change is the color-scheme property:

Not bad! There are many, many more of these system variables. They are case-insensitive, often written in camelCase or PascalCase for readability. MDN lists 19 <system-color> variables and I’m dropping them in below for reference.

Cool, right? There are many of them! There are, unfortunately, also discrepancies as far as how these color keywords are used and rendered between different OSes and browsers. Even though “evergreen” browsers arguably support all of them, they don’t all actually match what they’re supposed to, and fail to flip with the CSS color-scheme property as they should.

Egor Kloos (also known as dutchcelt) is keeping an eye on the current status of system colors, including which ones exist and the browsers that support them, something he does as part of a classless CSS framework cleverly called system.css.

Declaring colors for both modes together

OK good, so now you have a page that auto-magically flips dark and light colors according to system preferences. Whether you choose to use these system colors or not is up to you. I just like to point out that “dark” doesn’t always have to mean pure “black” just as “light” doesn’t have to mean pure “white.” There are lots more colors to pair together!

But what’s the best or simplest way to declare colors so they work in both light and dark mode?

In my subjective reverse-best order:

Third place: Declare color opacity

You could keep all the same background colors in dark and light modes, but declare them with an opacity (i.e. rgb(128 0 0 / 0.5) or #80000080). Then they’ll have the Canvas color shine through.

It’s unusable in this way for text colors, and you may end up with somewhat muted colors. But it is a nice easy way to get some theming done fast. I did this for the code blocks on this old light and dark mode demo.

Second place: Use color-mix()

Like this:

color-mix(in oklab, Canvas 75%, RebeccaPurple);

Similar (but also different) to using opacity to mute a color is mixing colors in CSS. We can even mix the system color variables! For example, one of the colors can be either Canvas or CanvasText so that the background color always mixes with Canvas and the text color always mixes with CanvasText.

We now have the CSS color-mix() function to help us with this. The first argument in the function defines the color space where the color mixing happens. For example, we can tell the function that we are working in the OKLAB color space, which is a rectangular color space like sRGB making it ideal to mix with sRGB color values for predictable results. You can certainly mix colors from different color spaces — the OKLAB/sRGB combination happens to work for me in this instance.

The second and third arguments are the colors you want to mix, and in what proportion. Proportions are optional but expressed in percentages. Without declaring a proportion, the mix is an even 50%-50% split. If you add percentages for both colors and they don’t match up to 100%, it does a little math for you to prevent breakages.

The color-mix() approach is useful if you’re happy to keep the same hues and color saturations regardless of whether the mode is light or dark.

In this example, as you change the value of the hue slider, you’ll see color changes in the themed boxes, following the theme color but mixed with Canvas and CanvasText:

You may have noticed that I used OKLCH and HSL color spaces in that last example. You may also have noticed that the HSL-based theme color and the themed paragraph were a lot more “flashy” as you moved the hue slider.

I’ve declared colors using a polar color space, like HSL, for years, loving that you can easily take a hue and go up or down the saturation and lightness scales based on need. But, I concede that it’s problematic if you’re working with multiple hues while trying to achieve consistent perceived lightness and saturation across them all. It can be difficult to provide ample contrast across a spectrum of colors with HSL.

The OKLCH color space is also polar just like HSL, with the same benefits. You can pick your hue and use the chroma value (which is a bit like saturation in HSL) and the lightness scales accurately in the same way. Both OKLCH and OKLAB are designed to better match what our eyes perceive in terms of brightness and color compared to transitioning between colors in the sRGB space.

While these color spaces may not explicitly answer the age-old question, Is my blue the same as your blue? the colors are much more consistent and require less finicking when you decide to base your whole website’s palette on a different theme color. With these color spaces, the contrasts between the computed colors remain much the same.

First place (winner!): Use light-dark()

Like this:

light-dark(lavender, saddlebrown);

With the previous color-mix() example, if you choose a pale lavender in light mode, its dark mode counterpart is very dark lavender.

The light-dark() function, conversely, provides complete control. You might want that element to be pale lavender in light mode and a deep burnt sienna brown in dark mode. Why not? You can still use color-mix() within light-dark() if you like — declare the colors however you like, and gain much more fine-grained control over your colors.

Feel free to experiment in the following editable demo:

Using color-scheme: light dark; — or the corresponding meta tag in HTML on your page —is a prerequisite for the light-dark() function because it allows the function to respect a person’s system preference, or whichever single light or dark value you have set on color-scheme.

Another consideration is that light-dark() is newly available across browsers, with just over 80% coverage across all users at the time I’m writing this. So, you might consider including a fallback in your CSS for browsers that lack support for the function.

What makes using color-scheme and light-dark() better than using @media queries?

@media queries have been excellent tools, but using them to query prefers-color-scheme only ever follows the preference set within the person’s operating system. This is fine until you (rightfully) want to offer the visitor more choices, decoupled from whether they prefer the UI on their device to be dark or light.

We’re already capable of doing that, of course. We’ve become used to a lot of jiggery-pokery with extra CSS classes, using duplicated styles, or employing custom properties to make it happen.

The joy of using color-scheme is threefold:

• It gives you the basic monochrome dark mode for free!
• It can natively do the mode switching based on OS mode preference.
• You can use JavaScript to toggle between light and dark mode, and the colors declared in the light-dark() functions will follow it.

Light, dark, and auto mode controls

Essentially, all we are doing is setting one of three options for whether the color-scheme is light, dark, or updates auto-matically.

I advise offering all three as discrete options, as it removes some complications for you! Any new visitor to the site will likely be in auto mode because accepting the visitor’s OS setting is the least jarring default state. You then give that person the choice to stay with that or swap it out for a different color scheme. This way, there’s no need to sniff out what mode someone prefers to, for example, display the correct icon on a toggle and make it perform the correct action. There is also no need to keep an event listener on prefers-color-scheme in case of changes — your color-scheme: light dark declaration in CSS handles that for you.

Adjusting color-scheme in pure CSS

Yes, this is totally possible! But the approach comes with a few caveats:

• You can’t use <button> — only radio inputs, or <options> in a <select> element.
• It only works on a per page basis, not per website, which means changes are lost on reload or refresh.
• The browser needs to support the :has() pseudo-selector. Most modern browsers do, but some folks using older devices might miss out on the experience.

Using the :has() pseudo-selector

This approach is almost alarmingly simple and is fantastic for a simple one-pager! Most of the heavy lifting is done with this:

/* default, or 'auto' */
html {
  color-scheme: light dark;
}

html:has([value="light"]:checked {
  color-scheme: light;
}

html:has([value="dark"]:checked {
  color-scheme: dark;
}

The second and third rulesets above look for an attribute called value on any element that has “light” or “dark” assigned to it, then change the color-scheme to match only if that element is :checked.

This approach is not very efficient if you have a huge page full of elements. In those cases, it’s better to be more specific. In the following two examples, the CSS selectors check for value only within an element containing id="mode-switcher".

html:has(#mode-switcher [value="light"]:checked) { color-scheme: light }
/* Did you know you don't need the ";" for a one-liner? Now you do! */

Using a <select> element:

Using <input type="radio">:

We could theoretically use checkboxes for this, but since checkboxes are not supposed to be used for mutually exclusive options, I won’t provide an example here. What happens in the case of more than one option being checked? The last matching CSS declaration wins (which is dark in the examples above).

Adjusting color-scheme in HTML with JavaScript

I subscribe to Jeremy Keith’s maxim when it comes to reaching for JavaScript:

JavaScript should only do what only JavaScript can do.

This is exactly that kind of situation.

If you want to allow visitors to change the color scheme using buttons, or you would like the option to be saved the next time the visitor comes to the site, then we do need at least some JavaScript. Rather than using the :has() pseudo-selector in CSS, we have a few alternative approaches for changing the color-scheme when we add JavaScript to the mix.

Using <meta> tags

If you have set your color-scheme within a meta tag in the <head> of your HTML:

<meta name="color-scheme" content="light dark">

…you might start by making a useful constant like so:

const colorScheme = document.querySelector('meta[name="color-scheme"]');

And then you can manipulate that, assigning it light or dark as you see fit:

colorScheme.setAttribute("content", "light"); // to light mode
colorScheme.setAttribute("content", "dark"); // to dark mode
colorScheme.setAttribute("content", "light dark"); // to auto mode

This is a very similar approach to using <meta> tags but is different if you are setting the color-scheme property in CSS:

html { color-scheme: light dark; }

Instead of setting a colorScheme constant as we just did in the last example with the <meta> tag, you might select the <html> element instead:

const html = document.querySelector('html');

Now your manipulations look like this:

html.style.setProperty("color-scheme", "light"); // to light mode
html.style.setProperty("color-scheme", "dark"); // to dark mode
html.style.setProperty("color-scheme", "light dark"); // to auto mode

I like to turn those manipulations into functions so that I can reuse them:

function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
}
function switchLight() {
  html.style.setProperty("color-scheme", "light");
}
function switchDark() {
  html.style.setProperty("color-scheme", "dark");
}

Alternatively, you might like to stay as DRY as possible and do something like this:

function switchMode(mode) {
  html.style.setProperty("color-scheme", mode === "auto" ? "light dark" : mode);
}

The following demo shows how this JavaScript-based approach can be used with buttons, radio buttons, and a <select> element. Please note that not all of the controls are hooked up to update the UI — the demo would end up too complicated since there’s no world where all three types of controls would be used in the same UI!

I opted to use onchange and onclick in the HTML elements mainly because I find them readable and neat. There’s nothing wrong with instead attaching a change event listener to your controls, especially if you need to trigger other actions when the options change. Using onclick on a button doesn’t only work for clicks, the button is still keyboard-focusable and can be triggered with Spacebar and Enter too, as usual.

Remembering the selection for repeat visits

The biggest caveat to everything we’ve covered so far is that this only works once. In other words, once the visitor has left the site, we’re doing nothing to remember their color scheme preference. It would be a better user experience to store that preference and respect it anytime the visitor returns.

The Web Storage API is our go-to for this. And there are two available ways for us to store someone’s color scheme preference for future visits.

localStorage

Local storage saves values directly on the visitor’s device. This makes it a nice way to keep things off your server, as the stored data never expires, allowing us to call it anytime. That said, we’re prone to losing that data whenever the visitor clears cookies and cache and they’ll have to make a new selection that is freshly stored in localStorage.

You pick a key name and give it a value with .setItem():

localStorage.setItem("mode", "dark");

The key and value are saved by the browser, and can be called up again for future visits:

const mode = localStorage.getItem("mode");

You can then use the value stored in this key to apply the person’s preferred color scheme.

sessionStorage

Session storage is thrown away as soon as a visitor browses away to another site or closes the current window/tab. However, the data we capture in sessionStorage persists while the visitor navigates between pages or views on the same domain.

It looks a lot like localStorage:

sessionStorage.setItem("mode", "dark");
const mode = sessionStorage.getItem("mode");

Which storage method should I use?

Personally, I started with sessionStorage because I wanted my site to be as simple as possible, and to avoid anything that would trigger the need for a GDPR-compliant cookie banner if we were holding onto the person’s preference after their session ends. If most of your traffic comes from new visitors, then I suggest using sessionStorage to prevent having to do extra work on the GDPR side of things.

That said, if your traffic is mostly made up of people who return to the site again and again, then localStorage is likely a better approach. The convenience benefits your visitors, making it worth the GDPR work.

The following example shows the localStorage approach. Open it up in a new window or tab, pick a theme other than what’s set in your operating system’s preferences, close the window or tab, then re-open the demo in a new window or tab. Does the demo respect the color scheme you selected? It should!

Choose the “Auto” option to go back to normal.

If you want to look more closely at what is going on, you can open up the developer tools in your browser (F12 for Windows, CTRL+ click and select “Inspect” for macOS). From there, go into the “Application” tab and locate https://cdpn.io in the list of items stored in localStorage. You should see the saved key (mode) and the value (dark or light). Then start clicking on the color scheme options again and watch the mode update in real-time.

Accessibility

Congratulations! If you have got this far, you are considering or already providing versions of your website that are more comfortable for different people to use.

For example:

• People with strong floaters in their eyes may prefer to use dark mode.
• People with astigmatism may be able to focus more easily in light mode.

So, providing both versions leaves fewer people straining their eyes to access the content.

Contrast levels

I want to include a small addendum to this provision of a light and dark mode. An easy temptation is to go full monochrome black-on-white or white-on-black. It’s striking and punchy! I get it. But that’s just it — striking and punchy can also trigger migraines for some people who do a lot better with lower contrasts.

Providing high contrast is great for the people who need it. Some visual impairments do make it impossible to focus and get a sharp image, and a high contrast level can help people to better make out the word shapes through a blur. Minimum contrast levels are important and should be exceeded.

Thankfully, alongside other media queries, we can also query prefers-contrast which accepts values for no-preference, more, less, or custom.

In the following example (which uses :has() and color-mix()), a <select> element is displayed to offer contrast settings. When “Low” is selected, a filter of contrast(75%) is placed across the page. When “High” is selected, CanvasText and Canvas are used unmixed for text color and background color:

Adding a quick high and low contrast theme gives your visitors even more choice for their reading comfort. Look at that — now you have three contrast levels in both dark and light modes — six color schemes to choose from!

ARIA-pressed

ARIA stands for Accessible Rich Internet Applications and is designed for adding a bit of extra info where needed to screen readers and other assistive tech.

The words “where needed” do heavy lifting here. It has been said that, like apostrophes, no ARIA is better than bad ARIA. So, best practice is to avoid putting it everywhere. For the most part (with only a few exceptions) native HTML elements are good to go out of the box, especially if you put useful text in your buttons!

The little bit of ARIA I use in this demo is for adding the aria-pressed attribute to the buttons, as unlike a radio group or select element, it’s otherwise unclear to anyone which button is the “active” one, and ARIA helps nicely with this use case. Now a screen reader will announce both its accessible name and whether it is in a pressed or unpressed state along with a button.

Following is an example code snippet with all the ARIA code bolded — yes, suddenly there’s lots more! You may find more elegant (or DRY-er) ways to do this, but showing it this way first makes it more clear to demonstrate what’s happening.

Our buttons have ids, which we have used to target them with some more handy consts at the top. Each time we switch mode, we make the button’s aria-pressed value for the selected mode true, and the other two false:

const html = document.querySelector("html");
const mode = localStorage.getItem("mode");
const lightSwitch = document.querySelector('#lightSwitch');
const darkSwitch = document.querySelector('#darkSwitch');
const autoSwitch = document.querySelector('#autoSwitch');

if (mode === "light") switchLight();
if (mode === "dark") switchDark();

function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
  localStorage.removeItem("mode");
  lightSwitch.setAttribute("aria-pressed","false");
  darkSwitch.setAttribute("aria-pressed","false");
  autoSwitch.setAttribute("aria-pressed","true");
}

function switchLight() {
  html.style.setProperty("color-scheme", "light");
  localStorage.setItem("mode", "light");
  lightSwitch.setAttribute("aria-pressed","true");
  darkSwitch.setAttribute("aria-pressed","false");
  autoSwitch.setAttribute("aria-pressed","false");
}

function switchDark() {
  html.style.setProperty("color-scheme", "dark");
  localStorage.setItem("mode", "dark");
  lightSwitch.setAttribute("aria-pressed","false");
  darkSwitch.setAttribute("aria-pressed","true");
  autoSwitch.setAttribute("aria-pressed","false");
}

On load, the buttons have a default setting, which is when the “Auto” mode button is active. Should there be any other mode in the localStorage, we pick it up immediately and run either switchLight() or switchDark(), both of which contain the aria-pressed changes relevant to that mode.

<button id="autoSwitch" aria-pressed="true" type="button" onclick="switchAuto()">Auto</button>
<button id="lightSwitch" aria-pressed="false" type="button" onclick="switchLight()">Light</button>
<button id="darkSwitch" aria-pressed="false" type="button" onclick="switchDark()">Dark</button>

The last benefit of aria-pressed is that we can also target it for styling purposes:

button[aria-pressed="true"] {
  background-color: transparent;
  border-width: 2px;
}

Finally, we have a nice little button switcher, with its state clearly shown and announced, that remembers your choice when you come back to it. Done!

Outroduction

Or whatever the opposite of an introduction is…

…don’t let yourself get dragged into the old dark vs light mode argument. Both are good. Both are great! And both modes are now easy to create at once. At the start of your next project, work or hobby, do not give in to fear and pick a side — give both a try, and give in to choice.

Come to the light-dark() Side originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Terence Eden on using text-wrap: balance for more than headings:

But the name is, I think, slightly misleading. It doesn’t only work on text. It will work on any content. For example – I have a row of icons at the bottom of this page. If the viewport is too narrow, a single icon might drop to the next line. That can look a bit weird.

Heck yeah. I may have reached for some sort of auto-fitting grid approach, but hey, may as well go with a one-liner if you can! And while we’re on the topic, I just wanna mention that, yes, text-wrap: balance will work on any content. — just know that the spec is a little opinionated on this and make sure that the content is fewer than five lines.

There’s likely more nuance to come if the note for Issue 6 in the spec is any indication about possibly allowing for a line length minimum:

Suggestion for value space is match-indent | <length> | <percentage> (with Xch given as an example to make that use case clear). Alternately <integer> could actually count the characters.

You can use text-wrap: balance; on icons originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The spookiest day of the year is right around the corner. Take your Halloween pumpkin game up a notch by showing off your graphic design skills with a custom carving, and get inspired with these Halloween pumpkin ideas!

It’s not too late to find the perfect pumpkin at a local patch and spend some quality time (along or with your family) crafting a carving that no one else on your street will have. Not sure where to start? Here’s we’ve collected 20 creative Halloween pumpkin carving ideas, from simple scenes to iconic graphic design elements to a few customized spooks.

1. Show Off Your Skills

Design a carving that isn’t a traditional Jack-o-Lantern. You can carve almost any scene that strikes your fancy with the right tools.

2. Pantone Pumpkin

Show off a little design humor with a Pantone-inspired carving that shows your favorite orange hue.

3. Geek Out

Show your code humor with a clever line that only designers and developers will understand.

4. Group Gourds

Come up with a creative way to create multiple carvings that connect using several pumpkins together.

5. Carve a Logo

Show your love for Adobe or WordPress with a logo carving.

6. Dedicate to a Special Character

Everyone has a favorite letterform or type element — mine is the ampersand — carve it creatively or using your favorite font.

7. Try a Trendy Element

It seems like sugar skull images are everywhere this season. Go trendy and carve one of your own.

8. Craft a Fictional Character

From star of horror movies to video game heroes, use your pumpkin carving skills to create a replica of your favorite fictional character.

9. Try Something Unexpected

Most pumpkin carvings feature designs on a round, head-on canvas. Turn the pumpkin around and cut out parts of it to create new shapes for a different spin on the carving, such as the fish, above.

10. Be Silly

Try a silly pumpkin carving design instead of creepers. This more family- and kid-friendly option might just be a hit at your house.

11. Take Advantage of Mistakes

Admit it, there’s been a time or two when you dropped the pumpkin and smashed it a little or when the carving just went a bit awry. Make the most of it with a double-pumpkin design and turn that mishap into a happy accident.

12. Pumpkins Plus Other Elements

Take your carving to the next level with add-ons. Organic elements are a natural fit, such as the greenery above. But you can also add lights or other materials for a mixed-media Halloween decoration.

13. Tattoo-Style Carving

One of the more recent trends in pumpkin carving is to create a design with cuts all the way through the flesh of the pumpkin as well as carving partially through the outer shell. (This can allow varying amounts of light to shine through and accommodate more intricate patterns.)

14. Make It Scary

Get in the holiday spirit with an absolutely scary design, such as the homage to Comic Sans above.

15. Use a Creepy Character

Or you can highlight the scary season with a character that’s actually creepy, such as a ghoul, goblin or less-than-friendly face.

16. Carve a Cool Pattern

Rather than focusing on just one side of the pumpkin, develop a pattern or texture that can be incorporated all the way around. (It’s a great chance to use a trendy geometric shape.)

17. Think in Theory

Go beyond a simple carving with a pumpkin concept that uses a lot of imagination. Note how the example above mimics the golden ratio in the shape of a nautilus.

18. Highlight a Fav Font

Show off your design skills with a special message featuring your favorite font. Who said a carving has to be a picture? Words are OK, too.

19. Think About Lighting

If you plan to put a candle your pumpkin make sure the carving is designed to let that light shine through. Create a design that will look great in the dark, even if you can’t see the pumpkin itself.

20. Stick with a Classic

Just because you can go crazy with pumpkin carving doesn’t mean you have to. Sometimes the best idea is the most simple, classic one. Carve a classic Jack O Lantern with and put a candle inside to light the way for trick or treaters.

How Do You Carve a Custom Pumpkin Design?

Turn your design into a template for a custom Halloween pumpkin graphic design carving. Here’s how you do it:

• Create the design in Photoshop or Illustrator. Make sure to use plenty of thick lines between cut areas or you might end up with a butchered pumpkin. The easiest designs include full cutouts. The most complicated entail carvings that require more detailed cuts on thin lines or elements.
• Print the design at a size to match your pumpkin. An outline design is sufficient and easiest to work with.
• Transfer the design to the pumpkin for carving by covering the back of the paper with graphic or charcoal, taping the paper to the pumpkin and then tracing the design. Other options include adding a sheet of tracing paper between the printed design and pumpkin before tracing or attaching the design to the pumpkin and then “tracing” the design to the orange orb by poking holes in the paper through to the pumpkin as a carving guide.
• Remove the paper from the pumpkin and then carve it using the outline guide you’ve created. Just make sure to cut the top off and scoop all the seeds out first. It will make for much easier (and cleaner) carving.

Images from Google search. Design Shack did not actually carve these pumpkins (all our fingers are intact). Click the images for source links, information and more.

Love it or hate it, Comic Sans is one of the most iconic and recognizable fonts out there. Known for its casual, playful style, it’s often used in informal settings or for designs that need a touch of fun.

However, while its charm is undeniable, Comic Sans isn’t always the perfect fit for every project. If you’re looking for a similar font that captures the same lighthearted vibe but with a more refined touch, you’ve come to the right place.

In this post, we’ve rounded up the best fonts similar to Comic Sans to give you the same playful feel while adding a bit more style and versatility. These fonts maintain the friendly, approachable look of Comic Sans but offer variations that are better suited for professional designs, children’s projects, educational materials, and more.

Neue Comic

Neue Comic is a rounded typeface that reinterprets the whimsical charm of Comic Sans with a fresh, modern twist. Designed to optimize both fun and functionality, Neue Comic boasts seven weight options and corresponding obliques. This new font, with its rhythmic, legible design, strikes a harmonious balance between whimsical ’90s nostalgia and contemporary sophistication, challenging the notion that playfulness can’t be refined in typography.

Comic Roxan

Check out Comic Roxan, an engaging and versatile font similar to Comic Sans. This distinctive typeface is ideal for a myriad of designs including movie scenes, posters, album covers, logos, and more. With OTF, TTF, and WOFF formats included, Comic Roxan is a flexible tool, ready to add fresh creativity to your design palette.

Comic Story

Comic Story is a lively display typeface perfect for fun, light-hearted projects. Its cheerfulness adds a certain charm to logos, branding, greeting cards, posters, and other designs. The files include Comic Story.ttf and Comic Story.otf. This engaging typeface encourages you to put your heart into your work and enjoy the creative process.

Comic Animal

Comic Animal is a whimsical handwriting display font. Perfectly adaptable for any design project, this font exudes a charming simplicity and trends. Available in OTF, TTF, WOFF, and WOFF2 formats, it’s a versatile favorite that could quickly become your standard choice across various design occasions.

Hey Comic

Hey Comic is a bold, cheerful font perfect for creating a fun, engaging atmosphere in your projects. Ideal for logos, branding, greeting cards, or posters, this versatile font offers multilingual support. Both standard and extrude versions are included. Created with heart and passion by Khurasan, it adds a playful touch to any design.

Comic Mode

Comic Mode is a whimsical yet formal sans serif font that comes in nine weight variations. Perfect as a refined alternative to Comic Sans, its distinctive style is shaped by a blend of technical typography and relaxed handwriting. From thin and round to black and elliptical shapes, its diversity is extended with the addition of oblique styles, culminating in 18 different styles.

Coming Sans

Coming Sans is a cheerful, versatile font that evokes a playful comic book feel. Ideal for a range of uses such as children’s storybooks, comic-themed designs, and catchy headlines, this font inspires lighthearted creativity. It includes uppercase, lowercase, symbols, punctuation, numerals, ligature, alternate, and multilingual support, available in OTF, TTF, WOFF, and WOFF2 formats.

Comic Speeds

Comic Speeds is a playful, distinctive display font reminiscent of comic sans. What sets it apart are the alternate characters featuring ‘speed’ effects that make it perfect for cartoon-based creative endeavors. It’s recommended for logos, social media posts, product packaging, special events, and more.

Mindy

Meet Mindy, a comic display font with a rounded, bold style reminiscent of Comic Sans. This versatile font is ideal for everything from children’s book titles and comic books to posters, social media content, and branding for kids’ items. The zip file includes Mindy in OTF, TTF, WOFF and WOFF2 formats, perfect for all your creative needs.

Best Seller

Best Seller, a minimalist sans serif font, serves as a valuable creative asset. Reminiscent of Comic Sans in style, it can enhance everything from children’s books and flyers to book titles, advertisements, and so much more. The download includes useable formats such as OTF, TTF, WOFF, and WOFF2, making it a versatile choice for your design project needs.

Healing Sunday

Healing Sunday is a playful, textured font reminiscent of handwriting that adds authenticity to any creative project. Perfect for logos, invitations, advertisements, or packaging, this hand-drawn font brings a natural touch and detailed beauty to designs. It’s accessible in most design software, including Adobe Illustrator and Microsoft Word.

Lemondy

Experience the quirkiness of Lemondy, a playful font inspired by hand-drawn sketches. Excellent for headlines and titles, it adds a dash of fun to book covers, comic texts, packaging labels, merchandise, and children’s books. It features uppercase letters, numbers, punctuation and supports multiple languages.

Kidster

Kidster is a captivating comic display font that emulates a handmade look, similar to Comic Sans. This versatile font can be used on a variety of platforms from book titles and news headlines to posters, cards, banners and flyers. Appreciated for its scalability, Kidster comes in a convenient zip file with four formats: OTF, TTF, WOFF and WOFF2.

Comiquest

Comiquest is a delightfully versatile handwritten comic font. Perfectly blending casual charm with modern simplicity, this font gives your creative endeavors a unique, personal touch. It suits branding, logos, invitations, and posters impeccably and maintains a polished appearance. With its accessible and stylish feel, Comiquest is sure to enhance your design work.

Sans Block

Sans Block is a delightfully casual handwritten font! Use it to infuse a fun, laid-back vibe into anything – from comic books to advertisements, posters, book titles, school flyers and even social media content. The downloadable zip file comes packed with Sans Block OTF, TTF, and a webfont-TT. It’s your perfect partner to design something truly awesome!

Basmety

Meet Basmety, a cheerful comic display font that brings joy to every word. Ideal for a range of uses from comic books and classroom settings, to kids’ products and social media content, Basmety livens up any text with its playful style. The downloadable zip file comes with OTF, TTF, WOFF, and WOFF2 formats.

Ant Rich

Ant Rich is a whimsical comic font that’s perfect for lending an air of playful simplicity to your work. Ideal for projects ranging from flyers and book titles to social media content and logos, it’s easily incorporated into your design due to the included OTF, TTF, WOFF, and WOFF2 formats.

Free Fonts Like Comic Sans

Comic Story

This creative and playful font also features a letter design similar to Comic Sans. It is designed with fun and children’s designs in mind. You can use it to add beautiful titles to your packaging designs, posters, book covers, and much more.

Comic Cheese

Comic Cheese is another creative font similar to Comic Sans. This font also has a playful letter design inspired by comic books. The font is most suitable for designing titles and headings for all kinds of fun, entertaining, and playful design projects.

GOLDSTEP

Featuring tall and condensed letterforms, this free font shares many similarities with the iconic Comic Sans font. It has the same playful and funny-looking letter design as the Comic Sans and comes with a set of all-caps letters.

Comic Panels

If you prefer to use a unique font with a playful look, this free font is perfect for your projects. Comic Panels is a free font inspired by Comic Sans and it features playful letters with a handwriting style.

Erik Sans

Erik Sans is another free font similar to Comic Sans. It features the same playful and quirky letter design as the Comic Sans font but with its own unique decorative elements. This font will surely add a creative look to your designs.

There’s a lot of math behind fluid typography. CSS does make the math a lot easier these days, but even if you’re comfortable with that, writing the full declaration can be verbose and tough to remember. I know I often have to look it back up, despite having written it maybe a hundred times.

Silvestar made a little VS Code helper to abstract all that. Type in the target values you’re aiming for and the helper expands it on the spot.

He says ChatGPT did the initial lifting before he refined it. I can get behind this sort of AI-flavored usage. Start with an idea, find a starting point, look deeper at it, and shape it into something incredibly useful for a small, single purpose.

Clamp it! VS Code extension originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

If you’re looking for ways to make your titles and headings look good in your video projects, you’ve come to the right place.

Today, we bring you a collection of Premiere Pro text effects and animated typography templates that you can use to create mind-blowing text animations.

The best part is that these templates and presets are made by professional designers. So you don’t have to spend hours trying to find the right combinations. All you have to do is download the template, import it in Premiere Pro, and add the effect to your project timeline.

You’ll find some cool and creative Premiere Pro text effects in this collection, unlike anything you’ve seen before. Be sure to download them all below.

Top Pick

Trendy Premiere Pro Text Effect Templates

This is a bundle full of trendy and stylish text effects you can use to add attention-grabbing animations to your titles and headings to make more professional-looking videos.

There are multiple styles of text animations in this pack that are most suitable for fashion and lifestyle-themed videos, as well as many other types of videos.

Why This Is A Top Pick

The typography animations in this template kit have modern and trendy designs that will instantly attract the attention of your viewers. They are quite easy to customize as well.

100 Cinematic Titles for Premiere Pro

This is a massive collection of Premiere Pro title templates that offers a hundred unique cinematic-style text animation templates. Ideal for adding a professional touch to your videos, these templates are designed to help make your editing process quicker and easier. Utilize these to enhance storytelling in your projects.

Retro 80s Text Animations for Premiere Pro

Another creative collection of text templates for Premiere Pro that adds a retro touch to your work. These stylish animations help breathe life into your text, taking your video project back to the vibrant 80s era. It’s a fun and easy way to enhance your visual storytelling.

Cyber Tech Title Animations for Premiere Pro

A stylish text template for Premiere Pro that unveils your title through high-end, cyberpunk-style animations. With full-controller features, you can easily personalize aspects like position and scale. No need for After Effects, just import the “MOGRT” file and you’re set. Ideal for Esports videos, tech shows and sci-fi films.

9 Sale Promo Typography Animations for Premiere Pro

This Premiere Pro template kit makes creating text animations seamless, especially for beginners. This user-friendly package includes a helpful video tutorial and offers a full HD resolution. It’s easily customizable and compatible with Premiere Pro CC 2018 and higher, as well as After Effects CC 2022.

Liquid Text Animations for Premiere Pro

Another captivating Premiere Pro template featuring liquid-style animations. It incorporates fluid-like animations to enhance your text, transforming it into an engaging visual experience. This template is ideal for those looking to give their Premiere Pro projects a unique touch without being overly sales-centric.

Trendy Kinetic Typography Premiere Pro Templates

This Premiere Pro template pack offers dynamic text animations to enrich your content with lively visuals. These templates work wonders for various purposes, such as marketing, education, entertainment, travel, and music videos. With ten kinetic titles, 4K resolution, color controls, and a fast render, these templates require no plugins.

Titles With 3D Elements Premiere Pro Text Effects

This is a unique template kit for Premiere Pro that features stylish text effects with 3D elements. There are multiple title scenes in this template pack for you to add cool and creative intros for your videos. They all feature adaptive designs with up to 4K resolution.

Stylish Titles Premiere Pro Text Effect Templates

If you’re looking for a title template with a minimal and clean design, this Premiere Pro template is perfect for your project. It includes multiple text effects with modern animations and easily customizable elements.

Original Text Styles for Premiere Pro

Choose from 5 cool Premiere Pro text effects to add colorful and attractive titles to your videos. Each text effect in this template kit is different from the others. They are perfect for promo videos, social media videos, YouTube intros, and much more.

Kinetic Animated Premiere Pro Text Effects

This Premiere Pro template features some of the coolest text effects we’ve seen. It includes 10 different animated text effects with editable colors and text. You can also adjust the duration and animation effects to your preference.

Free Large Text Block Premiere Pro Text Effect

Another free text effect for Premiere Pro. This template comes with a big text block with simple transition animations. It’s ideal for adding attractive intros and titles for your videos.

8 Modern Premiere Pro Text Effect Templates

With 8 different text effects to choose from, this Premiere Pro template kit will help you craft the best titles for your video projects. Each text effect in this bundle has fully customizable elements and is compatible with up to 4K resolution.

Miscellaneous Text Animations for Premiere Pro

A collection of modern text effects for Premiere Pro. There are 10 trendy text animations included in this template pack for you to use in your social media promos, YouTube videos, and business videos. It includes free fonts and a tutorial as well.

Shadow Lower Thirds for Premiere Pro

These Premiere Pro text effects are ideal for crafting unique lower-thirds for documentaries, movie credits, and various other videos. It comes with 7 different lower thirds designs with easily customizable text, colors, and fonts.

Adaptive Premiere Pro Text Effect Templates

Using text effects and titles with adaptive designs is important when you are designing content for multiple platforms. The Premiere Pro templates in this bundle are designed with that goal in mind. They feature stylish text effects and animation with smooth adaptive layouts.

Free Burning Animation Premiere Pro Text Effect

This free animated text effect is perfect for adding a cool title for your fun and playful videos. It features a fire blast effect for in-and-out animations with animated cartoon flames on the text.

Monochrome Animated Typography Slides for Premiere Pro

With this Premiere Pro template kit, you get a two-in-one kind of deal. It includes a set of typography slide designs that also features cool text animations. The template will allow you to instantly add a cool-looking title scene or opening scene to your videos with just a few clicks.

Motion Type – Premiere Pro Text Effects

The text effects in this template kit have some of the most amazing designs we’ve seen. There are many different types of effects, including cyberpunk-style text animations, colorful typography effects, subtle text animations, and more. There is a total of 20 different text effects in this pack for any type of project you have.

Motion Styles – Text Effects & Animations For Premiere Pro

If you’re looking for colorful and creative text effects to add a bit of style to your videos, then this Premiere Pro template pack is for you. It includes 54 trendy text effects with vibrant designs and attractive animations. They are perfect for social media videos as well as YouTube vlogs and business promos as well. You can use them by simply dragging and dropping them into your timeline.

Text Animation Toolkit – 122 Premiere Pro Text Effects

This is a complete text animation toolkit that features more than 120 different text effects. The effects in this pack have simple and subtle animations. And they are ideal for business and professional video projects. The best part is that these animations are fully compatible with any type of font or language. And it includes both in and out animations.

10 Free Texture Title Animations for Premiere Pro

If you’re low on budget, you can grab this text animations pack for free. It includes a set of unique title animations with textured designs. Perfect for making your YouTube vlogs and social videos look more creative.

15 Free Animated Lower-Third Premiere Pro Templates

With these free Premiere Pro text animations, you can create stylish lower-thirds for your videos. They are especially useful when making documentary-style videos as well as for adding credits and titles too.

Essential Typography Premiere Pro Text Effects

You’ll find clean and professional typography animations in this bundle of Premiere Pro text effects. You can use them to create titles for promo videos, lower thirds for business videos, social media clips, and more. Each text animation preset is easily customizable so you can adjust settings to your preference as well.

Stomp Typography – Fast Premiere Pro Text Animations

This Premiere Pro text animations pack comes with a set of fast-paced text effects. They feature stomp-style text animations that allow you to create titles and text with quick animations. You can choose from multiple styles of effects. These are especially suitable for short Instagram and TikTok videos and YouTube videos.

25 Simple Motion Text Animations for Premiere Pro

Looking for simple and classy text animations for business videos? Then this bundle of Premiere Pro templates is for you. There are 25 different text effects included in this pack. They all feature simple and professional text animations suitable for business events and promo videos.

40 Kinetic Titles & Text Effects for Premiere Pro

Another collection of simple text effects. The text effects in this collection feature kinetic-style animations. There are 40 unique animations with different styles of effects to choose from. Of course, they are easily customizable to your preference as well.

Project-x – Glitch & Distortion Text Effects for Premiere Pro

The glitch text effect is one of the most popular effects used in modern videos, especially in YouTube videos. If you want to add the same stylish effects to your text and titles, grab this bundle. It includes 30 different glitch and distortion text effects that are perfect for technology, gaming, and many other trendy videos.

Free Paint Splash Premiere Pro Text Effect Animation

A creative text effect animation featuring colorful paint splash design. This simple yet beautiful animation will fit in perfectly with your creative DIY and educational videos. It’s free to download as well.

Free Faded Glitch Title Animation for Premiere Pro

Another simple glitching text effect. You can use this one for free with your personal and professional videos. The template can also be customized and used to create title scenes or typography slides.

Fresh Typography – Premiere Pro Text Effects & Slides

This Premiere Pro template kit features typography slides that you can use to add stylish titles and typography scenes to your videos. They also come with unique text effects and animations as well. The dynamic design of these templates offers an opportunity for you to experiment with different styles of text animations.

Abstract Typography – Unique Premiere Pro Text Effects

If you’re looking for unique and uncommon text animations to make your videos stand out, this text effects toolkit is perfect for you. It comes with lots of cool animations with 3D-like text effects. With these text effects, your videos will definitely grab the attention of your audience.

Premiere Pro Text Transitions with Animated Titles

These text effect templates allow you to create modern transitions with text and titles. The text transition effect is a commonly used animation in social media videos, especially on Instagram. There are many different styles of effects in this pack for you to make all kinds of social media promos and videos.

Just Typography – Premiere Pro Text Effects Pack

This bundle lets you choose from many different text effects to create professional and business videos. The effects feature simple and clean text animations. And they can be easily customized to your preference to create your own text effects as well.

Chaotic Typography – Premiere Pro Text Effect Templates

Just as the name suggests, this Premiere Pro text effects bundle includes some chaotic and unusual text animations, unlike anything we’ve seen before. The weirdness of the animations actually makes them quite unique and interesting to look at. So they might help you get the attention of your viewers.

This is Black – Premiere Pro Typography Animations

This Premiere Pro text effect template features cool animations with 3D-like designs. They are easily editable and you can use them to create eye-catching text animations for social media videos, as well as corporate and business videos.

Free Colorful Glitch Text Animation for Premiere Pro

If you can’t get enough of the glitch text animations, be sure to grab this one too. It features a unique glitching effect with a colorful design. You can easily customize the text and animation effect to your preference.

Free Typing Text Effect Premiere Pro Template

This is a simple and free text effect for Premiere Pro. It features a minimal animation that makes your text appear with a typing effect. The animation is most suitable for corporate and business videos.

How To Animate Text in Premiere Pro

Premiere Pro comes with a set of default presets in the Effects library you can use to animate text and titles. These are easy to use and feature simple animations.

But the problem is these animations and effects are used by everyone. So if you want to make your videos stand out, you need to find unique text effects for Premiere Pro.

We recommend grabbing a unique Premiere Pro text effect from our collection above. It doesn’t matter if it’s a free template or a premium one, you just need to find a preset with a cool animation.

Import that preset in Premiere Pro and you can animate your text quite easily.

Or, if you prefer to create your own text effects, you can follow this step-by-step tutorial to learn how to craft Premiere Pro text effects.

Roboto’s clean, modern, and highly readable style has made it a popular choice for digital and print designs alike. But sometimes, you might want a font that offers a similar vibe with a slightly different character or a unique twist to make your projects stand out.

In this collection, we’ve rounded up the best fonts that are similar to Roboto and capture the same sleek and versatile appeal while bringing their own distinct qualities.

Whether you’re working on a website, mobile app, or branding project, these fonts provide the same professional and contemporary look that Roboto is known for, but with subtle variations in letterforms and styles.

You’ll find fonts that are ideal for body text, headlines, and user interfaces, offering plenty of options to match the tone and feel of your design. Have a look.

Futuru

Futuru, a geometric sans-serif font, combines classic elegance with modern design to provide a unique solution for multiple design needs. This distinctive font delivers a sleek, professional feel perfect for branding or digital projects. With its legibility, versatility, and multilingual support, Futuru is ideal for both corporate use and creative projects.

Physis

Physis is a refined neo-grotesk typeface, reminiscent of Switzerland’s Golden Age of graphic design. Cleaner, elegant, and featuring generous spacing, Physis serves as a versatile font option for both screen and editorial projects. Its flexible family offers five weights from Light to Black, coupled with matching slanted forms for added variety.

Helixa

Helixa is a stylish and versatile neo-grotesque typeface, perfect for making an impact in branding, logotypes and marketing materials, both in print and online. With 12 fonts, each with seven upright weights and Italic equivalents, and a total of 300 glyphs, it offers extensive language support. Its clean design and modern look make it an enduring choice for all design needs.

Osande TXT

Osande TXT is a dynamic neo-Grotesque Sans font family, inspired by the modern Osande Pro. Its features include a large x-height, intriguing yet simple forms, and a low contrast with a condensed width. Offering enhanced characters and comprehensive language support, it’s an adaptable choice for assorted body text or display designs.

Vistol

Vistol, with its Roboto-like style, presents a neo-grotesque sans-serif font family perfect for various applications. It boasts 18 weights, European language support, and features an array of symbols. Exceptional for print, packaging, editorial and branding needs, its low-stroke contrast ensures readability even in smaller sizes. The font family comes with 18 OTF fonts, including upright and italic versions.

Orion Pro

Orion Pro, a modern Sans-Serif typeface, is inspired by celebrated Swiss fonts. This versatile pack, produced by Fontastica and distributed by Designova, comes with 12 diverse fonts. With its sleek style, it’s perfect for branding, logotypes, and other print and web purposes.

Black Pro

Explore the adaptable and geometric nature of the Black Pro sans serif font family. This modern typeface, with its clean lines and professional aesthetic, is perfect for branding, headlines, and editorial design. Its various weights and styles improve readability and aesthetics, making it suitable for a wide range of design projects, from corporate branding to creative pursuits.

VISIA Duo

VISIA Duo is an elegant font family consisting of 8 font weights, including outline version. It shares similarities with the Roboto font and consists of ‘Natural’ and ‘Outline’ versions of the VISIA Pro Geometric Sans-Serif typeface, each in four variations: Regular, Bold, Italic, and Bold Italic. The files come in OTF, TTF, and Web Font formats.

Kinetica

Kinetica is a dynamic typeface, influenced by movement and globalization. It’s a versatile font with two weights – Light and Bold, each with matching obliques. Ideal for headlines or large-format prints, Kinetica easily adapts to branding, social media, or editorial design tasks. With built-in support for multiple languages based on the Latin alphabet, it’s a minimalistic, yet eye-catching addition to your font library.

Osande Pro

Osande Pro, inspired by the modern sans serif design, mirrors the simplicity of Roboto with a unique neo-Grotesque touch. It boasts a total of three forms – italics, obliques, and upright – each offering seven distinct weights for flexibility. This versatile font, compatible with a broad range of projects, comes packed with 245 glyphs and supports Basic Latin, English letters, West European diacritics, and more.

JUST Sans

JUST Sans is a versatile and modern geometric sans serif typeface boasting endearing warmth. It fuses neutrality and expressiveness, sophistication and approachability. With its wide, open-air characters and sharp, gripping terminals, the font embodies a contemporary elegance. The package offers seven weights, extensive Latin language support, adjusted kerning, and clear web fonts suitable for various design-based applications.

Progress Pro

Explore your creativity with Progress Pro, a contemporary sans-serif typeface designed by Richard Mayer. Perfect for film posters, headlines, logo designs, and big banners, this font is a modern twist on classic, decorative typography. With the inclusion of OTF, TTF, and web fonts, it offers versatility for all your design needs.

Neosande

Neosande, designed by Faldykudo in 2023, is a versatile, sleek, and legible neo-grotesque sans serif typeface. Offering a range of weights, high legibility, and support for multiple languages, it’s ideal for various applications like branding, web design, advertising, and editorial design. The typeface’s simple, clean lines give it a professional, stylish, and modern appeal.

Linear Grotesk

Linear Grotesk is a beautifully handcrafted, classic sans-serif typeface available in 16 variations. Ideal for graphic and web design, print or display, this typeface also suits branding, marketing graphics, and editorial design. This comprehensive package is designed for simplicity and readability and includes OTF, TTF, and Web Fonts, as well as an HTML and CSS WebFont preset and demo.

Nobel Uno

Nobel Uno is a clean, modern sans-serif typeface ideal for contemporary design projects. As the fourth font from the advanced Uno class families, it presents 16 fonts with upright weights and matching italics. Equipped with an extended character set featuring 386 glyphs, Nobel Uno supports over 120 languages which makes it suitable for diverse applications including graphic design, branding, web, and editorial design.

Optika

Optika is a sleek, modern Sans-Serif typeface perfect for all design needs. This all-around typeface stands out in logotypes, headlines, and branding. Handcrafted with Western European, Central European, and South Eastern European sets, Optika includes 394 glyphs and 14 fonts, coming in seven weights for both upright and italic.

Univa Nova

Univa Nova, a minimalist typeface, offers elegant design and superior usability. Ideal for graphic and web design, textual presentations, and various marketing graphics, its attributes extend to enhanced letter-spacing optimal for headlines and logotypes. Developed with OpenType features, it supports Western and Central European language sets.

Catesque

Catesque, a versatile and dynamic font, is excellent for both large-scale designs and smaller text applications. Its five weights range from light to black, accommodated by matching italics and various alternate characters that add unique characters to your design work. This font further supports numeric designs with specialized numeral features.

Quadran

Quadran is a modern, geometric grotesque type family with a tailored character, suited for today’s design trends. The unique double storey “g” adds a classic touch. With weights ranging from ExtraLight to Black, extensive language support, and a variety of OpenType features, Quadran is versatile across small and medium text sizes. It’s perfect for editorial fashion magazines, website headings, signage, logos, and more.

Free Fonts Like Roboto

Roboto Flex

Roboto Flex is a unique, free font you can use to design stylish titles and headings. It comes with minimal and stylistic characters that improve upon the design of Roboto’s original design. The font is free for commercial use.

Roboto Serif

What if Roboto was a serif font? Well, you don’t have to imagine it. With this free font, you can craft serif typography with letterforms that are quite similar to Roboto. This font is completely free for commercial use.

Phlatt Grotesk

Phlatt Grotesk is another free font that is inspired by Roboto. It features a simple and professional letter design that will fit perfectly with your business and corporate-themed design projects. It’s free for commercial use.

Host Grotesk

This free font is also perfect for designers looking for a Roboto alternative. It comes with a clean and simple letter design with subtle stylistic elements. You can use this font for free with both personal and commercial projects.

Artificial Intelligence (AI) is revolutionizing various sectors, and education is no exception. The integration of AI into the classroom is transforming how educators teach and how students learn. By harnessing AI’s capabilities, educational institutions can create more personalized, efficient, and engaging learning experiences. In this blog, we’ll explore how AI is shaping the future of …

Continue reading "The AI-Powered Classroom: Shaping the Future of Education with Artificial Intelligence"

The post The AI-Powered Classroom: Shaping the Future of Education with Artificial Intelligence first appeared on Lucid Softech.