The City of Los Angeles
The following content comes from wikipedia to demo typography
Los Angeles is the most populous city in the U.S. state of California. With roughly 3.9 million residents within the city limits as of 2020, Los Angeles is the second-most populous city in the United States, behind only New York City; it is also the commercial, financial and cultural center of Southern California. Los Angeles has an ethnically and culturally diverse population, and is the principal city of a metropolitan area of 13.2 million people. Greater Los Angeles, which includes the Los Angeles and Riverside-San Bernardino metropolitan areas, is a sprawling metropolis of over 18 million residents.
Form of Government
Los Angeles is a charter city as opposed to a general law city. The current charter was adopted on June 8, 1999, and has been amended many times. The elected government consists of the Los Angeles City Council and the mayor of Los Angeles, which operate under a mayor–council government, as well as the city attorney and controller.
I believe that each of us has an obligation to leave our society a far wiser, far richer, far better society than we found it. If each of us can just fulfill half of that obligation through our own commitment, then I think the future is going to be bright.
—Mayor Tom Bradley
Neighborhoods
The city is divided into many different districts and neighborhoods, some of which had been separately incorporated cities that eventually merged with Los Angeles. These neighborhoods were developed piecemeal, and are well-defined enough that the city has signage which marks nearly all of them.
Downtown Los Angeles
Downtown Los Angeles (DTLA) is the central business district of Los Angeles. Downtown Los Angeles is divided into neighborhoods and districts, some overlapping. It is the hub for the city's urban rail transit system, as well as the Pacific Surfliner and Metrolink commuter rail system covering greater Southern California. Also located downtown is the Civic Center, the administrative core of the city government.
The Civic Center
The Civic Center has the distinction of containing the largest concentration of government employees in the United States outside of Washington, D.C. The reason for the high concentration is simple: Los Angeles is the most populous county in the United States and its second largest city, and houses several state and federal functions for the region.
Buildings & Landmarks
- Ahmanson Theatre
- Grand Park
- Los Angeles City Hall
- Los Angeles Music Center
- Mark Taper Forum
- Walt Disney Concert Hall
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Extrabold 1
Extrabold 2
Extrabold 3
Extrabold 4
Extrabold 5
Extrabold 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
<h1 title="h1">The City of Los Angeles</h1>
<p class="lead" title="lead"> The following content comes from wikipedia to demo typography </p>
<p title="regular body text">Los Angeles is the most populous city in the U.S. state of California. With roughly 3.9 million residents within the
city limits as of 2020, Los Angeles is the second-most populous city in the United States, behind only New York City; it is also the commercial, financial and
cultural center of Southern California. Los Angeles has an ethnically and culturally diverse population, and is the principal city of a metropolitan area of 13.2
million people. Greater Los Angeles, which includes the Los Angeles and Riverside-San Bernardino metropolitan areas, is a sprawling metropolis of over 18 million residents.</p>
<h2 title="h2">Form of Government</h2>
<p title="regular body text">Los Angeles is a charter city as opposed to a general law city. The current charter was adopted on June 8, 1999, and
has been amended many times. The elected government consists of the Los Angeles City Council and the mayor of Los Angeles, which operate under a mayor–
council government, as well as the city attorney and controller.</p>
<p><blockquote title="quote block"> I believe that each of us
has an obligation to leave our society a far wiser, far richer, far better society than we found it. If each of us can just fulfill half of that obligation
through our own commitment, then I think the future is going to be bright. <br>—Mayor Tom Bradley </blockquote></p>
<h3 title="h3">Neighborhoods</h3>
<p title="regular body text">The city is divided into many different districts and neighborhoods, some of which had been separately incorporated
cities that eventually merged with Los Angeles. These neighborhoods were developed piecemeal, and are well-defined enough that the city has signage which marks
nearly all of them.</p>
<h4 title="h4">Downtown Los Angeles</h4>
<p title="regular body text">Downtown Los Angeles (DTLA) is the central business district of Los Angeles. Downtown Los Angeles is divided into
neighborhoods and districts, some overlapping. It is the hub for the city's urban rail transit system, as well as the Pacific Surfliner and Metrolink commuter
rail system covering greater Southern California. Also located downtown is the Civic Center, the administrative core of the city government.</p>
<h5 title="h5">The Civic Center</h5>
<p title="regular body text">The Civic Center has the distinction of containing the largest concentration of government employees in the United
States outside of Washington, D.C. The reason for the high concentration is simple: Los Angeles is the most populous county in the United States and its second
largest city, and houses several state and federal functions for the region.</p>
<h6 title="h6">Buildings & Landmarks</h6>
<p> <ul title="bullet points">
<li>Ahmanson Theatre</li>
<li>Grand Park</li>
<li>Los Angeles City Hall</li>
<li>Los Angeles Music Center</li>
<li>Mark Taper Forum</li>
<li>Walt Disney Concert Hall</li>
</ul> </p> <br> <hr> <br>
<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>
<br>
<p class="extrabold-1">Extrabold 1</p>
<p class="extrabold-2">Extrabold 2</p>
<p class="extrabold-3">Extrabold 3</p>
<p class="extrabold-4">Extrabold 4</p>
<p class="extrabold-5">Extrabold 5</p>
<p class="extrabold-6">Extrabold 6</p>
<br>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<br>
<p> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>
a b c d e f g h i j k l m n o p q r s t u v w x y z<br>
0 1 2 3 4 5 6 7 8 9 </p>| Font Size | Font Weight | Line Height | Letter Spacing | Bottom Margin | |
|---|---|---|---|---|---|
| p | 16px | 400 | 24px | normal | 1rem |
| .lead | 20px | 300 | 24px | normal | 1rem |
| blockquote | 20px | 400 | 30px | normal | 1rem |
| Display 1 | 5rem | 300 | 1.2 | normal | 1rem |
| Display 2 | 4.5rem | 300 | 1.2 | normal | 1rem |
| Display 3 | 4rem | 300 | 1.2 | normal | 1rem |
| Display 4 | 3.5rem | 300 | 1.2 | normal | 1rem |
| Display 5 | 3rem | 300 | 1.2 | normal | 1rem |
| Display 6 | 2.5rem | 300 | 1.2 | normal | 1rem |
| Extrabold 1 | 4rem | 800 | 1.2 | normal | 1rem |
| Extrabold 2 | 3.5rem | 800 | 1.2 | normal | 1rem |
| Extrabold 3 | 3rem | 800 | 1.2 | normal | 1rem |
| Extrabold 4 | 2.5rem | 800 | 1.2 | normal | 1rem |
| Extrabold 5 | 32px | 800 | 1.2 | normal | 0.5rem |
| Extrabold 6 | 28px | 800 | 1.2 | normal | 0.5rem |
| Heading h1 | 40px | 600 | 1.2 | normal | 0.5rem |
| Heading h2 | 32px | 600 | 1.2 | normal | 0.5rem |
| Heading h3 | 28px | 600 | 1.2 | normal | 0.5rem |
| Heading h4 | 24px | 600 | 1.2 | normal | 0.5rem |
| Heading h5 | 20px | 600 | 1.2 | normal | 0.5rem |
| Heading h6 | 16px | 700 | 1.2 | normal | 0.5rem |
The City of Los Angeles
The following content comes from wikipedia to demo typography
Los Angeles is the most populous city in the U.S. state of California. With roughly 3.9 million residents within the city limits as of 2020, Los Angeles is the second-most populous city in the United States, behind only New York City; it is also the commercial, financial and cultural center of Southern California. Los Angeles has an ethnically and culturally diverse population, and is the principal city of a metropolitan area of 13.2 million people. Greater Los Angeles, which includes the Los Angeles and Riverside-San Bernardino metropolitan areas, is a sprawling metropolis of over 18 million residents.
Form of Government
Los Angeles is a charter city as opposed to a general law city. The current charter was adopted on June 8, 1999, and has been amended many times. The elected government consists of the Los Angeles City Council and the mayor of Los Angeles, which operate under a mayor–council government, as well as the city attorney and controller.
I believe that each of us has an obligation to leave our society a far wiser, far richer, far better society than we found it. If each of us can just fulfill half of that obligation through our own commitment, then I think the future is going to be bright.
—Mayor Tom Bradley
Neighborhoods
The city is divided into many different districts and neighborhoods, some of which had been separately incorporated cities that eventually merged with Los Angeles. These neighborhoods were developed piecemeal, and are well-defined enough that the city has signage which marks nearly all of them.
Downtown Los Angeles
Downtown Los Angeles (DTLA) is the central business district of Los Angeles. Downtown Los Angeles is divided into neighborhoods and districts, some overlapping. It is the hub for the city's urban rail transit system, as well as the Pacific Surfliner and Metrolink commuter rail system covering greater Southern California. Also located downtown is the Civic Center, the administrative core of the city government.
The Civic Center
The Civic Center has the distinction of containing the largest concentration of government employees in the United States outside of Washington, D.C. The reason for the high concentration is simple: Los Angeles is the most populous county in the United States and its second largest city, and houses several state and federal functions for the region.
Buildings & Landmarks
- Ahmanson Theatre
- Grand Park
- Los Angeles City Hall
- Los Angeles Music Center
- Mark Taper Forum
- Walt Disney Concert Hall
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Extrabold 1
Extrabold 2
Extrabold 3
Extrabold 4
Extrabold 5
Extrabold 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
<h1 title="h1">The City of Los Angeles</h1>
<p class="lead" title="lead"> The following content comes from wikipedia to demo typography </p>
<p title="regular body text">Los Angeles is the most populous city in the U.S. state of California. With roughly 3.9 million residents within the
city limits as of 2020, Los Angeles is the second-most populous city in the United States, behind only New York City; it is also the commercial, financial and
cultural center of Southern California. Los Angeles has an ethnically and culturally diverse population, and is the principal city of a metropolitan area of 13.2
million people. Greater Los Angeles, which includes the Los Angeles and Riverside-San Bernardino metropolitan areas, is a sprawling metropolis of over 18 million residents.</p>
<h2 title="h2">Form of Government</h2>
<p title="regular body text">Los Angeles is a charter city as opposed to a general law city. The current charter was adopted on June 8, 1999, and
has been amended many times. The elected government consists of the Los Angeles City Council and the mayor of Los Angeles, which operate under a mayor–
council government, as well as the city attorney and controller.</p>
<p><blockquote title="quote block"> I believe that each of us
has an obligation to leave our society a far wiser, far richer, far better society than we found it. If each of us can just fulfill half of that obligation
through our own commitment, then I think the future is going to be bright. <br>—Mayor Tom Bradley </blockquote></p>
<h3 title="h3">Neighborhoods</h3>
<p title="regular body text">The city is divided into many different districts and neighborhoods, some of which had been separately incorporated
cities that eventually merged with Los Angeles. These neighborhoods were developed piecemeal, and are well-defined enough that the city has signage which marks
nearly all of them.</p>
<h4 title="h4">Downtown Los Angeles</h4>
<p title="regular body text">Downtown Los Angeles (DTLA) is the central business district of Los Angeles. Downtown Los Angeles is divided into
neighborhoods and districts, some overlapping. It is the hub for the city's urban rail transit system, as well as the Pacific Surfliner and Metrolink commuter
rail system covering greater Southern California. Also located downtown is the Civic Center, the administrative core of the city government.</p>
<h5 title="h5">The Civic Center</h5>
<p title="regular body text">The Civic Center has the distinction of containing the largest concentration of government employees in the United
States outside of Washington, D.C. The reason for the high concentration is simple: Los Angeles is the most populous county in the United States and its second
largest city, and houses several state and federal functions for the region.</p>
<h6 title="h6">Buildings & Landmarks</h6>
<p> <ul title="bullet points">
<li>Ahmanson Theatre</li>
<li>Grand Park</li>
<li>Los Angeles City Hall</li>
<li>Los Angeles Music Center</li>
<li>Mark Taper Forum</li>
<li>Walt Disney Concert Hall</li>
</ul> </p> <br> <hr> <br>
<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>
<br>
<p class="extrabold-1">Extrabold 1</p>
<p class="extrabold-2">Extrabold 2</p>
<p class="extrabold-3">Extrabold 3</p>
<p class="extrabold-4">Extrabold 4</p>
<p class="extrabold-5">Extrabold 5</p>
<p class="extrabold-6">Extrabold 6</p>
<br>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<br>
<p> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>
a b c d e f g h i j k l m n o p q r s t u v w x y z<br>
0 1 2 3 4 5 6 7 8 9 </p>| Font Size | Font Weight | Line Height | Letter Spacing | Bottom Margin | |
|---|---|---|---|---|---|
| p | 18px | 400 | 26px | normal | 20px |
| .lead | 20px | 600 | 24px | normal | 20px |
| blockquote | 20px | 400 | 34px | normal | 20px |
| Display 1 | 5rem | 300 | 1.2 | normal | 1rem |
| Display 2 | 4.5rem | 300 | 1.2 | normal | 1rem |
| Display 3 | 4rem | 300 | 1.2 | normal | 1rem |
| Display 4 | 3.5rem | 300 | 1.2 | normal | 1rem |
| Display 5 | 3rem | 300 | 1.2 | normal | 1rem |
| Display 6 | 2.5rem | 300 | 1.2 | normal | 1rem |
| Extrabold 1 | 4rem | 800 | 1.2 | normal | 1rem |
| Extrabold 2 | 3.5rem | 800 | 1.2 | normal | 1rem |
| Extrabold 3 | 3rem | 800 | 1.2 | normal | 1rem |
| Extrabold 4 | 2.5rem | 800 | 1.2 | normal | 1rem |
| Extrabold 5 | 32px | 800 | 1.2 | normal | 0.5rem |
| Extrabold 6 | 28px | 800 | 1.2 | normal | 0.5rem |
| Heading h1 | 45px | 600 | 55px | normal | 0.5rem |
| Heading h2 | 36px | 600 | 44px | normal | 0.5rem |
| Heading h3 | 32px | 600 | 38px | normal | 0.5rem |
| Heading h4 | 27px | 600 | 33px | normal | 0.5rem |
| Heading h5 | 22px | 600 | 28px | normal | 0.5rem |
| Heading h6 | 18px | 600 | 24px | normal | 0.5rem |
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>| Font Size | Font Weight | Line Height | Letter Spacing | Bottom Margin | |
|---|---|---|---|---|---|
| Heading h1 | 40px | 600 | 1.2 | normal | 0.5rem |
| Heading h2 | 32px | 600 | 1.2 | normal | 0.5rem |
| Heading h3 | 28px | 600 | 1.2 | normal | 0.5rem |
| Heading h4 | 24px | 600 | 1.2 | normal | 0.5rem |
| Heading h5 | 20px | 600 | 1.2 | normal | 0.5rem |
| Heading h6 | 20px | 700 | 1.2 | normal | 0.5rem |
Heading .h1
Heading .h2
Heading .h3
Heading .h4
Heading .h5
Heading .h6
<p class="h1">Heading .h1</p>
<p class="h2">Heading .h2</p>
<p class="h3">Heading .h3</p>
<p class="h4">Heading .h4</p>
<p class="h5">Heading .h5</p>
<p class="h6">Heading .h6</p>| Font Size | Font Weight | Line Height | Letter Spacing | Bottom Margin | |
|---|---|---|---|---|---|
| Heading h1 | 40px | 600 | 1.2 | normal | 0.5rem |
| Heading h2 | 32px | 600 | 1.2 | normal | 0.5rem |
| Heading h3 | 28px | 600 | 1.2 | normal | 0.5rem |
| Heading h4 | 24px | 600 | 1.2 | normal | 0.5rem |
| Heading h5 | 20px | 600 | 1.2 | normal | 0.5rem |
| Heading h6 | 20px | 700 | 1.2 | normal | 0.5rem |
Extrabold 1
Extrabold 2
Extrabold 3
Extrabold 4
Extrabold 5
Extrabold 6
<p class="extrabold-1">Extrabold 1</p>
<p class="extrabold-2">Extrabold 2</p>
<p class="extrabold-3">Extrabold 3</p>
<p class="extrabold-4">Extrabold 4</p>
<p class="extrabold-5">Extrabold 5</p>
<p class="extrabold-6">Extrabold 6</p>| Font Size | Font Weight | Line Height | Letter Spacing | Bottom Margin | |
|---|---|---|---|---|---|
| Extrabold 1 | 4rem | 800 | 1.2 | normal | 1rem |
| Extrabold 2 | 3.5rem | 800 | 1.2 | normal | 1rem |
| Extrabold 3 | 3rem | 800 | 1.2 | normal | 1rem |
| Extrabold 4 | 2.5rem | 800 | 1.2 | normal | 1rem |
| Extrabold 5 | 32px | 800 | 1.2 | normal | 0.5rem |
| Extrabold 6 | 28px | 800 | 1.2 | normal | 0.5rem |
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>| Font Size | Font Weight | Line Height | Letter Spacing | Bottom Margin | |
|---|---|---|---|---|---|
| Display 1 | 5rem | 300 | 1.2 | normal | 1rem |
| Display 2 | 4.5rem | 300 | 1.2 | normal | 1rem |
| Display 3 | 4rem | 300 | 1.2 | normal | 1rem |
| Display 4 | 3.5rem | 300 | 1.2 | normal | 1rem |
| Display 5 | 3rem | 300 | 1.2 | normal | 1rem |
| Display 6 | 2.5rem | 300 | 1.2 | normal | 1rem |
[s] This line of text is meant to be treated as no longer accurate.
[u] This line of text will render as underlined.
[em] This line rendered as italicized text.
[ins] This line of text is meant to be treated as an addition to the document.
[del] This line of text is meant to be treated as deleted text.
[mark] You can use the mark tag to highlight text.
[small] This line of text is meant to be treated as fine print.
[strong] This line rendered as bold text.
<p>[s] <s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>[u] <u>This line of text will render as underlined.</u></p>
<p>[em] <em>This line rendered as italicized text.</em></p>
<p>[ins] <ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p>[del] <del>This line of text is meant to be treated as deleted text.</del></p>
<p>[mark] You can use the mark tag to <mark>highlight</mark> text.</p>
<p>[small] <small>This line of text is meant to be treated as fine print.</small></p>
<p>[strong] <strong>This line rendered as bold text.</strong></p>
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa id neque aliquam vestibulum morbi blandit. Est sit amet facilisis magna etiam tempor orci eu.
.png)
Floating Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Floating Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Floating Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Floating XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Left Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Left Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Left Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Center Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Center Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Center Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Right Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Right Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Right Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Full Height (1/2) Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Full Height (1/2) Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Full Height (1/2) Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.png)
Full Height (1/2) XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (2/3) XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (1/2) Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (1/2) Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (1/2) Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full Height (1/2) XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
City of Los Angeles Style Guide
This Style Guide documents the frameworks, typography, web components, and best practices used by the City of Los Angeles' Information Technology Agency to build its websites.
Websites are an important channel for government and its residents to communicate with each other. The standards set in this Style Guide aim to provide visitors to City of Los Angeles websites with a good user experience and consistent branding so that information is exchanged as easily and effectively as possible.
Browse this site to explore individual web components, seals, and logos used on City of Los Angeles websites. This is a living document so expect it to change over time.
Recommended Tools & Frameworks
Design System:
Bootstrap version 5
Icon Library:
Font Awesome version 6.5
Font Library:
Google Fonts
Analytics:
Google Analytics
City of Los Angeles Branding
There are hundreds of websites belonging to the City that the public may interact with. In order to establish the City's brand and establish a sense of uniformity for the public as they visit the City's various websites, all websites must include its official branding bar which includes the City seal and the words "City of Los Angeles".
Instructions on how to add the branding bar to your website is available at https://navbar.lacity.org.
Compatibility Across Devices & Browsers
Mobile responsive websites dynamically respond and resize themselves based on the device being used to view them whether you are using a traditional desktop computer, tablet, or smartphone. In an era where over 80% of American adults use a smartphone and residents will use a variety of devices to access L.A. City services, websites must be responsive and usable across multiple devices and browsers to ensure that all visitors have access to the same information.
Accessibility Guidelines
Websites are an important channel of communication between government agencies and the public. Therefore we should ensure that City websites are readable and accessible to all populations including those with disabilities that may need assistive technologies to access and read information on a website.
All City of Los Angeles websites are required to follow WCAG 2.0 standards with no errors in either Level A or AA.
Multilingual Options
Los Angeles is home to 538,800 immigrant residents designated as English Language learners, who represent over 37 percent of the immigrant Angeleno population. In order to ensure that all Angelenos have equal access to information and services, the City of L.A. must ensure that its websites can reach populations with limited English proficiency by utilizing tools such as Google Translate.
In accordance with Executive Directive 32 (Garcetti Series), departments shall ensure that their websites can be translated from English into at least the following languages;
- Spanish
- Korean
- Armenian
- Chinese
- Filipino/Tagalog
- Farsi (Persian)
Using 3rd Party Images, Videos, and other Content
It is common practice to include content like graphics and photography on websites that have been created from third party providers like stock photography providers. However the City must ensure that proper clearances have been obtained before using that material on their websites.
Make Information Searchable and Discoverable
The City of Los Angeles has over 120 official websites with tens of thousands of pages of content. The ability for L.A. residents and businesses to efficiently and easily access the information they desire (and the opportunity to show additional content that viewers may find useful) should be a top priority. All public-facing city websites shall ensure that their content can be indexed and searched by commonly used commercial search engines.
Include Copyright Notice
Under U.S. Copyright law, copyright-protected materials may not be reproduced, distributed, transmitted, displayed, or otherwise published without the prior written permission of the owners of these materials. This also applies to trademarks, which can be a word, phrase, symbol or design, or a combination thereof, that identifies and distinguishes the source of the goods of one party from those of others.
To protect City materials, all pages of City websites shall display a City of Los Angeles copyright statement and give proper trademark notice using either of the following standard copyright notices.
Approved Copyright notices to include in the footer of a website include;
- "© Copyright 2023 City of Los Angeles. All rights reserved."
- "© Copyright City of Los Angeles, unless otherwise noted. All logos, names, insignias, etc. of City Departments, Elected Official Offices, and Commissions are trademarks of the City of Los Angeles. Unauthorized use prohibited."
Link to Privacy Policy
A government website can potentially collect personally identifiable information (PII - any information relating to an identified or identifiable individual who is the subject of the information) on a website and must be transparent about policies and practices with respect to PII.
The City of Los Angeles' Standard Privacy Policy is available at https://disclaimer.lacity.org/privacy.htm.
Link to Disclaimer
A disclaimer is important because it helps protect the City against legal claims. Disclaimers notify users that the City will not be held responsible for damages arising from the use of its websites. Every page of a City website shall provide a link titled "Site Disclaimer" located in the footer area that should link to the City's official disclaimer page which includes language related to the City's policies and Google Translate's policies.
The City of Los Angeles' Standard Disclaimer is available at https://disclaimer.lacity.org/disclaimer.htm.