Original Source: https://www.smashingmagazine.com/2020/03/monthly-roundup-03-2020/

Stay Calm And Read Smashing

Stay Calm And Read Smashing

Iris Lješnjanin

2020-03-13T12:30:00+00:00
2020-03-13T22:08:58+00:00

For all the times we asked folks about Smashing, most still seem to believe that we’re some sort of large publishing company situated somewhere in the United States — both of which are wrong. It all started in Freiburg, Germany, and the team consists of folks scattered all over the world — with most of us not working fulltime for Smashing.

That’s right, working remotely is quite familiar to us, and so with the current situation going on with COVID-19 that is making everyone uneasy, we’d like to make the best of things and help our friends who are having to work or lead teams remotely for the first time. Our editor-in-chief, Rachel Andrew, has prepared a nice post to help you stay connected and keep learning while we go through this together.

You may have already heard that SmashingConf SF has been postponed to November due to the unfortunate travel restrictions and many other reasons. It was truly a difficult decision for the team to make, but we believe it is the best way forward — safety and health always come first.

Without further ado, here’s a short update of things going on at Smashing and some super creative work shared from and to the community!

Happy reading — from my computer to yours!

Designing With Ethics In Mind

After months of hard work, the “The Ethical Design Handbook” is finally here — and it’s shipping! The response has already been overwhelmingly positive, and we’re excited to share reviews with you soon. There is still quite a bit of work to do on the web, but our hope is that with this book, you will be equipped with enough tooling to slowly move a company towards a more sustainable and healthy digital footprint!

Of course, you can jump to the table of contents right away, or download a free PDF excerpt to get a first impression of the book — we’re sure you won’t be disappointed! Read our official release post with all the details →

Always Learning New Things From One Another

We all have busy schedules, but there’s always time to pop in those earplugs and listen to some music or podcasts that make you happy! We’re moving on to our 12th episode of the Smashing Podcast — with folks from different backgrounds and so much to share! You’re always welcome to tune in and share your questions and thoughts with us anytime!

Previous Smashing Podcast episodes (including transcripts)
Follow @SmashingPod on Twitter

Apart from the heart-breaking news about our postponed SmashingConf SF, our SmashingConfs are known to be friendly, inclusive events where front-end developers and designers come together to attend live sessions and hands-on workshops. From live designing to live debugging, all of our speakers like to go into detail and show useful examples from their own projects on the big screen.

Here are some talks you may like to watch and learn from:

Talk Title
Speaker’s Name

Thinking With Grids
Jen Simmons

Building Accessible Interfaces: Patterns And Techniques
Sara Soueidan

Dynamic CSS
Miriam Suzanne

Dynamic Web Typography
Jason Pamental

Making A Difference With Differential Serving
Jeremy Wagner

Slam Dunk Your Javascript Fundamentals
Wes Bos

Think Like An Email Geek
Rémi Parmentier

Effortless Performance Debugging
Anna Migas

Move Fast & Don’t Break Things
Scott Jehl

Designer vs Developer!
Dan Mall, Brad Frost and Ian Frost

The first SmashingConf took place in Freiburg back in 2012, so there are so many more talks you can watch. See all SmashingConf videos →

Shining The Spotlight On React, Redux And Electron

Mark your calendars! Next week on March 19, we’ll be hosting a Smashing TV webinar with Cassidy Williams who’ll be explaining how to organize a modern React application and build an Electron application (with React). Join us at 17:00 London time — we’d love to hear your thoughts and experiences you’ve had with React in your projects!

Smashing TV is a series of webinars and live streams packed with practical tips for designers and developers. They’re not just talks, but more like conversations and “here-is-how-I-work”-sessions. Smashing Members can download recordings, and also receive discounts and lots of goodies to make their membership worthwhile. Tell me more →

Trending Topics On SmashingMag

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

“Why Are We Talking About CSS4?”
by Rachel Andrew
Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4. In this article, Rachel Andrew rounds up some of the pros and cons of doing so, and asks for your feedback on the suggestion.
“Setting Height And Width On Images Is Important Again”
by Barry Pollard
Thanks to some recent changes in browsers, it’s now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors.
“Setting Up Tailwind CSS In A React Project”
by Blessing Krofegha
This article introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. You’ll also learn how to seamlessly set up Tailwind CSS in a React project.
“Introducing Alpine.js: A Tiny JavaScript Framework”
by Phil Smith
Ever built a website and reached for jQuery, Bootstrap, Vue.js or React to acheive some basic user interaction? Alpine.js is a fraction of the size of these frameworks because it involves no build steps and provides all of the tools you need to build a basic user interface.
“How To Design Mobile Apps For One-Hand Usage”
by Maitrik Kataria
90% of the smartphones sold today have >5-inch displays. Bigger screen real estate presents newer challenges and opportunities for app makers and designers. Let’s look at how designing apps for one-handed usage can solve those challenges.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! So, without wanting to make this monthly update too long either, we’re shining the spotlight on the following projects:

P.S.: A huge thank you to Cosima Mielke for writing and preparing these posts!

Find And Fix Errors In Your Designs

We all know those moments when we are so immersed in a project that we lose the distance we need to be able to catch little inconsistencies: an incorrect border-radius around an image or missing styles or text, for example. If you’re designing in Figma, the free and open-source plugin Design Lint makes finding and fixing errors like these easy so that no bug makes it into production.

A free and open-source plugin for Figma built to help you find and fix errors in your designs.: Design Lint.

Design Lint checks for missing text, fill, stroke, and effects styles, and catches incorrect border-radius values on all your layers. To not interrupt your workflow, the plugin automatically updates as you fix errors. The repo is available on GitHub, so feel free to write specific rules to tailor the plugin to your needs.

Learn CSS Positioning With… Cats!

Could there be a better way to learn CSS positioning as with a bunch of friendly cats? That’s probably what Ahmad Shadeed thought, too, when he created his interactive guide to how CSS positioning works.

Meow! Ahmad Shadeed has prepared a great guide for you to learn everything about CSS positioning!

The guide teaches you to use CSS to position three cartoon cats and their blanket inside a box, and once you’ve grasped the concept, you can start tinkering with the interactive demo that visualizes how the result changes as you edit the values. Now who said learning can’t be fun?

Intimacy, An Interactive Short Poem

An inspiring experiment comes from the French graphic and interaction design student Thibaud Giffon: “Intimacy”. The interactive short poem uses abstract images, sound, and text to explore intimacy from different angles.

The “Mixed Up” musical poem is brought to life (sound ON) by just moving your cursor across the cords. Try it out!

Compassion, distance, confusion, touch — these are four of the eight chapters that make up the poem; and each one of them reflects the topic in its own, unique way: with warm and harmonious waves or circles that melt into each other but also with dissonant strings or colorful bubbles that burst as they make space for themselves. Beautiful!

All Your SVG Icons In One Place

Having one central place to organize all your assets is always a good thing, not only for teams — to keep track of what you have and to quickly find what you’re looking for. The free cross-platform app Iconset is such a place: it helps you collect, customize, share, and manage all your SVG icon sets.

Organizing SVG icons all in one place with Iconset.

To make it easier to find the icon you’re looking for, you can organize your icons in sets or with tags, and, once you’ve found the icon you need, you can drag it directly into your favorite tool. A real timesaver. Iconset supports cloud services like Dropbox or OneDrive so that all your icons are always in sync between team members. The app is available for Mac and Windows.

An Ancient Hero’s WebGL Adventure

A reluctant hero on a quest he never asked for — that’s the story behind the browser-based adventure video game Heraclos. Set in ancient Greece, the young Heraclos stumbles across an amphora that belongs to one of the gods. He is declared to be the chosen one and gets sent off to climb the secret mountain and return the amphora to his owner.

Heraclos, an adventure video game made in WebGL.

What makes the game so noteworthy is the fun twist in the interaction between the hero and the god (a parody of common heroic stories) but also the technical background: Heraclos was designed in only three months by a group of students at the Gobelins school of images in Paris — with WebGL and Cannon.js. A great example of what’s possible on the web.

An Open-Source Screen Recorder Built With Web Technology

Have you heard of Kap, yet? The open-source screen recorder is one that is definitely worth checking out if you’re frequently doing screen recordings.

Kap, an open-source screen recorder built with web technology.

Built with web technologies, Kap produces high-quality recordings in GIF, MP4, WebM, or APNG formats. You can include audio (even from your microphone), highlight clicks, and trim the recordings. As a bonus goodie, there are also options to share your recorded GIFs on Giphy, deploy them with ZEIT now, or upload them to Streamable. Perfect for technical demos.

Open Peeps, A Free Hand-Drawn Illustration Library

584,688 possible combinations. That’s the number of different characters you could create with Pablo Stanley’s hand-drawn illustration library Open Peeps.

“Open Peeps,” a hand-drawn illustration library created by Pablo Stanley.

Open Peeps lets you mix and match different vector elements to create diverse personalities: combine clothing and hairstyles, change emotion with facial expressions, set the scene with different poses — the possibilities are sheer endless. And if you’re in a hurry, Pablo also prepared some ready-to-download Peeps that you can use right away. Open Peeps is released under a CC0 license, so you are free to use the illustrations in both personal and commercial projects. A great way to add a handmade touch to your design.

How To Make Inputs More Accessible

In 2019, WebAim analyzed the accessibility of the top one million websites, with a shocking conclusion: the percentage of error-free pages was estimated to be under one percent. To make our sites inclusive and usable for people who rely on assistive technology, we need to get the basics of semantic HTML right. With its credo of starting small, sharing, and working together, Oscar Braunert’s article on inclusive inputs is a great starting point to do so.

Starting off with the basics of WAI, ARIA, and WCAG, the article explores how to make inputs more accessible. The tips can be implemented without changing the user interface, and, as Oscar puts it: “If in doubt, just do it. Nobody will notice. Except some of your users. And they will thank you for it.”

An Open-Source Font For Developers

High readability, quick text scanning, no distraction — these are just some of the demands developers have on a typeface. Well, the free and open-source typeface JetBrains Mono meets all of them beautifully.

JetBrains Mono’s typeface forms are simple and free from unnecessary details. Rendered in small sizes, the text looks crisper.

To do so, Jet Brains Mono takes advantage of some small but mighty details: Compared to other monospace fonts, the height of JetBrains Mono is increased while the characters remain standard in width to keep code lines to the length developers expect. To improve readability even further, 138 code-specific ligatures reduce noise so that your eyes need to process less and whitespace becomes more balanced. Clever! JetBrains Mono comes in four weights and supports 145 languages.

The Ultimate Guide To iframes

With a lot of articles advising against them, iframes don’t have the best reputation. JavaScript developer Nada Rifki sees things differently: She suggests not to let their reputation prevent you from relying on iframes. After all, they have many legitimate use cases.

The ultimate guide to iframes written by Nada Rifki.

To help you form your own opinion on this controversial element, Nada wrote an ultimate guide to iframes which explores iframe features and how to use them; tricky situations where iframes might come in handy; last but not least, how you can secure your iframe against potential vulnerabilities. A great opportunity to see things from a different perspective.

A Guide To Console Commands

The capabilities of the developer’s debugging console have evolved significantly in the past years — from a means to report errors to automatically logging information like network requests and security errors or warnings. There’s also a way for a website’s JavaScript to trigger various commands that output to the console for debugging purposes. And while these features are mostly consistent between browsers, there are also some functional differences.

“A Guide to Console Commands” by Travis Almand

If you’re looking for an overview of what console commands are capable of, Travis Almand put together a helpful guide. It covers Firefox and Chrome and examines various commands that can be used in the browser’s console output or with JavaScript. A handy summary.

Smashing Newsletter

Upgrade your inbox and get our editors’ picks 2× a month — delivered right into your inbox. Earlier issues.

Your (smashing) email

Subscribe →

Useful tips for web designers. Sent 2× a month.
You can unsubscribe any time — obviously.

(cm, vf, ra, il)

Original Source: https://www.sitepoint.com/git-techniques-to-know-before-you-join-a-team/?utm_source=rss

Have you been using Git for some time but never in a team environment? Are you familiar with the basics of Git but unsure how large teams use Git at work?

In this post, I’ll talk about the basic Git techniques that you must be familiar with before you join a team. I’ve listed them in an order that you’d logically follow to contribute to a repository, as the importance of each step is paramount. Let’s now jump into the list.

1. Cloning: Getting Started in a Team

If you’ve used Git for personal projects, you may only have initialized a project from scratch and added to it over time. When you’re working on an existing codebase, the first step is to clone the codebase into your local system. This enables you to work on your copy of the repository without any interference from other changes.

To clone a repository, run the git clone command, followed by the path to the repository:

git clone /path/to/repo

If your source doesn’t reside in the same system, you can SSH to a remote system and clone too:

git clone username@remote_system_ip:/path/to/repo/on/remote

If you’re cloning from a source on the Internet, you can simply add the URL:

git clone https://github.com/sdaityari/my_git_project.git

Whenever you’re cloning a repository, you’ve the choice of multiple protocols to connect to the source. In the GitHub example above, I’ve used the https protocol.

2. Managing Remotes in Git

Once you’ve cloned your repository, it still maintains a pointer to the source. This pointer is an example of a remote in Git. A remote is a pointer to another copy of the same repository. When you clone a repository, a pointer origin is automatically created which points to the source.

You can check a list of remotes in a repository by running the following command:

git remove -v

To add a remote, you can use the git remote add command:

git remote add remote_name remote_address

You can remove a remote using the git remote remove command:

git remote remove remote_name

If you’d like to change the address of a remote, you can use the set-url command:

git remote set-url remote_name new_remote_address

3. Branching in Git

The biggest advantage of Git over other version control systems is the power of its branches. Before I jump into the essentials of branching, you may be wondering what a branch is. A branch is a pointer to a commit in your repository, which in turn points to its predecessor. Therefore, a branch represents a list of commits in chronological order. When you create a branch, you effectively create only a new pointer to a commit. However, in essence, it represents a new, independent path of development.

If you’ve been working on your own project, you may never have consciously used branches. By default, Git uses the master branch for development. Any new commits are added to this branch.

Branching is necessary for Git to bifurcate lines of work in a project. At a single time, there may be many developers who are working on a variety of different problems. Ideally, these problems are worked on in different branches to ensure logical separation of new code until code review and merge.

To check a list of branches and the current active branch, run the following command:

git branch

To create a new branch, run the following command:

git branch new_branch

Even though Git creates a new branch, notice that your active branch is still the old one. To start development in a new branch, run the following:

git checkout new_branch

To create a new branch and change the active branch, run the following command:

git checkout -b new_branch

To rename the current branch, run the following command:

git branch -m new_renamed_branch

Use the -D option to remove a branch:

git branch -D new_renamed_branch

Here’s a detailed guide on branching in Git.

4. Update your Local Repository: Merging

While we’ve checked the basics of branching in Git, the next logical step is to merge a branch into your base branch when you’ve finished working on a problem. To merge a branch, run the following command:

git checkout base_branch
git merge new_branch

While it may sound like an easy process, merging is potentially the most time-consuming process in Git, as it can give rise to conflicts.

5. Handle Conflicts

Imagine that you’re working on a file in a new branch. After you commit the changes, you request Git to merge your new branch with your base branch. However, the same part of the same file in the base branch has been updated since you created the new branch. How does Git decide which changes to keep and which changes to discard?

Git always tries to not lose any data in the process of a merge. If the changes to the same file were done in different parts of the file, you could get away by keeping both sets of changes. However, if Git is unable to decide which changes to keep, it raises a conflict.

When a conflict has been raised, running git status on your repository shows a list of files that were modified in both branches being merged. If you open any file with a conflict, you’d notice the following set of lines:

<<<<<<<< HEAD
…
…
========
…
…
>>>>>>>> new_branch

The part of the file between <<<<<<<< HEAD and ======== contains that code which is present in the base branch. The lines of code between ======== and >>>>>>>> new_branch are present in the new_branch branch. The developer who’s merging the code has the responsibility to decide what part of the code (or a mix of both parts) should be included in the merge. Once edited, remove the three sets of lines shown, save the file, and commit the changes.

The post 10 Git Techniques You Need to Know Before You Join a Team appeared first on SitePoint.

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/JSm6tnjksaI/

Adobe Fonts is one of the few resources for web safe fonts available. Other than Google Fonts, which are free, there are not many other places you can find such a large library of fonts for use on websites. While Adobe Fonts does require paying a monthly fee to use, it is also included with most Creative Cloud plans, for which most designers will already have an account. Because this invaluable resource has thousands of available fonts, it can be difficult to rummage through all of them to come up with the best Adobe font pairings for website projects. So we’ve put together fourteen of our favorites for you in an effort to save you some time.

In the Adobe font pairings below, you will find clean, legible web fonts that are actually being pulled in directly from Adobe fonts onto the page, the same as you would on a website. These are not images. So you can see exactly how they will display on a website. The titles of each of the Adobe font pairings are clickable links to the font pages themselves, for ease of access and bookmarking to use yourself.

We hope you enjoy these 14 best Adobe font pairings we’ve suggested, and find them useful in your upcoming projects.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month!

DOWNLOAD NOW

Orpheus (Bold) + Proxima Nova

Orpheus Makes A Great Headline

Paired with Proxima Nova for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis Best Adobe Font Pairings hendrerit venenatis, ultrices eget augue.

URW Din (Bold) + Neue Haas Grotesk (Light)

URW Din Makes A Great Headline

Paired with Neue Haas Grotesk for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Lust + FF Tisa

Lust Makes A Great Headline

Paired with FF Tisa for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Aktiv Grotesk (XBold) + Aktiv Grotesk Ext

Aktiv Grotesk Makes A Great Headline

Paired with Aktiv Grotesk Ext for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Big Caslon (Black) + Neue Haas Grotesk (Light)

Big Caslon Makes A Great Headline

Paired with Neue Haas Grotesk for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

JAF Lapture (Bold) + Franklin Gothic URW (Light)

JAF Lapture Makes A Great Headline

Paired with Franklin Gothic URW for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Brothers (Bold) + Interstate (Light)

Brothers Makes A Great Headline

Paired with Interstate for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Rift (Bold) + Acumin (Light)

Rift Makes A Great Headline

Paired with Acumin for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Sofia (Semi Bold) + FF Tisa

Sofia Makes A Great Headline

Paired with FF Tisa for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Calluna (Bold) + Effra

Calluna Makes A Great Headline

Paired with Effra for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Miller Display (Bold) + Calluna

Miller Display Makes A Great Headline

Paired with Calluna for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Din Condensed + Basic Sans (Light)

Din Condensed Makes A Great Headline

Paired with Basic Sans for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Ambroise (ExtraBold) + JAF Domus

Ambroise Makes A Great Headline

Paired with JAF Domus for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Fieldwork (Bold) + Source Sans

Fieldwork Makes A Great Headline

Paired with Source Sans for the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus ut quam sed tempor. Mauris tincidunt, risus sit amet commodo pellentesque, arcu mi dapibus odio, id eleifend lectus nibh sed est. Ut tristique dui at nisl egestas congue. Curabitur in eros eget tortor mollis tempor. Duis nec euismod orci, sed congue dolor. Curabitur finibus ex et condimentum dictum. Quisque libero turpis, viverra mattis hendrerit venenatis, ultrices eget augue.

Original Source: https://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/

As a collective digital artist, it is important to understand the fundamental science behind color theory. It’s a popular topic with a vast spread of information to retain and digest. Not only…

Visit hongkiat.com for full content.